Make Your Blog More Dynamic with a Slider

When you read the word “slider,” what do you think of?

Baseball? Burgers? How about blogs?

The best way to build an audience is to produce awesome content — write posts that your readers will devour, and keep them coming back for more. But what about the visitors who randomly stumble upon your blog? How do you grab their attention in the first place?

Enter the slider. A slider is a webpage element used to highlight a group of selected posts. The slider displays one post at a time, transitioning from one to the next automatically or at the click of a button. Often, the slider looks like a fancy slideshow located near the top of your site (in fact, a slideshow is a type of slider).

This slideshow requires JavaScript.

A slideshow of sliders — pretty meta, right?

When used effectively, sliders give your site a more dynamic feel. Then again, some web designers argue that they add clutter and increase loading time, so you may want to consider whether or not your site actually needs one. Think of a slider as an animated billboard with flashing neon lights on the side of the freeway — great for catching people’s attention, but potentially obtrusive if overdone.

As you browse through the hundreds of themes available at WordPress.com, you’ll find that sliders come in all sizes and forms. Today, we’re going to look at eight sites that use sliders, and talk about how you can use each one to spiff up your site!

Sight

First we have Worddreams, the blog of teacher and writer Jacqui Murray:

worddreams - Sight

Murray uses Sight, a theme we’ve written about previously. The sliding element on Sight comprises both an image and a text excerpt, so your readers can get a taste of what the post is all about before clicking it.

Oxygen

Next is Just Nashik, a site to promote the city of Nashik, India:

Just Nashik - Oxygen

Just Nashik uses Oxygen, which we’ve also mentioned before. In Oxygen, a row of thumbnail images appears below the slider, which allows you to click to each featured post without having to scroll through the slider itself.

iTheme2

If you’re looking for something more subtle, check out Electronic Rumors:

Electronic Rumors - iTheme2

A music site, Electronic Rumors uses the smaller slider on iTheme2 to feature different albums. This slider uses only thumbnail-sized images and small text, which reduces the height of the header considerably. If you like the dynamic feel of a slider, but also want something less obtrusive, iTheme2 may be for you. Here are some other ways to customize iTheme2.

Untitled

Then we have Roselinde, the personal blog of travel enthusiast Roselinde Alexandra Bon:

Rosalinde 1 - Untitled

Since Roselinde is also a photographer, she makes use of Untitled‘s responsive, full-width slider, which allows you to upload high-resolution images that will enlarge or shrink to fit across your entire screen. Even more nifty is the secondary slider:

Rosalinde 2 - Untitled

This one, which is unique to Untitled, appears at the bottom of the header on individual posts (the primary slider appears only on the home page) and contains a completely separate scroll of posts.

All four sites above use free WordPress.com themes, so you can get started on sliders right away! But if you’re looking for something more specialized, check out these examples of sliders from our premium themes.

Outspoken

If you want a slider to dominate your reader’s field of vision, take a page from Al Ostoura Magazine, which uses the appropriately-named theme Outspoken:

Al Ostoura Magazine - Outspoken

With images that occupy the majority of the screen, as well as a sliding element that actually moves (some themes simply fade from one featured post to the next), you’ll have no trouble drawing your reader’s eyes to your featured posts.

Massive Press

Sliding (ahem) now to the opposite extreme, we have CultNoise, an online cultural and lifestyle magazine:

Cultnoise - Massive Press

The site uses Massive Press, which — ironically enough — has the least massive of sliders. Covering only half the width of the page, Massive Press’s slider uses simple buttons at the bottom to navigate the featured posts — perfect for adding just a bit of movement to your site, but still leaving the content itself as the main attraction.

On Demand

What if you want to post videos on your site? Try Arbutus Yarns, which features the films of music documentarian Myles O’Reilly:

Arbutus Yarns - On Demand

Using On Demand, created specifically for video blogs, O’Reilly showcases several of his videos with a design that even looks like a video player. The movement of the sliding element also starts slowly, accelerates, then decelerates at the end, giving it a cool zipping effect.

InfoWay

Finally, for some fancy visual effects, take a look at Figs by Todd English, a restaurant website using InfoWay:

Figs - InfoWay

The first thing you’ll notice is the shadowing under the slider, which gives it a floating, three-dimensional feel, as though the slider is popping out from the screen. You’ll also see a partially transparent menu to the right of the slider, which allows you to select each featured post individually. And as the image slides, you can see it moving behind the menu. Pretty cool!

And there you have it: eight sites, eight themes, eight sliders. And our Theme Showcase has plenty more! If you’re ready to add some movement to your own site, click here to browse through our themes that have sliders. Once you’ve selected a theme, the instructions on the theme’s support page will explain how to set it up.

On the other hand, if you think you need a little more guidance, check out our detailed tutorial on The Daily Post!


Posted by WordPress Guru