Black Friday Super Sale! 🔥 Enjoy a jaw-dropping discount of up to 50% OFF on all Smart Slider plans. Hurry, before the offer ends on November 29th!

Buy Now
Design

All About WordPress Hero Images From Idea To Implementation

Bernadett Toth
Bernadett Toth
October 9, 2020

One of the most important trends nowadays in web design is the WordPress hero image design. These special headers are often referred to as hero image, hero slider, banner, video header or carousel. Making a good first impression is incredibly important. You only get one shot with the first impression and you have only a few seconds to grab your visitors’ attention.

In this article, I will introduce you to some of the best practices, hero image examples and provide incredible resources to help you create an 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 you can use a hero image for?

When you browse on the web you can encounter a lot of hero images with different goals. I collected some cases when you can use a hero image. Let’s see them.

  • Highlight your product. The best way to highlight a product is a good hero image on your page. The visitors see this image first and can read small information about your product. Put a link on your Buy now page, and your visitors can instantly buy.
  • Share information. You can use a hero image to share information about your product or services in another way. You can add text on the image, also you can add a video which gives information to the visitors.
  • Feature the latest news. Do you want to feature your latest or an important post for the visitors? Put the title and a small description on the image, a button with the link of the post, and I’m sure, if it’s interesting, the visitor will click on it to read more.
  • Design element. A hero image can be a great design element of your page, it is in the focus, cheers up your page, and usually gets interaction with the visitors.
  • Create an emotion. Emotion can be a big factor. Evoking the right emotion can instantly build trust with your visitors.

How to choose a WordPress hero image?

When you choose a hero image, it’s important to keep in mind that your hero image not only needs to look good, its style needs to suit your whole website. If you use emotional hero images, think about the mood of your page. The images can be full page but smaller images also can be featured below the navigation bar. These large banner images are a trend in web design and precede an overview from your business, so you should choose a suitable image for your page.

Where to find the best free resources for a 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

What should a good hero image contain?

A WordPress hero image presents an overview of your service or product. It can be a simple image, but it is more successful if you use the content on it, like a CTA. Let’s see the 4 important parts of what a hero image should contain.

Call to Action

CTA button 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 to increase sales or generate 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.

Good copy

The first headline your visitor sees is the most important copy you’ll write on your website. Writing a good web copy isn’t easy and it requires skills 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.

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.

Iceland hero block

Live Preview

Impact

It’s all about creating that WOW moment. The best hero images achieve a balance between capturing the 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 visitors’ 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.

How to create a WordPress hero image easily?

Now may you want to put a hero image on your page, but you don’t know how to do it. The best if you search a plugin in which you can create a hero section for your site easily. With a plugin in the ideal case, you can put a text or a button on the image, and you can publish it where you want. Smart Slider is a great plugin to create hero images.

What is Smart Slider 3?

Smart Slider 3 is a free slider plugin with which you can easily create sliders, hero images and blocks without coding knowledge. With the drag and drop editor, you can build the block you want, and use layers like heading or button. It is fully responsive, and when you are ready, you can publish it with a simple shortcode, with Gutenberg or with a page builder, too.

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.

Create a hero block

The block type is a special slider type of Smart Slider. The block displays only a single slide, which is a perfect choice to create a hero image. Creating a hero block with Smart Slider is very simple. Just click on the green new project button, and create a new project or start with a ready to use template.

Create a project with Smart Slider 3
Create a project with Smart Slider 3

Then you can edit your block in a visual editor. In the free version of Smart Slider, you can choose from 7 layers, in the Pro version there are 24 types of layers. You can put a layer where you want, change its color, size or put a link on it. Also, you have the option to animate your layers, which can call the visitors’ attention.

Slide editor in Smart Slider
Slide editor in Smart Slider

