The hero section is the first thing visitors see when they land on your website: the top block with headline, subheadline, image and call-to-action button. You have 3 to 5 seconds to explain what you do, who you serve and why they should stay. If that message is generic or confusing, visitors leave before they ever see your services, case studies or contact form.
If you have already worked on your navigation menu, CTAs and a homepage that converts, the hero is where it all starts: it concentrates your value proposition in a single glance.
What is a hero section and why it drives conversion
The hero (also called above the fold) is the area visible without scrolling on the initial screen. On business websites it typically includes:
- Headline (H1): the main benefit in plain language.
- Subheadline: expands the promise and addresses the first objection.
- Primary CTA: one concrete action (request a quote, book a call, view services).
- Image or video: shows the outcome, team or product in context.
- Brief social proof: client logos, rating or relevant figure.
In web behaviour studies, more than 80% of initial attention concentrates in this zone. It is not decoration: it is your commercial introduction.
Anatomy of a hero that converts
| Element | Purpose | Best practice |
|---|---|---|
| Headline | Communicate the main benefit | 8-12 words, no internal jargon |
| Subheadline | Add context and build trust | 1-2 sentences with audience and outcome |
| Primary CTA | Guide the next action | Verb + benefit ("Request a free quote") |
| Image | Humanise and demonstrate | Real photography, not generic stock |
| Social proof | Reduce perceived risk | Logos, reviews or verifiable figure |
The golden rule: one message, one primary CTA. If you ask visitors to call, write and download a PDF at the same time, they will do none of the three.
Common mistakes on business websites
- Empty corporate headline: "Welcome to our website" says nothing about the problem you solve.
- Rotating message carousel: nobody waits for the third slide; it dilutes the message.
- Decorative image without context: a beautiful landscape does not sell consulting services.
- Generic CTA: "Learn more" or "Submit" do not communicate what the user gets.
- Hero too tall on mobile: if the button sits below the fold, you lose conversions.
- Illegible text on image: insufficient contrast between background and headline.
How to write a headline that keeps visitors
Use the outcome + audience + differentiator formula when possible. Adaptable examples:
- "Custom websites for SMEs that need to win clients from month one"
- "Full renovations in Barcelona with fixed quotes and guaranteed deadlines"
- "Tax advisory for freelancers who want to stop wasting hours on paperwork"
If your website copywriting already defines your brand tone, the hero should be its most condensed version: same voice, maximum clarity.
Design and visual hierarchy
The eye scans the page in an F or Z pattern. Place the headline where reading starts (top left on desktop), the CTA at the end of the path and the image as support, not distraction.
- Contrast: minimum 4.5:1 ratio between text and background (WCAG AA).
- Headline size: between 32 and 48 px on desktop; readable without zoom on mobile.
- White space: let the message breathe; a cluttered hero overwhelms.
- Consistency with the rest of the site: colours and typography aligned with your brand identity.
Mobile hero: absolute priority
More than 60% of business website traffic comes from phones. On mobile, the hero must show headline, subheadline and CTA without scrolling. Test on real devices, not just the browser inspector.
- Reduce subheadline text to one sentence.
- Use a full-width or near full-width button.
- Avoid background videos that consume data and slow loading.
- Check that the hamburger menu does not cover the headline.
How to measure whether your hero works
Configure these indicators in your analytics tool:
- Homepage bounce rate: if it exceeds 60%, review the hero message.
- Primary CTA clicks: compare them with page visits.
- Scroll depth: if nobody goes past 25%, the hero does not engage.
- Heatmaps: tools like Hotjar or Clarity show where people click.
Run A/B tests with one change at a time: headline, button colour or image. That way you know what truly improves conversion.
Checklist before publishing your new hero
- Does the headline communicate a concrete benefit in under 5 seconds?
- Is there one primary CTA visible without scrolling on mobile?
- Does the image reinforce the message and avoid generic stock?
- Does text contrast meet accessibility standards?
- Does the hero load in under 2.5 seconds (LCP)?
- Does it include brief social proof (logos, figure or testimonial)?
Conclusion
The hero section is not a decorative banner: it is the most important commercial argument on your website. A clear message, a specific CTA and an image that demonstrates results can make the difference between a visitor who leaves and one who requests a quote.
If you want to review your website hero with conversion, UX and performance criteria, at aatsoft we analyse the homepage and propose concrete improvements tailored to your sector.
