Hero Section Best Practices
How to write a website hero that converts:
the five-second test, the three questions, and the formula
The hero section is the single highest-stakes part of your website. Five seconds, three questions, one decision. Get it right and the rest of the page has a chance to do its job. Get it wrong and visitors leave before scrolling. Here is the exact formula we use on every website Modern Pixel writes.
The Five-Second Test
What a visitor decides in five seconds
Open your homepage in a private browser window. Set a timer for five seconds. Read your hero out loud. Then close the tab. Can a stranger answer three questions from what they saw?
- What do you offer? Specifically. Not "marketing solutions" or "consulting services." A specific service for a specific customer.
- How does it improve my life? The transformation, not the deliverable. "Get found by local customers" beats "SEO services."
- What should I do next? One direct action, not three.
If your hero fails any of those three questions, the rest of your page is wasted effort. Most visitors will not scroll past a confusing hero. Five seconds in, they are gone. Fixing the hero is the highest-impact change you can make to a homepage that is not converting.
The Formula
The four elements every effective hero contains
Every hero that converts has the same four elements in the same order. Headline, subheadline, primary call to action, supporting visual. Skip one and the hero loses force. Get the order wrong and the message reads backwards.
1. Headline (4 to 12 words, customer-focused)
The headline answers "what do you offer" in 4 to 12 words from the customer's perspective, not yours. Bad: "Innovative web design solutions for the modern business." Generic, business-jargon, not specific. Good: "Local SEO that brings Charlotte customers to your door." Specific, customer-focused, names the outcome. The headline is not where you describe your business. It is where you name what you do for the visitor.
2. Subheadline (1 to 2 sentences, transformation-focused)
The subheadline expands on the headline by naming the transformation. Where is the customer now and where are they going. Bad: "We provide comprehensive solutions tailored to your needs." Generic, says nothing. Good: "Stop competing on price. Start showing up first when local customers search for what you do." Specific, names the pain (price competition) and the outcome (visibility). The subheadline is the bridge between what you offer and why it matters.
3. Primary call to action (one direct action, first person)
The call to action is the next step the visitor should take. One. Not three. First person. "Book My Discovery Call" beats "Book a Discovery Call" because the first-person framing reads as the visitor's own decision rather than your demand. "Get My Free Assessment" beats "Click Here." "Start My Project" beats "Submit." The button copy is the visitor's voice, not yours.
4. Supporting visual (shows the outcome, not the process)
The visual reinforces the headline by showing what life looks like after the customer takes action. Bad: stock photo of a handshake. Means nothing, says nothing. Good: a real screenshot of a tool the customer would use, or a real photo of the work in progress. The visual is not decoration. It is evidence that what the headline promises is real.
Four elements. In order. Always all four. The hero that has all four converts at multiples of the hero that has one or two.
Common Mistakes
Five hero mistakes that kill conversion
1. The headline names your business instead of the outcome
"Welcome to Acme Marketing" tells the visitor nothing about what you do for them. Replace business-name-led headlines with outcome-led ones. Customers do not care about your brand yet. They care about whether you can solve their problem.
2. The subheadline is a list of services
"We offer SEO, web design, content marketing, social media management, and more." Lists are forgettable. Stories are memorable. Replace service lists with a single sentence about the customer's transformation.
3. The call to action is generic
"Submit," "Click Here," "Learn More" all assume the visitor will infer what happens next. They will not. Replace generic buttons with first-person, specific action copy that names the outcome of clicking.
4. There are too many calls to action
Three buttons of equal weight in the hero is three decisions the visitor has to make instead of one. Pick one primary action. Demote the others to text links or move them below the fold. Decision fatigue is real and decision fatigue at the top of the page is fatal.
5. The visual is generic stock photography
A stock photo of smiling business people in a conference room signals that you do not have actual photos of your actual work. Replace stock with real screenshots, real client work, or real product shots. If you do not have those yet, get them. The hero visual is too important to fake.
Three Examples Worth Stealing
Hero structures that work for different business types
Three real-world structures you can adapt for your own business. Each follows the four-element formula but tunes the voice for a different customer.
For local service businesses (plumber, dentist, accountant)
Headline: "[Service] in [City] that [outcome]" — example: "Family dentistry in Matthews that gets you in this week." Subheadline: "Stop [pain pattern]. Start [transformation]." Primary call to action: "Book My Appointment." Visual: photo of the actual practice, the actual chair, the actual team. The visitor reads the hero and immediately knows what you do, where you are, what they get, and how to start.
For consultants and agencies
Headline: "[Outcome] without [common alternative pain]" — example: "More qualified leads without spending more on ads." Subheadline names the methodology briefly. Primary call to action: "Book My Discovery Call." Visual: a real artifact (sample report, actual dashboard, real case study screenshot). Consultants sell expertise, so the hero proves expertise rather than just claiming it.
For software and SaaS
Headline: "[Job] in [time] without [common pain]" — example: "Send invoices in 30 seconds without leaving your inbox." Subheadline names a single concrete benefit. Primary call to action: "Start My Free Trial." Visual: a screenshot or short looping video of the product doing the job. SaaS heroes show, do not tell.
The pattern is the same across all three: outcome-led headline, transformation-led subheadline, first-person call to action, evidence-based visual. The voice changes. The structure does not.
Test Before You Ship
How to validate your hero before going live
Three quick tests catch most hero problems before launch.
The five-second test. Show the hero to someone outside your business for five seconds, then ask them to repeat what you do. If they cannot, the hero has failed. Do not argue. Rewrite.
The "I am the customer" test. Read the hero out loud as if you were your ideal customer encountering your business for the first time. If you would not click, your customer will not click. If the headline feels like marketing, it is. Rewrite.
The mobile test. Open the hero on a phone, not a laptop. Most visitors arrive on mobile. The full hero needs to fit on the visible screen without scrolling. Headline plus subheadline plus button plus a slice of visual. If anything is below the fold on mobile, that thing is invisible to the visitor.
Pass all three tests and your hero is doing its job. Fail any test and the hero needs work before you spend time on the rest of the page.
Questions
Common questions about hero sections
How long should a website headline be?
4 to 12 words. Shorter than 4 and the headline cannot carry meaning. Longer than 12 and the visitor stops reading mid-sentence. The sweet spot is 6 to 9 words for most businesses. The constraint forces clarity. If you cannot say what you do in 9 words or less, the issue is positioning, not copywriting.
Should the hero include a video?
Only if the video is short, autoplays muted, loops cleanly, and shows your actual work or product. Otherwise no. Hero videos that require a click to play, or that take time to load, hurt conversion because they delay the visitor's understanding. A static visual that loads instantly outperforms a beautiful video the visitor never plays. If you do use video, keep it under 8 seconds.
Should I A/B test my hero?
Most small businesses do not have enough traffic for A/B tests to produce statistically significant results in a reasonable time. You need 1,000+ visitors per variation per week minimum. If your site gets 100 visitors per week total, an A/B test runs for months and the result is still noisy. Skip A/B testing until you have meaningful traffic. Until then, write the best hero you can using the four-element formula and ship it.
Can I use the same hero across all my service pages?
No. Each service page should have its own hero customized to that specific service and customer. The four-element formula stays the same but the headline, subheadline, call to action, and visual change. A roofing company landing page should not have the same hero as a kitchen remodeling landing page even if both are for the same business. Each hero should answer the three questions for the specific intent that brought the visitor to that specific page.
What is the single most common hero mistake?
Leading with the business name instead of the customer outcome. "Welcome to Acme Marketing" wastes the most valuable real estate on the page on something the customer does not yet care about. Customers care about themselves and their problem. The hero is where you prove you understand both. Brand introduction comes later, after the visitor has decided you might be able to help them.
Want help applying this to your own homepage?
The full StoryBrand methodology guide walks through every section of a converting homepage, not just the hero. Plus a free annotated wireframe template you can copy. Or book a discovery call and we will work through your specific hero together.