How To Create And Use Hero Images On Your Website Properly (Plus Video Tutorial)

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'.

new front page
  • Save

Whatever you want to call them yourself, here's what we're going to be discussing in this post -

  1. Why are hero images so effective?
  2. How can you easily create your own hero images, cost-free?
  3. How can you use hero images to help boost your website's conversion rates?
  4. Mistakes to avoid when creating, or using, hero banners on your landing pages and content.

So, are you ready? Let's get started.

Why are hero images so effective?

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.

  • Save

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.

How can you easily create your own hero image?

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.

All you need is some free photo or graphics editing tool, I recommend something like PhotoScape to get you started.

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.

If your site is built on WordPress and is self-hosted, I highly recommend trying out something like the Slider Revolution plugin, or better still, the Thrive Architect visual-page editor plugin.

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.

How to use hero banners to boost your website's conversion rates?

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 -

  • To capture email leads.
  • To promote a special offer (eCommerce).
  • To tell your company or brand story.
  • To direct visitors to your blog content

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.

To capture leads... (Chris Ducker)

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.

chris ducker
  • Save

To promote a special offer (My Protein)

The most popular sports nutrition website MyProtein uses their hero banner as a content slider, frequently offering special offers and discounts to its customers.

my protein
  • Save

To tell your brand's story (Smart Passive Income)

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.

smart passive
  • Save

To direct visitors to your content (CopyBlogger)

CopyBlogger uses a very simple, but powerful homepage hero banner, message, and CTA button to collectively send visitors to its blog.

  • Save

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.

Mistakes to avoid when creating or using hero image banners in your website pages

Let me now share with you four common mistakes I see bloggers and entrepreneurs make every time when using hero images on their website.

  1. Using poor quality, irrelevant, and non-descriptive images.
  2. Poor contrast between the text color and background hero image.
  3. Not making use of filters at all.
  4. The text is placed in images and not in HTML form.

So let's dive a little deeper into these four mistakes.

1. Using poor quality, irrelevant, and none descriptive images

It's not always the easiest task to take on when finding and selecting the right image for your hero banner page section.

However, it almost always has to be high-quality, even though you'll probably end up using some image file shrinking tool, like TinyPNG, to reduce the file size of the image for faster page load.

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.

2. Poor contrast between the text color and background hero image

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.

3. Not using filters at all?

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.

  • Save

4. The text used in images and not in HTML

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.

  • Save

Wrapping up

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 🙂

Join Over 24,500+ Subscribers

Get fresh content from Magnet4Blogging delivered straight to your inbox, spam free! Or follow us on social media.
pencilcamera-videomic linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Share via
Copy link
Powered by Social Snap