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 🙂

  • Save

Join Over 21,000+ Readers

Get fresh content from Magnet4Blogging delivered straight to your inbox, spam free! Or follow us on social media.

6 comments on “How To Create And Use Hero Images On Your Website Properly (Plus Video Tutorial)”

  1. Hello Fabrizio,

    This is great insights over here 🙂

    I never heard of hero images ever before and this new thing look very promising to me.

    Indeed better images do make our web site more attractive and catch for our visitors.

    I am looking forward to try this one out.

    Thanks for the share.


    1. Hi Shantanu,

      You're welcome mate. Glad you enjoyed the tutorial. Hero images are actually quite popular these days, it would be hard not to notice them on websites.

      Let me know how you get on creating your own.

      Regards, Fabrizio.

  2. Hi Fabrizio,

    I love some of the blogs that use hero images. I've tried to use it before and created a landing page for my home page using the Thrive Architect pre-build landing pages.

    However, I can't seem to get the image to look right. I'm going to have to go out and take some new pictures of myself so I can use.

    I really like CopyBlogger's hero image. Maybe I'll have to do something like that and just take myself out of it.

    So many options, I'll just have to try one of them out on my blog.

    Thanks for taking the time to share this, have a great day 🙂


    1. Hi Susan,

      Thanks for stopping by.

      I agree, hero images can make your website look a lot more professional, and I think it's a great way to tell your visitors what your website is about.

      Using an image of yourself in a hero banner is great for personal brand websites, and can help humanize your brand.

      CopyBlogger uses a very simple banner image, but it's effective as it shows a lady reading the CopyBlogger website on her iPad.

      I love Thrive Architect plugin too, though I'm still getting used to it after using Thrive Content Builder for so long.

      All the best Susan, thanks again for checking out this post.

  3. Hey Fabrizio, thanks for the shout-out in this post! You have some great info here. The right hero image can make or break a page. And interesting to learn about PhotoScape. I was not familiar with it before.

    1. Hi Nicholas,

      You're most welcome mate. You said it, make or break, I see lots of websites using hero images incorrectly so hopefully some of the tips below will help a few folks out.

      You'll love PhotoScape, it's so easy and quick to use, being free as well, you can't get better than that.

      All the best mate, keep up the awesome work you do over at Earnworthy, I really admire your site design there 🙂


linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Share via
Copy link