What is a Hero section?

It is the area that immediately shows up when people visit your website or landing page

Like the front cover of a magazine, it grabs your attention with powerful headlines and eye-catching visuals to draw them to learn more about your brand.

A great hero section not only sets the tone for your brand but more importantly, helps your prospects understand what your business has to offer in a matter of seconds.

But that leaves the question…

What makes a hero section ‘great’? 
In this article, we have put together some perfect examples of great hero sections, why they work and how you can help set the tone you need for your business. 

Let’s begin!

1.Complete Personal Training

What makes this a good hero section?

  • White space. Yes, you heard me. It’s also known as negative space which helps the elements on the section stand out and keep the layout from being cluttered. 
  • The headline size makes the service provided both bold and clear, easily communicating an immediate benefit to the reader. (And don’t forget! When creating your hero copy, keep SEO in mind and think about how you can integrate crucial keywords and phrases in this section without losing sight of your core message.
  • Finally, a call to action button that’s both visible and easy to reach. Having a CTA button that ticks both these boxes helps your prospect navigate your site/landing page by minimising the time and effort needed to interact with key sections on-page.

2.Integrity HR Management

What makes this a good hero section?

  • Excellent choice of colour. Colour can have a huge impact on how you assert authority, build trust and establish connections with your prospects. In this case, blue is being leveraged to help emphasise the brand’s core message with a colour often associated with trustworthiness.
  • Good use of natural imagery. With businesses based on service and trust, consumers want and expect brands to be real. By having a simple image of the client’s team in the background, this brand has helped build that element of trust even further. (You can probably recall a time you’ve landed on a site with stock images and immediately felt a lost sense of connection with that brand.)

3. One Year No Beer

What makes this a good hero section?

  • A clean and organised navigation bar. This makes it easy to access the content, with each icon being a different colour helps categorise your site. Of course, no one wants any content to be missed, but endless dropdowns and links can be overwhelming. Keep it clean. Keep it simple. It’ll go a long way in keeping your prospects engaged. 
  • Sharing the success stories. Using social proof *always* helps to establish trust and authority with your brand. That’s why hearing real testimonials and real transformations from other people has a massive impact on how potential customers perceive your product. (And can make or break the decision if your product is right for them!) This also helps to nurture your viewers and increase brand awareness. 

4. Ojai Energetics

What makes this a good hero section?

  • A discount banner is a great way to display any sale or special offer you want to push in order to drive conversions. Having a timer counting down to when your sale ends is an extremely effective way to create urgency and increase the likelihood of a prospect purchasing to avoid missing out.
  • Having clear and effective benefit points helps to quickly establish HOW the product can solve their problems, WHY it’s the perfect solution for them and WHAT they’re ultimately going to get out of their purchase.
  • The good use of imagery clearly highlights the fact that this product has been made using natural ingredients, without the prospect of having to read a single line of copy.

5. No Barriers

What makes this a good hero section?

  • Here, the imagery is being used to clearly highlight the target demographic of the brand/product. Knowing your audience and understanding how to resonate with them should be the guiding factor when choosing imagery for your hero section. You want to think of this section as an invitation for your prospect, with this being your chance to communicate the relevance of your product to the prospect.
  • Excellent use of font for the headlines. Ultimately, the wrong font can undermine important content and the message you want to deliver so be sure to know your reason for choosing a font.

And that’s it!

5 great examples to help you create a better and more effective hero section! Want to optimise your landing page or site even further? Check out how to fix slow loading speed so no one misses your hero section again!

Candice Gill

Candice is one of the key players within the creative team at SV-Marketing. When she's not crafting awesome images or landing pages for our clients you can find her rocking out to some old school rock! 🤘🤘🤘