Five seconds.
That’s what you have to capture and engage a visitor that lands on your website. If you don’t quickly engage them and get them interested in the value you have to offer, they bounce.
The first section of your website they see, when they land on your homepage, is your hero section – also known as “above the fold”. This, I argue, is the most important part of your website.
Did you know that 60% of the visitors to a typical website won’t ever make it past this part. But why?
Many times, it’s because the hero doesn’t quickly convey what value the service, product, or content provides them.
In this article, I’m going to break down the 5 key components you need in your hero. I break down those five components, then provide you with a few examples of great hero sections so you can see how it all comes together.
The Breakdown
Let’s start with what the five components are then I’ll dive deeper into each one.
- The Headline
- The sub headline
- Social proof
- Visual element
- A compelling call-to-action button
The Headline
Your headline needs to tell your visitors what exactly you do / what value you provide. The headline should be no more than 12 words; we’re not writing a paragraph here – the point is to quickly show visitors your value. Short, sweet, and to the point.
Your headline should be an H1 and be the biggest text in the hero. It’s good to make it big and bold, and make it stand out from the background color or image.
Here’s a pro-tip: one way to get your headline read is to make one or two of the keywords in your headline a different color (more on this later).
The Sub-Headline
If the headline tells visitors what value you provide, your subheadline should tell them HOW you do it. Try to keep your subheadline less than 15 words.
You’ll have plenty of time to dive deeper into the how further down the page – remember, we’re trying to capture their attention, engage them, and get them interested in you and your company/brand.
Here’s a pro-tip: keep the headline and sub-headline close together. Related elements should occupy the same general area on your site.
Social Proof
The importance of social proof can’t be overestimated – it’s a powerful tool used to show that other visitors have come here too, and had a great experience with your product or service.
When I say social proof, many times people think I mean putting a testimonial in the hero. Although you can do that, there are better options.
You could highlight:
- The # of happy customers
- The # of five-star Google reviews
- Logos of recognizable companies you’re associated with, or that use your product/service
This component just gives extra support to your headline and sub-headline – don’t forget to include it.
Visual Element
We are visual creatures – images catch our eye faster than words. There are three main types of visual elements you could include in your hero:
- An image
- A GIF (animated image)
- A video
If you go with an image, you can have it stand alone, or have it take up the entire hero section as a background image.
GIFs are great if you want to show how something works but don’t want to include a short video. Software As A Service (SAAS) companies use GIFs to show a key feature of their product, and it’s quite effective.
I love video – I think, right now, video is where it’s at. If you decide to place a video in your hero, keep it short (less than a minute – better yet, less than 30 seconds).
No matter which type of visual element you choose, it must reinforce the claims you made in your headline and sub-headline.
Call-to-Action Button
Finally, we have the CTA button. Before you just throw a button in the hero and call it a day, we need to be clear about something.
Think about what, specifically, you want visitors to your website to do. What action do you want them to take? Is it:
- Booking a free consultation call
- Signing up
- Joining your community
- Taking a course
- Grabbing a copy of your lead magnet
You first must determine the main action, then build a button around that. Now, what also works well is two buttons in the hero: one is the main CTA, and the other is a secondary action if they’re not ready to commit to your main CTA.
Typically, if you have two buttons, one should be bold and clearly stand out. You do that with color, boldness of the text, etc.
The secondary CTA button should be muted, or just an outline of a button. Let’s take a look at some examples of well-designed Hero sections so you can see how these components work in the real world.
Litmus
Litmus did a great job with their hero. Their headline is short, crisp, and tells you exactly what they do: Litmus makes your email better.
Only five words, but that’s enough to read the subheadline to find out HOW. They broke “the rule” with their subheadline – it’s longer than 15 words, but it is broken into two sentences and does a good job of explaining the how.
They used a combination of two types of social proof: “Trusted by 250,000+ happy customers worldwide” and logos of large, recognizable companies that use their service.
The visual element is clean and easily identifiable, although I wonder if using a GIF that actually showed us their software in action would have been better. Either way, I think what they have works well.
And finally, their CTA button: Sign up free. A great CTA because there’s no risk – it’s free. Looking at their navigation bar, they do have a link to pricing, so I’m assuming you’re signing up for a freemium service – free with limited features but to get the whole suite of services, you need to pay.
I’m sure their CTA gets a lot of free signups, which allows Litmus to market to them through email to sell them on their premium service.
Case.one
Another great hero section – Case.one hit it out of the park. Clear value shown in their headline that’s easy to understand, with the sub-headline telling us how they provide that value.
Social proof at the bottom of the hero – although these aren’t testimonials or the number of happy customers, they have partnerships with some large and recognizable companies, which adds value to their brand.
I like their visual element – it provides a sneak peak into their software, and let’s us know (without telling us) they you can have access to their software on a laptop, mobile, or even the iWatch.
And finally their CTA – here’s an example of two. From what you already know, which one is their main CTA?
Yep, the “Request a demo” button. Do you see how it stands out from the rest of the hero – it calls attention to itself. I also like that they have a button you can press to watch a short video – maybe it’s a demonstration of how their software works.
HustleCase
Are you noticing a pattern yet? All these companies (and many more) seem to have the same five elements in their hero.
You want to know why? Because they work well at converting visitors into customers.
One thing I wanted to point out with HustleCase – they have their main CTA button (Shop Now), but they have a second “button”, which is really just a link.
What does it say? Watch Demo (14 secs).
Pro-tip: when you’re asking a visitor to do something, let them know that what you’re asking of them isn’t a big commitment. Nothing’s worse than clicking a video demo and it’s 25 minutes long.
This company understands that and lets visitors know – don’t worry, this will take less than 15 seconds. You can spare that, right?
Another way to use this technique is when you’re trying to get visitors to sign-up for a freemium service. You can place smaller text underneath the CTA button that says: No credit card required. It makes a conversion that much easier to justify. No real risk involved.
Conclusion
If you’re struggling to initially engage visitors who land on your website, take a look at your hero section and see if it contains these five elements. If not, it may be time to think about a redesign.
Take your time when planning your hero, especially your headline and sub-headline. Get clear in your mind what value you provide and HOW you provide it, then build your hero from there.
And if you are struggling to engage visitors and get them to convert, reach out. I’d love to help you improve the design to get more leads, sales, and customers.
