by Raelene Morey on July 13, 2018

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.

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

So what’s 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. They look like this:

Example for a hero slider
Lonely Planet’s hero slider

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 asa 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

SpaceX slider
SpaceX 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.

Lamborghini

Hero slider by Lamborghini
Hero slider by 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

Spotify’s hero slider
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.

Full Screen Slider for Divi

Full Screen Slider for Divi
Full Screen Slider for Divi

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 Slider

Rotating Slider in Smart Slider 3
Rotating Slider in Smart Slider 3

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:

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:

Hero slider in 2013
Hero slider in 2013

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

Hero slider in 2018
Hero slider in 2018

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!

Raelene Morey

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.