Hero Sliders in Web Design: Ideas, Examples and Inspiration

One of the biggest trends in web design and WordPress in recent years has been the use of big images. And not just large, but completely oversized images that come to life on screen. When used at the top of the page, they’re known as hero headers. But what I want to tell you more about today is hero sliders.

What is a hero slider?

A hero slider extends the idea of a hero image, allowing you to present multiple hero images in sequence, using captions, transitions, and animation.

A hero slider is defined as a large, featured series of images prominently displayed on the homepage.

What’s so impressive about this hero slider on the Lonely Planet website is a number of things:

• It features four stunning photos, which you can scroll through at your leisure, or sit back and watch it on autoplay.
• There’s clear navigation at the bottom – each image has a description that puts it into context.
• There are clear calls-to-action labelled “Read More” that direct the reader to complete the desired action.
• When you click on the navigation, the autoplay stops so you can focus 100% on each image.

First impressions count, and this hero slider makes good use of Lonely Planet’s extensive archive of beautiful travel photography, making a strong first impression on would-be travelers.

What’s more, Angie Schottmuller describes a hero shot as “a credible photo or video of a solution that encompasses relevance, context, value, and emotion to support, educate, or persuade”.

So a hero slider isn’t simply series of large photos – they are large photos that complement your value proposition – in the case of Lonely Planet, beautiful travel locations – to provide clarity and context to your visitors. It’s a series of photos with a purpose.

Why Use a Hero Slider?

To really understand why hero sliders work, it’s important to understand some basic psychology behind how people judge your website. How visitors perceive your website plays a crucial role in how they interact with it. People feel happy when they see a website that:

• instantly makes sense,
• is easy to read,
• clear, and
• understandable.

It doesn’t take long for people to make a judgment about who you are and what you represent, and a hero slider helps create a sense of ease, clarity, and understandability right away.

In fact, it takes only about 50 milliseconds (that’s 0.05 seconds) for site visitors to form an opinion about your site. That’s how long you have to convince visitors to stay and not abandon your site.

Inspiring Examples of Hero Sliders

Some of the world’s biggest brands have recognized the value of hero sliders and their ability grab a visitor’s attention, allowing them to deliver key information in an organized and focused way.

SpaceX hero slider

SpaceX, like Lonely Planet, provides navigation below its images so visitors know exactly what’s coming up – three images that promote the company’s endeavors around space technology.

What’s great about hero sliders compared to single hero images is that you can feature a mix of image in limited screen real estate while still keeping visitors focused on your key messages.

Hero slider at Lamborghini

Lamborghini also uses a mix of video and high-resolution imagery to show off its cars, because why not? An image of a car is good, but a video of a luxury sports car speed along an open stretch of road? Even better. It creates a visually stunning cinematic experience.

When viewed on mobile, the slider defaults to a hero image, allowing Lamborghini visitors to views the car without the need to download high-resolution images on devices with limited bandwidth or data allowances.

Spotify’s hero slider

Spotify’s hero slider is simple yet effective. It maintains the same gradient background image, but allows visitors to scroll through a number of messages and corresponding CTA buttons. Why does this work? It’s easy, clear, and understandable – users don’t have to think too hard about what Spotify is offering, just click a button and download Spotify for free.

Stunning Examples of Smart Slider 3 Hero Sliders

With Smart Slider 3, you can easily recreate any of the slider designs above and make customizations to suit the look and feel of your WordPress site. Give Smart Slider 3 a try for free! and s Here are a few great examples that show off what you can achieve with this versatile plugin.

Virtual Conference

This gorgeous slider is a great example of modern hero sliders. It’s large, features a nice image and has spectacular effects. For example, it uses an Animated Heading Layer on the first slide, immediately catching the visitor’s attention. It has textual thumbnails for navigation. They’re great to explain what’s on the slide for the visitor before they decide to switch to it. Also, it has a cool Morph animation to switch slides

SEO Agency

Introducing your business is one of the most important aspects of having a website. The SEO Agency hero slider is a great way to do that. It’s a full width slider that uses pastel colors and nice illustrations. This vertical slider has a custom navigation (with emojis) on the first slide, and also next and previous arrows at the bottom. Apart from these the mouse wheel can be used to switch slides, which makes the experience super smooth.

Flower Shop Slider

This beautiful layered slider is a great example of how you can achieve a simple overlapping look, complete with animations, using several transparent layers and elements. The focal point is the main image of flowers on the right with transparent images of plants layered behind it; on top, there’s the name of the flowers arrangement and the price, all put together in a neat, eye-catching stack. The “shop now” CTA offers clear guidance to visitors who are ready to purchase, while the thumbnails on the right help the visitor scroll through the flowers and see what’s coming up next.

Rotating Hero Slider

This example, designed for web development and hosting companies, features a bright and clean WordPress design. But what catches the eye is the smooth wave effect at the bottom of the slider that adds a sense of movement. Again, there’s a clear CTA. Above it are icons that visitors can click through to see the other slides. Or, they can use the navigational arrows in the bottom-right. This slider also features a smooth fade transition that’s pleasing on the eye.

