The Website Hero Section Formula That Actually Gets People to Scroll

Most homepages spend the most valuable real estate they own — the bit visible before anyone scrolls — on a vague tagline and a stock photo of people laughing at a laptop. That's the top of the funnel gone before it started. We've rebuilt enough hero sections to know the fix isn't cleverer copy, it's a formula, applied properly, every time. 💖

What most businesses get wrong in the hero section

The number one mistake is writing the headline for yourself instead of the visitor. "Passionate about delivering excellence since 2014" tells a stranger nothing about what you actually do or whether you can help them. The second mistake is a CTA that's either missing, buried below three paragraphs, or so generic ("Learn More") that it gives no reason to click. The third — and this one's sneaky — is a hero image or video that's purely decorative. If it doesn't build trust or explain the offer, it's wasted space.

How to actually put this into practice

1. Write ten headline options using the formula above. Read them out loud — if you wouldn't say it to a person at a barbecue, rewrite it.
2. Pick the subheadline detail that's hardest for a competitor to copy — a real number beats a feeling every time.
3. Choose ONE primary action for the whole page and make the hero CTA that action. Every other button on the homepage should support it, not compete with it.
4. Swap any stock photo for a real one. If you genuinely have nothing better yet, a clean product/service shot beats a generic lifestyle stock image.
5. Check it on a phone. Most visitors will see this hero section on a 6-inch screen — if the CTA is below the fold there, move things up.

Mistakes to avoid

• Writing the headline about your company ("we", "our mission") instead of the visitor's problem.
• Using more than one CTA style or colour in the hero — it splits attention and both get fewer clicks.
• Relying on a slider/carousel — most get ignored after the first slide, and they slow load speed.
• Making the subheadline just a longer, vaguer version of the headline instead of adding new information.
• Forgetting mobile — if the fold cuts off your CTA on a phone, you've lost the formula's whole point.

Frequently asked questions

How long should a hero headline be?

Aim for under 10 words if you can. It needs to be readable in about two seconds — if someone has to stop and parse it, it's doing too much.

Should the hero section have a video background?

It can work, but only if it loads fast and doesn't distract from the headline and CTA. On mobile especially, a static image usually converts just as well with far less risk of slow load times.

Do I need different hero sections for different pages?

Ideally, yes. Your homepage hero should speak broadly to your main offer, but a landing page for a specific campaign or service should have its own hero tailored to that traffic. One generic hero trying to serve every visitor usually undersells all of them.

Will fixing the hero section alone fix my conversion rate?

It depends. A strong hero gets more people to scroll and engage, but if the rest of the page, your offer, or your pricing has bigger problems, a better hero won't fix those on its own — it just gets more people far enough to notice them.

Keep reading 🤍

• Common Website Mistakes That Lose You Customers
• How to Choose the Right Website Platform
• How to Write a Sales Page That Converts