Hook and intrigue your website visitors in 3 seconds or less is a tall order—this article will walk you through best practices for making your hero section on your home page a true hero for your sales.
What is a hero section?
Open up your website.
What is the very first thing you see?
That’s your hero section: the top section of your home page.
If you’re a solopreneur, it’s probably a picture of your face.
Ecommerce brand? A picture of a person interacting with your most popular item.
SaaS? Some type of cool digital illustration referencing what your tool does.
Why is the hero section important?
Most folks have heard something along the lines of you have 3 seconds to prove to a new website visitor that you’re worth their time.
And it’s true.
Your website is elbowing its way into precious doom scrolling time on Instagram or entertaining giggles on TikTok.
You have to hook ‘em in fast.
And if the first thing folks see on your website is a statement that they have to think about?
Lordy no.
No bueno.
You need to give them some clear, focused, and aspirational copy.
That’s a tall order for just one tiny section of your website!
(and that’s why copywriters exist)
How to write the hero section
Hero sections, more than any other section of a website, are what bring the most writer’s block.
There’s so much pressure!
Let’s break it down into components to make it easier, shall we?
Line One: big idea aspirational copy
Us copywriters like to call this ‘eyebrow’ copy because it should make the reader raise their eyebrows in interest.
|
|
Usually, this is the company’s tagline or the big outcome folks would get if they bought the company’s product or service.
You want this line to be super short and succinct and (here’s the most important bit) absolutely free of jargon.
Don’t make people think!
Optimized modes of greatness > Find your greatness
A unified platform for digital asset security and control > Your documents, secured
Make it simple and clear.
Line Two: explanatory copy
You’ve inspired people!
Their eyebrows are raised!
They want to know more!
Hooray!
Let’s get specific.
In one sentence, tell people what you sell.
Digital sales solutions for a complicated world > A full suite of digital tools for successful sales and marketing teams
(no one knows what “digital solutions” means and everyone knows the world is complicated)
Just so you know, this specific line is actually harder to write than the eyebrow-raising big idea line of a hero section.
Why?
You have to decide, as a company, what you sell and let it be specific.
Yes, it may mean you will be cutting off part of your super broad audience, but you know what?
You can’t serve everyone.
This second line is where you can really let your ideal audience be reflected back in your copy.
And when your audience feels seen and heard, they buy.
It’s a studied and researched fact.
Line Three: Call-To-Action
Yes, put a button up in your hero section.
No, you’re not asking for a sale too soon.
That button is setting up the right expectation for your reader right away.
- “Register” > this is an event or program
- “Shop” > this is selling products
- “Our Process” > this is an expert selling a custom service
Some folks may click on the button, which is awesome!
Most others will clock it and dive deeper into your site, wanting to learn more.
Some really good examples
This email couldn’t be complete without some examples, now could it!? (please enjoy my hilarious “trying to write numbers with a computer mouse” notation on the images)
Example one: SaaS company
Loom is one of my favorite tools and ooooooh yup did they nail the hero section on their website.
|
|
- Line one: Holy crap you help me skip meetings?!? YES PLEASE.
- Line two: Ah, this is a video recording service – clever!
- Line three: Cool, they want me to try the service out before asking for my money. Awesome!
Example two: DTC brand
Dapper Boi is a fantastic clothing brand and its hero section tells folks exactly what type of clothes they make and for whom.
|
|
- Line one: I want clothes that are affirming and look good. Mmhmm.
- Line two: Oh ok yes! Not just affirming but gender-affirming and inclusive! That means all body types are considered here: hips, no hips, chest, no chest. Yes. Please.
- Line three: Cool, you want me to shop? I shall shop.
Example three: soloprepreneur/service provider
You might remember Eman from my last Toucan Talk.
She’s a brilliant copywriter! And she has a brilliant hero section.
|
|
- Line one: what business owner WOULDN’T want all of those things? Heck. Yes.
- Line two: sweet she offers done-for-you strategy and copy. That means she’s probably one of the best if she can do both.
- Line three: Oh yes I do want to see her process and make sure it would work for me! Show me!
The Go-Try-It-Out Section
When you’re working on writing your website, 92% of the time your hero section copy is actually buried someone lower on the page.
Last week I did a couple of quick copy reviews for some friends and each time the best eyebrow-raising lines were too far down the page.
So—when you’re writing a website and editing it, take a look at the whole home page.
What lines can be moved around?
Website writing is a bit like Jenga.
The right piece at the wrong moment could make it all tumble.
But get it right?
That’s a powerful tower of awesome.