Common Problems with Hero Sliders (and Their Easy Solution)

Unfortunately, hero sliders do have haters. It’s true. And it’s a shame because, as I’ve outlined above, hero sliders have clear benefits for both site owners and users. Some of the common misconceptions include:

• “Sliders are confusing.” – WiderFunnel, 2011
• “People ignore sliders.” – Nielsen Norman Group, 2013
• “People consider sliders as advertising and don’t take in the messages they display.” – Neilsen Norman Group, 2013
• “Sliders are bad for SEO.” – Search Engine Land, 2013
• “Sliders don’t always work well on mobile devices.” – Brian Krogsgard, 2013

What you’ll notice about each of those links is that they were published in 2013 (with the exception of one review, which is even older). Well, it’s now 2018, which in tech years is a lifetime! Design techniques have advanced immensely over the past five years, nullifying many of the assertions made against hero sliders in these posts.

For a start, hero sliders back in 2013 (thanks to Wayback machine) looked a lot like this:

Ugly, right? No wonder people hated hero sliders. In 2018, hero sliders look like this:

Stunning! I often trot out this example because it’s so freaking beautiful. If it’s not already obvious, the difference between hero sliders from 2013 and those created in 2018 is design. It all comes down to good design. But also, modern slider solutions, such as Smart Slider 3, provide modern features, such as layers, transitions, text editing, custom CSS, and more – that make it easier than ever to design stunning sliders like the Squarespace one above with little effort.

Clearly, designing and choosing images and video for your hero sliders is as much art as it is science. It’s also just as much about branding as it is conversions. Fortunately, there are frameworks that can help guide decisions around hero slider design.

Angie Schottmuller’s 7-step framework provides a set of questions to ask yourself when judging hero images and video:

1. Keyword Relevance – Does the image visualize the targeted keyword or referring link text?
2. Purpose Clarity– Does the featured image help identify the page purpose and/or offer?
3. Design Support – Does the featured image support and enhance seamless flow of page design leading to the CTA? (i.e. photo size, complementary CTA color, contrast, complexity.) Does the featured image have a subtle cue pointing in the direction of the CTA? If yes, +1 bonus! (e.g. eye path, lines, shadows)
4. Authenticity – Does the featured image represent the organization and offer in an authentic, credible fashion? (i.e. genuine, honest, believable, actual vs. stock photo, brand-aligned)
5. Added Value – Does the featured image add value by showing detail or context to improve relevance, demonstrate benefits, and answer questions?
6. Desired Emotion – Does the featured image portray desired qualities or emotion to resonate and inspire action? (Considerations: mood, lighting, scene, body language, colors, urgency)
7. Customer “Hero” – Does the featured image depict the customer as the “hero” once equipped with this solution?

The hero slider above from 2013 lacks all of these points. But when you look at the Squarespace slider from 2018, it’s obvious a lot of thought has been put into its design, and it checks off each and every one of the 7 steps in Schottmuller’s framework.

Ultimately, great hero sliders have great design. They aren’t simply a sliding series of images. They are designed with purpose and with the user at the center of that purpose. Because when you ignore the user, and basic design considerations such as clarity, authenticity and emotion, you’ve really just got a boring set of images that don’t make any sense.

Again, with your hero slider, you’re looking to complement your value proposition and create a great first impression. And a well-designed slider will help you do exactly that.

What About SEO?

“Sliders are bad for SEO.”

Yes, this is true of some poorly-designed slider solutions. But modern options, like Smart Slider 3, make SEO a priority. This WordPress slider plugin allows you to add alt tags for each of the images in your sliders, as well as each layer in your slider. This ensures your images are not only accessible, but searchable in Google.

What About Mobile?

“Sliders don’t always work well on mobile devices.”

This might’ve been the case five years ago, but nowadays, slideshow plugins like Smart Slider 3 provide responsive solutions for different devices, including:

• The ability to swipe through slides rather than click
• You can turn layers on and off for different devices
• The ability to optimize fonts for smaller devices

With these features at your disposal, you can ensure your hero sliders look fantastic on all devices, including desktop and mobile.

Ready to Create Your Own Hero Slider?

Hero headers are among some of the best and most visually appealing trends in web design in recent years, but paired with sliders, they have even more visual punch. When done correctly, hero sliders deliver context and clarity, helping visitors quickly understand what your site is about and what you have to offer.

A great hero slider needs great design, and thanks to solutions like Smart Slider 3, anyone can create a beautiful slider with little effort, using features like drag-and-drop, animations, transitions, buttons, and more.

I hope this tutorial has inspired you to experiment with hero sliders. Feel free to share your thoughts and questions in the comments below!

Tags: HeaderHero imageHero sliderInspiration

About Author

Raelene Morey is the Chief Bird at Words By Birds , an agency that helps WordPress businesses make better content. Computer science grad turned newspaper journalist and ex-managing editor at WPMU DEV. Raelene has been developing WordPress sites for over 10 years.