How to Write a Hero Section That Converts
Learn how to write a hero section that converts visitors in 5 seconds. A 4-element framework covering H1, sub-headline, CTA, and visual proof — with before/after examples.
The hero section is the first screen of your website — what a visitor sees before their thumb even twitches to scroll. You have about 5 seconds to answer three questions: what is this, who is it for, and why should I stay. If you don't answer — they leave. Most of the websites we review fail here. Not because the design is bad, but because the hero section tries to be clever instead of clear.
What Your Hero Section Must Answer
Three questions, in order:
- What exactly do you do? (product or service in one sentence)
- Who is it for? (a specific type of customer, not 'everyone')
- What do I get if I stay? (result, timeframe, guarantee)
Everything else — brand story, values, "our team" — goes lower on the page. The hero section exists to keep visitors long enough to scroll.
The 4-Element Framework
Every hero section that works has the same 4 elements. You can add images, video, animations, decorations — but these four must be crystal clear above all else.
1. H1: Specific, Short, Problem-Oriented
The H1 is not a tagline. It is a promise of results. Bad H1: "Welcome to our website." Good H1: "A website that turns visitors into customers in 7 days." The second one promises a concrete outcome and a concrete deadline — the first just says hello.
2. Sub-headline: Who It's For
This is where you narrow your audience. Instead of "for businesses that are growing," write "for small companies in Serbia with 2–20 employees who struggle to find customers online." Specificity repels the wrong audience — which is a good thing — and tells the right customer they are in the right place.
3. CTA Button: One Clear Next Step
One primary button. Not three. The button text must be an action, not a fog. Bad: "Learn more." Good: "Request a quote within 24h" or "Book a free call." The user must know what to expect when they click — the full CTA button framework is covered in a separate guide.
4. Visual Proof — Not a Stock Photo
Stock images of smiling business people with laptops kill credibility. Better options: a screenshot of your real dashboard, a photo of your real team in the office, or a short testimonial video from a client. If you don't have an authentic image — leave it blank rather than placing something fake.
Example — Before and After
Before (generic):
H1: "Your partner in digital transformation"
Sub-headline: "We help you achieve your full potential"
CTA: "Learn more"
After (specific):
H1: "A website for your business in 7 days. No upfront payment."
Sub-headline: "For small businesses in Belgrade and Novi Sad — we write, design, and launch. You pay only when you're satisfied."
CTA: "See pricing — 5 minutes"
The second one works because it answers what, who for, and next step — in three lines.
Tests to Run Before You Go Live
- Cover the top half of your site. Can you tell what the company does in 5 seconds? If not — rewrite it.
- Show the hero to someone outside your industry. If they don't understand what you're selling in 10 seconds — rewrite it.
- Click your own CTA and follow what happens. Is the next step clear? Does the form ask for too little or too much information?
- View the hero on a phone. Is the H1 readable without zooming? Does the CTA button fit comfortably under a thumb?
The hero section is not a place for creativity at any cost. The best one tells you exactly what you need in 5 seconds and then guides you forward. Creativity belongs in design, animations, and color palette — not in the message.