Why choose Smart Slider to create hero images?

  • Drag and drop visual editor. With Smart Slider, you can edit your WordPress hero images as you imagined. The drag and drop editor helps you to create a hero block in minutes. With the responsive settings, you can make it look good on any device.
  • Animations & Effects. In the Pro version of Smart Slider 3, you can use animations and effects to cheer up your hero image and call the visitors’ attention. Use the Ken Burns effect if you want to add a movement to your hero, or use layer animations to highlight content.
  • Dynamic sources. Dynamically changing content on your hero block? It’s possible with Smart Slider 3, just create a dynamic slider, and use variables.
  • Easy to publish. You can easily put a hero on your homepage, just use your page builder, the Smart Slider Gutenberg block, or the slider’s shortcode. As an alternative, you can use the PHP code of the slider and put it on your child theme.
  • SEO friendly. SEO is crucial to make people find your website. In Smart Slider, you can fill the alt tags, and you can add text which the search engines can read.
The new way to build a Slider
Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.
Get Started
Smart Slider 3 - The new way to build a Slider

What should you care about when you create a hero image?

  • Focus on the content. The power of a large hero image is in the content. Focus on the most important part of your text, catch the visitors’ attention with an interesting heading and description, and use a Call to Action button. Don’t use too much text, keep the harmony between the image and the content.
  • Use the correct image size. The speed of your page really matters. Don’t work with too big images, because it can slow down the loading time.
  • Make the text readable. If you have text on your hero, take care of the legibility of your text. Use one of the popular hero image techniques such as text background or blurred image.
  • Take care of SEO. Never burn text in your hero image. Use a plugin like Smart Slider which works well with the searching engines, and fill the image alt tags.
  • Check it on different devices. Always pay attention to make your hero responsive. The image and the text should be legible on each device.

Popular WordPress hero image techniques

Perhaps the biggest challenge for a non-design user is creating a 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 on how you can use the imagery in the header of your website and make an awesome first impression.

Overlay

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 readability issues and the last thing a visitor wants is to guess what they are reading. The 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 hero technique
The final result without overlay on the left, and with an overlay on the right.

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 in the layer window in Smart Slider 3.

Text background example

Live Preview

Blurred Background

Blurring is one of the best ways to capture the essence of an image and improve the legibility of the copy. You can add a blur effect to your background at the Style tab of the slide.

Blurred background slider

Live Preview

Composition

If you have a great photo that 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

Live Preview

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

Live Preview

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 have to be top-notch to convey the message because the video definitely slows down your site. Not every website can benefit from this technique but it can be an enormous benefit to the overall design and branding.

Hero header with video background

Live Preview

5 hero image examples

Do you want to get inspired? I’ve collected 5 beautiful examples of hero images, each hero block is special, and the best thing is that you can import all of them from the Smart Slider’s template library, and customize it as you like.

1. Security Block

Security block

Live Preview

The Security Block is a great example of a hero image that you can use on your service page. This block has 2 versions: a free and a pro that you can use in Smart Slider. All the content is customizable, you can freely change the heading, the text, the links, colors or the images.

2. Traveler Hero

Traveler WordPress Hero image

Live Preview

Want a full-width hero image? The Traveler hero was planned to a traveler blog or page, where the featured image could be the destination that your page is about. The CTA-s like the Explore Now or the social buttons can help you to inform your visitors, and build a social community.

3. Podcast WordPress Hero Image

Podcast Block

Live Preview

Do you want a focus on the content of your hero? In the Podcast Block, you can organize your podcast. There are trending colors and a well-structured design which you can fill with your own blog content.

4. Crypto Hero Block

Crypto Hero Block

Live Preview

The Crypto Hero block is a special hero with their animations and effects. The animated heading layer with the typewriter effect and the particles in the background make your page come alive. The focus is on the animated text, but the CTA stands out with its blue color.

5. Headphone product hero image

Headphone product hero image

Live Preview

Do you have a product page? Display your product images in a hero block in an interactive way. The main picture is a big headphone, and under that, you can see small images, and if you click on them, you can check other images from your product in a lightbox.

Conclusion

There are many ways to design WordPress hero images with Smart Slider 3 and you can choose from 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 quickly understand 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.

Bernadett Toth

About Author

I’m Bernadett Toth and I’m a member of Nextend‘s support team. I have two dogs, in my free time I teaching them. Besides that I often ride a bike, watching movies or reading.