Hero Section

Conversion & UX

Also: Above the Fold · Hero Banner · Hero Image

First impressionVisitors decide to stay or leave in 50ms

Must containClear value prop, evidence, CTA

Mobile critical50%+ of traffic views hero on mobile first

Quick definition

The primary visual section at the top of a webpage, typically the first thing a visitor sees before scrolling, containing the headline, supporting copy, primary CTA and a visual element.

Where it shows up in the data

Value proposition clarity

The hero headline must answer 'What is this?' and 'Why should I care?' within 5 seconds. Vague headlines like 'Transforming businesses through innovation' fail this test. Specific ones like 'Marketing analytics for Australian ecommerce stores' pass it.

Primary CTA placement

The hero section typically contains the page's primary call to action. It should be visually prominent, clearly labelled and above the fold on both desktop and mobile without requiring a scroll.

Supporting evidence

The hero supporting copy (the text beneath the headline) should substantiate the headline's claim with a specific benefit, social proof element or key differentiator — not repeat the headline in different words.

Above the fold

Content above the fold is visible without scrolling. The definition of 'the fold' varies by device and screen resolution. Design for the most common viewport sizes for your audience, typically checking at 1024x768 (laptop) and 375x812 (iPhone).

What it actually means

The hero section is prime real estate — the most-viewed, most-critical part of any webpage. Every visitor to your homepage, landing page or key service page sees it first. Its job is to communicate who you are, what you do, who it is for and what to do next — within seconds, before the visitor decides whether to keep reading or bounce. Most hero sections fail because they prioritise aesthetics over clarity, or company identity over customer benefit.

The hero section is not where you tell your story. It is where you tell visitors they are in the right place.

How it shows up

Hero section performance is measured by scroll depth (how many users scroll past it), CTA click rate (how many click the primary button), and bounce rate on pages where the hero is the first thing seen. A hero section with a 5-second test failure (show it to 5 strangers and ask 'what does this company do?' — if they cannot answer, it has failed) is the most practical qualitative audit.

The Australian context

Australian B2B service businesses are particularly prone to vague hero sections. The most common pattern is a sweeping mission statement followed by a generic CTA. The highest-converting hero sections seen in the Australian market are specific about the customer type, the problem solved and the geography or industry served.

Where people get this wrong

Using a stock photo as the hero visualGeneric stock photography signals inauthenticity. Real photos of your team, your product, your work or your customers consistently outperform stock in A/B tests. If a stock photo is necessary, choose one that is specific and credible, not aspirational and generic.

Writing the headline for the brand not the customerThe hero headline should speak to what the customer gets, not what the company is. 'Tax returns for Australian freelancers and contractors' outperforms 'Your trusted accounting partner' every time.

Having two or three CTAs in the heroMultiple competing CTAs in the hero create decision paralysis. One primary CTA, clearly labelled with what happens next, outperforms a grid of options. Secondary options can exist lower on the page.

Common questions

What should a hero section include?

At minimum: a clear headline stating what you do and for whom, supporting copy that substantiates the headline, a primary CTA button, and a visual element (image, illustration or video). Social proof (star rating, client logos or a testimonial) in or near the hero significantly improves trust.

How do I know if my hero section is working?

Run a 5-second test with people who do not know your business. Show them the hero for 5 seconds then ask: 'What does this company do?' and 'Who is it for?' If they cannot answer, the hero has failed. Tools like UsabilityHub let you run this test online.

Should the hero have a video background?

Video backgrounds can increase time-on-site but often hurt Core Web Vitals scores (LCP in particular) and increase bounce rate on mobile due to autoplay restrictions and data usage. Test carefully and ensure a strong static fallback.

Keep exploring

About New Rebellion

New Rebellion is a marketing intelligence consultancy. We build tools, score Australian businesses on how their marketing actually performs, and publish Debrief every day. This dictionary is part of how we work in the open.

How we think →