Your hero section is the first thing your prospect sees on your website home page. It sits under the navigation bar and plays a vital role in the experience of your website and, in most cases, the momentum of your sales process. In this article, you’ll learn the proven, persuasive hero types and exactly when to use them.
Why your hero section is the most important part of your home page
The hero section gets its name from how your readers should feel/see themselves when they read your copy: a hero. At its core lies the question that ALWAYS needs answering when trying to persuade someone to do something: “What’s in it for me?” And to make this more challenging, you only have a few seconds to communicate it.
So, your hero section is the critical bit of content that sets the tone of your home page (and in ways, your whole website) and dictates the first impression. It’s here where your prospects decide whether to keep reading – creating the opportunity for you to persuade them – or bounce before you get a grip. It’s also a chance for you to filter out bad prospects from the ones who become the best customers.
Let’s explore how you can get it right and improve the success of your home page.
Types of heroes for website home page
First, the types of heroes you can use with your website. There are seven that I can think of:
- The Value Hero
- The Problem Hero
- The Dreamer Hero
- The Campaign Hero
- The Credibility Hero
- The Interactive Hero
- The Contrarian Hero
The Value Hero
This hero directly communicates your most important value proposition (i.e. how you help your visitor). The subhead provides context, reinforcing the headline and potentially adding clarity. And the visual can reinforce this further or show the value you provide.
Some examples include:
Headline: Get your taxes done in 5 minutes
Subheadline: Automated tax filing for the busy solopreneur.
Headline: Find the cheapest flights for your next holiday
Subheadline: Instantly compare prices from hundreds of airlines and save money on your next trip.
The Problem Hero
Lots of websites fear leading with a problem. But they forget that connecting over a problem is a great way to reassure the reader they’re in the right place. It creates an opportunity positive heroes cannot.
This hero works by (immediately) connecting to the problem at the forefront of your target visitor’s mind. The subhead can show empathy or agitate the pain further, but it must always hint at a solution to the problem. The visual should create instant resonance and depict the visitor’s frustration or problem visually.
Some more examples? Sure:
Headline: Stop wasting time chasing invoices
Subheadline: [Invoicing tool] automatically sends and chases invoices, so you don’t have to.
Headline: Tired of cooking the same meals every week?
Subheadline: Forget dinnertime boredom and get delicious, chef-created recipes delivered straight to your door.
The Dreamer Hero
On the flip side, you’ve got the dream state hero. This sells your visitor’s ideal outcome and should paint a vivid image of their deepest desire. The subhead explains how your product or service achieves this. And the visual either captures the emotions associated with the ideal outcome or your product or service.
Headline: Wake up energised. Every. Single. Morning.
Subheadline: 94% of customers report better sleep from the very first night with [Sleep supplement].
Headline: You can be debt-free and financially confident
Subheadline: Get personalised financial coaching to clear your debt and build lasting financial freedom.
The Campaign Hero
If you’re running a big promotion or campaign, and you’ll have lots of relevant traffic to your site, then a campaign hero carries on the conversation. The subhead reinforces urgency by providing essential offer details – or, in non-promotional cases, clarifies what to do next and why. The visual can present the limited-time offer or lean into the emotional purpose behind the campaign.
Headline: 5 hours only! Get 24% off award-winning website copywriting.
Subheadline: Turn your website into a sales machine. Offer ends soon.
Headline: Join the movement: Go plastic-free for 30 days
Subheadline: Sign up today and get daily tips to reduce your plastic waste and protect our oceans.
The Credibility Hero
This hero establishes immediate authority and reassures visitors through one or multiple means of proof. You don’t have to, but it can be wise to (sometimes) combine this with the value prop hero. The subhead provides further proof points (client stats, awards, or reviews) to strengthen credibility, and the visual reinforces this further with authority via logos, ratings, testimonials, awards or even important figures (e.g. celebs)
Headline: The UK’s most trusted sleep supplement
Subheadline: 94% of customers report better sleep after one night of [Sleep supplement]
Headline: “The best investment I’ve made all year!”
Subheadline: Join 25,000+ happy customers who’ve transformed their productivity with our proven planning system.
The Interactive Hero
This hero coincides with the previous one. If your website focuses on lead generation, or you’re running a similar campaign, you might lead with a home page hero that invites the reader to participate. The subheadline clarifies the value, outcome, benefit or means of interacting. The visual can depict how to interact or reinforce the outcome.
Headline: Find your perfect mattress in 6 questions
Subheadline: Take our two-minute sleep quiz to see what type of mattress best suits you.
Headline: How much could solar save you?
Subheadline: Enter your postcode to see how much you could save in your area.
The Contrarian Hero
This hero challenges visitors’ assumptions to provoke curiosity and deeper engagement. The subheadline clarifies your provocative statement, opening the door to your perspective. And the visual can emphasise the contrast, curiosity or contradiction you’re building.
Side note: It’s wise to follow advertising guidelines and keep the visual simple (because your copy is doing the heavy lifting – if not, they end up competing and blur the message).
Headline: Forget SEO. Traffic isn’t your problem.
Subheadline: You might think you need more website traffic. But in reality, it just exposes your holes faster. Do this instead:
Headline: Working harder does NOT make you more productive
Subheadline: This productivity system helps you and your team achieve more by doing less. And right now, it’s free to use.
How to pick the right hero for your website home page
Conversion copywriting is both an art and a science. Picking the right hero, however, is purely a science because it relies on what your market is saying, thinking and feeling. The only exception would be a Campaign Hero because you’re likely already running an offer.
This selection process requires you to see reality for what it is. And accept it. False visions or wishful intentions will not connect. Because for your hero to work (and website to sell), you must meet your readers where they are to guide them down the path to your solution.
Let’s look at some questions to help guide you.
What do your website visitors truly care about?
Analyse your research, in particular, your voice-of-customer (VOC) research (e.g. reviews, customer surveys, customer support transcripts) and look for repeated phrases or pain points.
Are they talking about problems (that bring them to you)? Then, a problem-based hero.
Are they describing their goals and what they want to achieve? A dreamer hero.
Similarly, do you know that your market (and thus your visitors) are particularly sceptical? Maybe a Credibility Hero would be best.
Or are they visiting lots of websites and battling lots of similar choices? Maybe a Contrarian Hero would hook them and separate you from others.
Of course, this won’t always be obvious. So, sometimes, you might have to read between the lines to see where they are.
Where are your visitors in the buying journey?
Depending on your sales funnel, your prospects might only visit your website when they come to purchase. They might see an ad, then your landing page and then emails, calls or whatever else you’ve got in your funnel. Conversely, they might visit your website as their first interaction.
Every website is different and serves different purposes. So, you need to supply the information they need to keep them moving towards the “Complete order” button. You need to use your own knowledge and website analytics to match your hero to their position. Again, meeting them where they are.
For example, if they’re new to you and your market, they might not understand the problem they’re facing. So, leading with it can be hard. Instead, you need to lead with something they recognise. This could be a repeat thought or feeling that a Contrarian Hero captures well.
Alternatively, they might know exactly what they want to achieve but not know how. Here, lead and connect with the dream then swiftly move into how.
If they’re later into the journey and considering multiple options, then credibility heroes can be great to “out-trust” your competitors, making you the more believable and less risky option. You might even be able to “out-claim” then with a Value Hero.
Finally, if your visitors come late into their journey, then a Campaign or Interactive hero might work best, guiding visitors to action immediately. At this point, they don’t need education – they just want your product now. So, don’t get in their way. Let them.
Test and measure
The harsh reality is that, even if you strictly follow the data, you won’t know whether it works until you test it. Data increases the probability and helps support your decision-making, but we humans are complex beings, and sometimes what should work doesn’t. The opposite is true too. And it’s the nature of the marketing beast. So until you test it to see, you won’t know what hero works best.
Use your website analytics and heatmaps to see how your hero performs. Check bounce rates, time on page, button clicks and, of course, conversions.
If your hero doesn’t work, don’t default to huge changes, especially if the data suggests this is the best hero type. Small changes can lead to big results. Take it from these examples.
Only once you’ve explored within your hero type should you explore others.
Err… What about call-to-action buttons?
I know. We haven’t discussed them yet. So here’s what you need to know: not every hero should have a call to action button. They can actually cause more harm than good.
So, you should only use a CTA in your hero section when the value is immediately clear and the visitor is likely ready to take action. For example, if they’re in the “product aware” stage of awareness.
This means your product might already be familiar, your traffic is high-intent, or the headline/subheadline communicates sufficient information to take action.
If your visitors are problem-aware, asking them to buy something before they’ve been educated on your product won’t help them – or you. They need to be sold to first, which the rest of your home page and website can do. Any clicks they give are misleading, damaging your decision-making. (It also misses out on the benefits of The Expectancy Theory bias, which can drastically influence long-term conversions.)
You’re your website’s new hero
Your home page hero isn’t just a decorative spot. It has a purpose. A big purpose. In fact, the most important purpose of your home page. The right hero type (and content) quickly affirms whether your visitor is in the right spot – or not.
Since you’re now an expert in website home page hero types, take a look at your website and see whether your hero matches your visitor’s position. Is your messaging clear and compelling enough? Is your hero aligned with your visitor’s true motivations? Could switching to a different type potentially boost engagement?
If you need help or have a question, message me here. Or, if you’d like to explore my website copywriting services, you can do that here. You get all of this article, and the rest of your website done for you.
