by Daniel David on July 14, 2017

How to Create Beautiful WordPress Hero Image

One of the most important trends nowadays in web design is hero image design. This special headers are often referred to as hero image, hero slider, banner, video header or carousel. Because Smart Slider 3 is not just a slider plugin you will be able to create the perfect WordPress hero image for your website easily. No matter what type you need, they’re typically located at the top of a website and these are the first things that people see.

Making a good first impression is incredibly important!

You only get one shot with the first impression and you have only few seconds to grab your visitor’s attention. In this article I will introduce you to some of the best practices as well as provide incredible resources to help you create effective WordPress hero image for your website.

Create WordPress hero image with Smart Slider 3
Smart Slider 3 is a perfect tool to create a hero section

What should a good hero image contain?

The right hero image can give your visitors context and help them to understand your purpose. If you want to create a WordPress hero image that is persuasive, informative and understandable, you should consider including the following components:

  • Call to Action: CTA is the action you want your visitor to take, so your goal with the hero image is to persuade visitors to take this action. It doesn’t matter if your goal is increasing sales or generating email leads. But don’t forget you have to be clear about what action you want the visitor to take and make it as easy as possible. Okay but how to start? Start with the CTA and work back. It will be so much easier if you know your goal exactly.
  • Quality background: Probably imagery is the most important part of the hero image. It’s a powerful tool to help you communicate and differentiate your website. Your hero image should contain images, videos or graphics that catch the eye and captivate your audience. Mostly contextual images convey your message more effectively, non-contextual images don’t supplement the message with any additional information.
  • Good copy: The first headline your visitor sees is the most important copy you’ll write on your website. Writing good web copy isn’t easy and it requires skill to get it right. Some of the best copywriters will spend weeks just crafting the headline. Your goal is to communicate your value and get the visitor to interact on your website.
  • Impact: It’s all about creating that WOW moment. The best hero images achieve a balance between capturing reader’s attention and providing an adequate amount of useful information. For example animations are great for making a website design unforgettable and grab your visitor’s attention. The key to animation as a design tool is moderation. There are many ways of using animation to improve the user experience in Smart Slider 3: layer animation, split text animation or memorable interaction.
Typical WordPress hero image
Typical full width hero image

Popular WordPress hero image techniques

Perhaps the biggest challenge for a non-design user is creating beautiful new WordPress hero image with Smart Slider 3 because there are an infinite amount of ways you can start. Below, I will show you the most popular examples and basic techniques how you can use imagery in the header of your website and make an awesome first impression.


It’s really hard to make text stand out when it’s been laid over an image or video. The lack of contrast will cause readibility issues and the last thing a visitor wants is to guess what they are reading. Overlay is a really simple method to lighten or darken your background and get a higher contrast. In Smart Slider 3 simply pick a color and set the opacity for your background. Try to find a perfect color and balance with the overlay over and above don’t hide too much of the image!

Overlay contrast difference
On the left you can see the final result with overlay, on the right, you see (?) the orignal content
Overlay feature in Smart Slider3
Overlay feature in Smart Slider3

Text Background

If you don’t want to hide the background then you can add a background behind the text rather than the entire hero image. Basically you can pick the color of the background for every heading and text element with the style manager in Smart Slider 3.

Ken Burns Slider
Text background example with Ken Burns sample slider
Two other popular variant with text background

Blurred Background

Blurring is one of the best way to capture the essence of an image and improves the legibility of the copy. With the in-built image editor you can add blur and tilt-shift effect to your background.

Blurred background slider
Blurred background slider

Tilt-shift effect
Tilt-shift effect in the in-built image editor


If you have a great photo which has a safe space for the text then you shouldn’t hide the background with an overlay. Try to find the best place for the text which doesn’t impede the visual flow. Don’t cover faces or busy parts of the image!

Layout composition technique
Layout composition technique

Solid Background Color

Sometimes less is more and your website can be better if you eliminate the background image entirely. This design technique allows typefaces to be dramatic and have a strong visual impact. It’s an ideal opportunity to experiment with typography, layout and colors!

Background color example for hero image
Background color example for hero image

Video Background

Using background videos and animations can also add an interesting dimension to a hero image. When executed well, this method can enhance a page’s content. With Smart Slider 3 you can use background videos easily and enhance your hero image and make the user experience better. The quality and length of the video has to be top notch to convey the message because the video definitely slow down your site. Not every website can benefit from this technique but it can be an enormous benefit to an overall design and branding.

WordPress hero image with video background
Hero header with video background

Where to find the best free resources for a WordPress hero image?

Good images are a key part of a great hero image but finding images can be difficult. Here is my collection of the best websites to find free photos and videos:

  • Unsplash – High-resolution photos
  • Pexels – Best free stock photos in one place
  • Picjumbo – Totally free photos stock images
  • Kaboompics – Great place to get breathtaking free pictures for business or personal projects
  • Death to the Stock Photo – Free photos by email every month
  • Coverr – Beautiful, free videos for your homepage
  • Pikwizard – Free stock photos for all your creative needs


There are many ways to design WordPress hero image with Smart Slider 3 and you can vary between lots of techniques and trends as well. Oftentimes, these hero images are the first things that people see on your website so try to help them to understand quickly what the value of your website. Download Smart Slider 3 for FREE, or buy a license for the PRO version. Good luck with your hero image and happy designing!

Daniel David

About Author

Hi I’m Daniel David, one of the co-founders at Nextend and the designer of the Smart Slider 3. I’m all about web design, video games, series and sci-fi/fantasy books. Wanna drop me a line?