Last Updated on August 15, 2019 by Fabrizio Van Marciano
In this post, you will learn everything there is to know about using hero images/banners on your website landing pages.
We'll talk about why hero images are so effective, how to easily create your own hero banners, and how to use them effectively to help you boost your website's conversion rates and more.
In recent years, we've seen many web design trends come and go.
One of my favorite trends that have thankfully stuck around is the use of hero images or hero banners.
If you're not sure what these are, if you take a look at the front page of Magnet4Blogging (screenshot below), you'll see that there is a large gradient background with a picture of me in the foreground with my headline title and a CTA button placed over the top of it.
That whole section placed above the fold is essentially called a 'hero image'. Some people call them 'hero banners', or even a 'hero page section'.
Whatever you want to call them yourself, here's what we're going to be discussing in this post -
So, are you ready? Let's get started.
Hero banners are not just there to make your website look pretty. They can do a lot more than that.
When used effectively, hero images can provide clarity to your website visitors who want to learn more about your website/company, and what's being offered to them, relatively quickly.
Hero banners can work extremely well on most types of content pages, however, they are most effective when used on landing pages such as the front page of your website.
We also know that 'visual content' plays a massive role when it comes to promoting engagement on your website, which is another reason why hero images work so effectively.
Using a 'relevant' and great looking hero image on your website can be a very powerful way to send the right message to your website users.
The Renovator's website, for instance, is a perfect example of how to use powerful, purposeful, emotive, images to convey your message to your target audience.
So, when you use a relevant and descriptive hero image on your business website, for example, it can help your users make that all-important 'visual connection' with your brand.
Let's say you have a personal brand website, or a small startup blog offering app development services. Using a powerful hero image of either yourself working on a product or a photo of your team at work can really help add that human element to your brand.
Combine all of this with the right marketing message, and you can make it very clear to your visitors, once again, what your website/company is about, and what it's offering.
So now you understand the effectiveness of using hero images on your website, how do you create the perfect one?
Well, creating an actual hero image or banner is not that difficult at all.
You also don't need to have a degree in graphic design to create the most striking hero images for your website either.
You can also find high-quality images to use in your hero banners from sites like Pixabay and Pexels, however, I highly recommend, if possible, that you use your own images, especially if it's for a personal brand website or personal blog.
In addition to having the right tools to help you create a great looking hero image, you also need to have a website that's geared up for displaying your hero banners.
In the short video below, I demonstrate how easy it is to create a great looking hero image for your website using PhotoScape. PhotoScape is a simple-to-use, free photo editing tool you can find here.
So, now that you have your amazing looking hero image, how can you use it to help you boost your website's conversion rate?
Or moreover, drive more of your website's visitors to your conversion goal?
Before you can answer those questions you first need to figure out what you actually want your visitors to do when they land on your website.
If your hero banner is going on the homepage, for instance, here are some conversion marketing ideas -
There are, of course, many others, but let's stick to four for now. I'm sure you can think of a few later.
In most cases when it comes to conversion design, hero images are placed either at the center or at the top of landing pages, above the fold, for maximum visibility.
Now let's take a look at four popular websites and online brands that use hero images to help them achieve their conversion goals.
Entrepreneur Chris Ducker uses his hero image banner to do two important things.
Firstly, to help him humanize his personal brand by showing a pretty picture of himself. And secondly, he uses his banner to help him capture email subscribers, simply by placing his opt-in form directly over the image.
He has designed his hero image so that it has enough empty space on the right-side, for text overlay and an opt-in form.
Entrepreneur and smart blogger Pat Flynn uses his homepage hero banner to set visitors off on an inspiring journey.
When you click that green 'Learn More' button on Pat's homepage, you're taken to another page where you'll learn more about Pat's aspirations as an entrepreneur.
You'll also read about Pat's visions, goals, beliefs, and passions of how he wants to give back and help you reach your online business goals too.
CopyBlogger uses a very simple, but powerful homepage hero banner, message, and CTA button to collectively send visitors to its blog.
So as you can see, the humble and powerful hero image has many uses on a landing page, be it a front-page, sales page, lead capture page, etc.
Let me now share with you four common mistakes I see bloggers and entrepreneurs make every time when using hero images on their website.
So let's dive a little deeper into these four mistakes.
It's not always the easiest task to take on when finding and selecting the right image for your hero banner page section.
Image relevancy is also critical because it can really help to accurately describe your website or business to your visitors.
In addition, a relevant image can help to convey a strong message about your brand, like the example I showed you with The Renovator website earlier.
When creating your hero image, just keep in mind that if you're going to overlay light-colored text or content, you'll need to use a darker contrast in your hero image so that the text overlay is visible enough to make out.
And, Vice versa, if you're going to overlay dark colored text or content, then you'll need to use a lighter contrast in your hero image.
The best way to achieve the best result is by using filters, which we'll talk about next.
Filters over images are not essential in all design cases. However, if you don't use them when you need to, your hero images can end up looking lost.
When you want to just showcase a great looking hero image background, without any content overlay, then filters are not needed in my honest opinion.
However, a great way to make sure your foreground text/content is visible is to use filters over your images.
You could also use colored filters, perhaps something fitting with your brand design.
The Earnworthy website homepage is a perfect example of how to use colored filters to overlay your hero images.
OK, so this one is a bit of an amateur mistake to do, especially for your website homepage.
The problem with adding text in your hero images is that when your site is being viewed on mobile devices, for instance, the text becomes severely affected.
Either the hero image shrinks and the text become unreadable, or worst-case scenario, the text disappears slightly from the viewport on each side of the mobile screen.
The best way to combat these problems is to create just a hero image with no text on top. You can then add your text in HTML and overlay it on your hero image using CSS on your website.
If that sounds too technical to do then I recommend using a tool like the Slider Revolution Plugin I mentioned earlier, or the Thrive Architect plugin for WordPress, which will allow you to add a background section where you can add your own hero image with text/content overlay using drag and drop.
So there you have it, all the basic things you need to know to create and use powerful hero images in your website without breaking the bank, and without losing your mind (hopefully).
The thing is, you don't need to spend time and money on graphic design services to create your own professional looking hero images unless of course, you really don't have the time to do it yourself.
I hope you've found this post useful, and I hope the tutorial video above will come to great use, if not now, then perhaps in the future.
The very best of luck 🙂