How To Write a Landing Page Hero Section That Makes an Unforgettable First Impression
Your website hero section is the part your visitor sees before scrolling down the page. It catches your visitor's attention, keeps him on the page, and creates enough curiosity to prompt further exploration.
First impressions are made and expectations are matched.
Your reader lands on your page after clicking a call to action button or a link. Based on that, she has expectations your hero section must meet. You want to avoid the “it's not what I was looking for”, “it's not for me”, or "that's not what the ad said".
Your hero's first job is to match your visitor's expectations in two ways:
- Message matching. Your copy and images should match your reader's expectations based on whatever she has clicked before.
- Awareness matching. This section should match your visitor's stage of awareness. Remember Eugene’s five stages of awareness: most aware, product aware, solution aware, problem aware, and unaware.
That's the theory. In practice, matching expectations is easier when it involves dedicated landing pages created for a marketing campaign. But it gets complicated when talking about your home page. Here, you don't have the same control over the traffic. It's diverse and comes from different sources. Trying to match messages and awareness states can be tricky. In this case, choose a message that resonates with your target audience and the hero section that better fits your business.
Let's see 5 common types of hero sections that have been used for years.
5 Hero Sections Types to Choose From
According to Joanna Wiebe from CopyHackers, an authority in conversion copywriting, the following are the hero sections most likely to be used year after year. Forget what's trendy and choose what works.
- Value Proposition hero
- Problem-based hero
- Dream state-based hero
- Segment-specific hero
- Campaign-level hero
Before going over each one, let’s see the elements a hero section could include.
Hero Section Elements
- A headline
- A subheadline
- An image or video
- Teaser copy or short description
- A call to action (CTA)
- “Eyebrow copy” (a line of copy preceding the headline)
Do you have to include all these elements? Not really. Those are the ones a hero section usually has. It doesn’t mean you need all of them. Sometimes you need a short description. Other times you don’t. Don’t force yourself to include all this just because they are supposed to be there. Sometimes a good headline might be enough.
Hero Section Tips
When creating your hero section, keep these tips in mind:
- Make sure your headline and subheadline are prominent.
- Use video only when your product requires a demo and your visitors are ready to watch it at the top of the page.
- If you use an image, choose one that resonates with your audience and supports your headline and subheadline.
- Ensure your call to action button looks like a button. Preferably, one call to action. If you need to include two, use primary and secondary CTAs and visually differentiate them.
Let's dive into the five most common hero section types.
1) The Value Proposition Hero
The value proposition hero is commonly used in SaaS and feature pages.
The main element is your value proposition. It should answer the question: “Why should I (your ideal prospect) buy from you rather than any other competitor?”
In this hero section, your headline is the value proposition, a clear statement that explains what makes your product unique and highly desirable to your prospect.
If it needs clarification, use the subheadline or a couple of sentences to add clarity and a relevant image that supports your value proposition.
You can also include a couple of bullet points with key benefits or features.
To write an effective value proposition make sure:
- It communicates a specific benefit.
- It explains how the product is different or better than the competitor’s offer.
- It uses the language of the customer, not business jargon.
- It avoids hype and superlatives.
- It's easy to understand.
- It offers something unique that your target audience highly desires.
To know if it's something your target audience desires, use your VoC data (message mining, surveys, interviews)
2) Problem-Based Hero
The problem-based hero section leads with the problem. It shows your prospect at the point he is right now, struggling. It's a before scenario that follows the conversation going on in your prospect’s mind “I have to overcome this problem,” “I have to deal with this challenge.”
Most companies are reluctant to use it because they don’t want to sound negative. It can be a great opportunity if your competitors don't use this approach.
Show the reader you understand the problem without sounding negative. One trick to do it is writing the headline in the first person and in quotation marks. When your prospect lands on your page, she will see her pain reflected on it and know that your product is what she needs. Use your subheadline to build on the problem.
If it's possible to connect the problem to your solution above the fold, add a call to action in the hero. If not, put your call to action further down the page.
3) Dream state hero
The dream state hero section is benefit-focused or outcome-focused. It's the after scenario showing your prospects how much better life can be after using your solution.
When writing your hero section, frame it as “Wouldn’t it be great if?” or “Won’t it be great when?”
The headline should reflect, in a positive way, the benefit or outcome your reader wishes for. It is usually a statement of the ideal dream state. As always, your subheading should build on that.
Use a hero shot that portrays the desired outcome of using your product or service. It can be a successful customer or a desirable future state.
4) Segment-Specific Hero
Segment-specific heroes speak directly to people in certain roles or industries. Use it if your data shows there's a great chance to close this group.
In that case, use the features that matter most to this particular group in your body copy and custom-tailor your messaging.
You can use the eyebrow copy for message matching to let people know they are on the right page.
5) Campaign-Level Hero
The campaign-level hero is commonly used in e-commerce sites. It’s a promotion-focused hero section that acts more like a traditional ad. The offer is the star and copy is very light.
The goal is to grab the visitor’s attention by focusing it on a product or offer. The call to action focuses on getting the visitor to start shopping.
Which Hero Section Type Should You Choose?
Select your hero section based on what you know about your customer. Be data-driven. What does your prospect need to see from you?
If you have an e-commerce, the campaign-level hero will work for you. You can use it the same way you will use an ad. Promote specific products or offers (seasonal offers or sales discounts).
The segment-specific hero will work for you if your data shows a particular segment you can serve best by custom-tailoring your messaging to them.
For example, if you provide a personal fitness coaching service, you could have segment-specific heroes for different outcomes - one to gain muscle, one to lose weight, and so on.
Problem-based or dream state hero? Well, what does your data tell you? If your customers choose you because your product solves a specific problem, use the problem-based hero. If your customers choose your solution because of the outcome, then go for the dream state. Show them how much better their lives can be after using your product.
When in doubt, go for the value proposition hero section by answering the question: “Why should I (your ideal prospect) buy from you rather than any other competitor?” Explains how your product or service is different or better than the competitor’s offering.