Write a killer hero section—the 'Write Your Own Homepage' series
Your site visitors form their opinion of your brand within seconds. Here's everything you need to know about how to make a good first impression. And all above the fold.
Your hero section has an important job to do. Might I say a “heroic” one? 🤦♀️
What visitors find when they first land on your homepage will determine whether they’ll stay on your page, or bounce.
And get this.
They’ll typically make that call in 8 seconds or less.
How do you win them over in 8 seconds?
With a hero section that’s sharp, compelling, and clear.
Let’s take a look at the components that make up your hero section:
Of course, not every hero section uses all of these components. Once you know their purpose, you’ll play around and find the concoction that works best for YOUR needs.
You already nailed that one in the last post, remember? Moving on.
Here’s where you say everything you couldn’t fit in your headline.
Your subheadline should add clarity about one or more of the following:
What you do
Whom you do it for
What problem you solve/why your audience should care
What makes you better than your competitors
Here's a great example from Loom.
Notice how the headline grabs attention. (And uses alliteration—melt!)
Sentence 1 of the subheadline answers "what do you do?" and sentence 2 answers "why should I care?"
Note that the audience is implied and doesn't need to be spelled out, because only people typing lots of emails or conducting live meetings will find this relevant.
(And, just in case I didn't pick that up, I can see the image of the woman and infer the professional audience from there.)
3. Bullet points
If you've already got a headline and subheadline but still need to add clarity, bullet points are the way to go.
They're a great way to say a lot without overwhelming your visitors.
Here's an example I worked on for Liba Lurie:
I had already grabbed attention and generated interest. I had answered what problem Liba was solving for whom, and I'd clarified why they should care. But the format of the program was still unclear. HOW was this magic going to happen?
Bullet points to the rescue!
An image is important because guess what...a lot of people don't read.
Your image gives them an alternative way in.
Even for readers, your hero image serves an important function.
It works hand-in-hand with your copy to do one or more of the following:
tell a story
depict life BEFORE/AFTER your offer
contextualize your product
add a clever twist
Toggl's background video is a good example of telling a story and adding a clever twist. They convey a core value proposition—that you can keep each task as separate as a flavor of ice cream—ENTIRELY through their visuals.
Motivational speaker and coach Jack Canfield's hero images kills 2 birds with 1 stone.
It both depicts life after working with him (full of the confidence to speak in front of a large audience) and adds credibility (wow, is that Jack himself up there on that stage?).
There's also a lot of evidence supporting using a background video in the hero section.
Forbes published this convincing stat: embedding a hero background video can help boost your conversion rates by 80% and influence a customer’s purchasing decision by 90%.
5. Social proof
Social proof is essential for any homepage. But if your proof is particularly juicy, you'll want to make sure it's seen by as many people as possible, as soon as possible.
We've already seen a great SaaS example in Toggl's hero section above 👆. Notice that little line, "Reliable time tracking loved by 5M+ users."
Here's another good one from Tim Ferriss's site, the 4-Hour Workweek:
3,500+ 5-Star reviews from Amazon. #1 NYT bestseller. #1 WSJ bestseller. C'mon now. You can't miss that social proof if you try!
Above all, your CTA should be clear.
You don't want your visitors to feel like they're opening trapdoor number 3 and hoping they won't get slimed.
No. Clear as day.
Users want to know:
What will happen after I click?
Will I be able to change my mind?
Will I have to pay?
Will I have to SELL MY SOUL 👿?
Clever copy has its place, but its place is usually NOT on your CTA button.
That said, you CAN play with it, as long as it meets the conditions above.
Here's a creative (but still clear) CTA example from email genius Laura Belgray's Talking Shrimp homepage:
Sometimes, you may want to consider adding a SECONDARY CTA, usually for colder leads or those with a lower level of awareness.
We've already seen some examples (e.g. Liba Lurie, Toggl). Here's another from Litmus.
The secondary CTA will usually take 1 of 2 directions:
Get users more informed about your value (like in the Litmus example)
Get users to check out X [features/case studies/plans/product types]
7. Click trigger
The click trigger is "helper" copy you place strategically near your CTA to give your users an extra push to click.
You've seen things like "no credit card required" or "cancel anytime."
Here's a reassuring and trust-inspiring click trigger from Acuity Scheduling:
They're also often used to convey scarcity ("deal ends soon" or "space limited").
But you can get pretty creative with these, too.
Sometimes, they're just used for branding and nurturing purposes, to surprise users and get them on board with your brand.
You're all set for crafting a rather "herculean" hero section, if I do say so myself.
Give it a go!