The Hero Section: How To Make Yours Kick Ass
Stoic soldier hero
Share on facebook
Share on twitter
Share on pinterest
Hero Sections: good, great & kick ass.

 

First, let’s define a hero section

A hero section is usually  made up of a large image in the top half of the computer screen, with some words (usually the business name) and a button (usually the Call To Action – or ‘CTA’). The hero section is prime website real estate, because nine times out of ten, it is the first thing your visitor will see. It is literally the first impression. Whether or not your visitor chooses to stay, depends on how well you have put the key features together. More on that in a second…

 

So what makes a hero section KICK-ASS?

Back in 2006 your website’s primary job was to LOOK COOL. But these days, that just isn’t going to cut the mustard. In 2021 your website has a new No. 1 priority: to take a visitor and turn them into a client. This process is known as conversion. A hero section that looks pretty is good. a hero section that converts (or contributes to the process of conversion) is great. But a hero section that looks pretty and converts visitors? That’s a KICK ASS hero section.

As you read through the key ingredients to a kick ass hero section, I want you to remember 99% of your website visitors are searching for the answer to three simple questions:

 

  • Where am I?
  • What’s in it for me?
  • What should I do here?

That’s right! You need to assume majority of your website visitors are stumbling home at 2 am looking for a kebab after they lost their phone. Got it?

 

Your hero image

The first key element to the kick ass hero section design is a big beautiful image the conveys to your visitor what your business does (or what benefits your business offers its clients). Imagine you had to tell a potential client what you do – without using any words. If you had to choose just ONE image to get that key message across – which one would you select? And ask yourself – is it PAINFULLY OBVIOUS from this image what your business does? If the answer is no – find a new one. Remember, the human brain is lazy, and there should be little to no guess work for your potential client.

I use Canva Pro {that’s an affiliate link BTW} to create my website header images – as it takes the guess work out of the pixel sizes and such. Just go to “Create Design> Website” then find a stock image (or add your own) as a background, and viola. Be sure to save as a .png (not publish the website!)

 

Your website name

The second element in the kick ass hero section design is a big, bold, clear, easy-to-read heading. Usually – your business name. I only recommend you stray from your business name if it is not PAINFULLY OBVIOUS what your business does, just from your business name. E.G. Yes Deer doesn’t tell anyone anything about what my business does, or what benefits my clients enjoy when they choose to work with me. Yes Deer Web Design takes the guess work out – whilst remaining brief, and to the point. Use large font (60 px +), and basic typography (Open Sans, Montserrat and Veranda are a few of my personal favourites).

If you find the text is hard to read on top of your big beautiful image – I suggest you use a black background overlay.

 

Why should I care?

So your visitor knows what you do… but why should they care? The third element we employ in our kick ass hero section design is the benefit pitch. A good benefit pitch should include your niche or target market – and the MAIN benefit you offer them. OR the biggest problem you solve for them. This is your opportunity to create desire for your services.

 

Call To Action (#CTA)

People see what you do. They know what you can offer. And now they’re keen beans to reap the benefits (or avoid the problem you solve): the final element to our kick ass hero section design is telling your visitor how to take the next step. Book now, call, contact us or buy are your typical Call To Actions – but there are others depending on your niche. Make sure you know what action you want your visitor to take – and then (you guessed it) make it PAINFULLY OBVIOUS how to take that action. I usually do this in the form of a button that contrasts colour to the rest of the hero section, and in fact I usually offset the colour against the rest of the website.

 

Would you like to get in on the Kick Ass Hero mini challenge?

The free mini course is kicking off soon. Register your interest here.

More
articles

Scroll to Top