In short
A hero section is the full-width block at the top of a page, usually the homepage, that a visitor sees before scrolling. It exists to answer three questions immediately: what is this, is it for me, and what should I do next. A working hero contains a specific headline, a supporting line, one primary call to action, and proof or a visual that makes the offer concrete. It should load instantly and read completely on a phone. Sliders, vague slogans and autoplaying video are the common ways to waste it.
What it is
The hero is the first screenful of a page: the area between the header and the first scroll. The name comes from print, where the hero image was the dominant photograph of a layout. On the web it has become the term for the whole opening block, image or not.
It is the most-seen part of any site. Every visitor sees the hero; a declining share sees each section below it. That makes it the most valuable space on the site and the place where the largest number of decisions are made, most of them in a few seconds.
What it is for
A visitor arriving on a page is asking three questions, roughly in this order:
- What is this? A product, a service, an agency, a tool, an article?
- Is it for me? Does it solve my problem, serve my kind of business, fit my situation?
- What do I do now? Read on, book, buy, sign up, leave?
A hero that answers all three clearly has done its job. A hero that answers none, which describes a surprising number of them, has spent the site's best real estate on atmosphere.
The anatomy of a hero that works
A specific headline. The single most important sentence on the site. It says what the business does for whom, in plain words. "Bookkeeping for freelancers who hate spreadsheets" beats "Empowering your financial journey" every time it is tested. We have written about the homepage headline at length; the hero is where it lives.
A supporting line. One or two sentences that add the detail the headline could not: the mechanism, the proof, the differentiator. Not a second slogan.
One primary call to action. The thing you most want the visitor to do, as a button, with a label that says what happens next. A secondary, quieter option is fine; three equal buttons is a decision not made. Our notes on writing a call to action apply.
Proof or a concrete visual. A screenshot of the product, a photograph of the actual work, a number, a logo strip of real clients, a short quote. Something that makes the claim tangible. Abstract illustration and stock photography do the opposite.
Speed and legibility. The hero is usually the Largest Contentful Paint element, so its image must be optimised and its text must not wait for a web font. On a phone, the headline, the supporting line and the button should all be visible without scrolling, which usually means the image moves below them or becomes a background.
What does not belong
A slider. Five messages rotating means no message. The measured click rate on carousel slides after the first is close to zero, and the motion pulls attention from the headline.
Autoplaying video as a background. Heavy, distracting, inaccessible, and it turns the text into something read over motion.
A vague slogan as the headline. "Welcome", "We build experiences", "Innovation for tomorrow". These are the words of a company that has not decided what to say.
Stock photography of people. Recognised instantly and discounted; it tells the visitor the business chose not to show itself.
Too much. Three headlines, a paragraph, two forms and a badge wall. The hero is not the page; it is the door.
A hero on every page. Interior pages usually need a clear title and a first paragraph, not a full-screen block that pushes the content the visitor came for below the fold.
Variations by page type
Homepage: the classic. Headline, support, action, proof.
Landing page: the same, more tightly matched to whatever sent the visitor; a landing page hero repeats the ad's promise.
Product page: the product image is the hero; headline is the name, support is the one-line benefit, action is buy.
Service page: headline names the service and the audience; support states the outcome; action is contact or book.
Article: no hero in the marketing sense; title, standfirst, byline, and the text.
Judging whether yours works
The five-second test: show the hero to someone unfamiliar with the business for five seconds, hide it, and ask what the company does and what they would click. If they cannot answer, the hero has failed regardless of how it looks.
The data test: scroll depth and click-through on the primary button. A hero that most visitors scroll past without acting, on a page where acting is the goal, is not doing its job. Change the headline first, the call to action second, the visual third; that is the order of effect in most tests.
If you would like the five-second test run on your hero by people who have run it a few hundred times, book a call.
Common questions
What should be included in a hero section?
A specific headline stating what the business does for whom, a supporting line with the key detail or differentiator, one primary call to action with a clear label, and proof or a concrete visual such as a product screenshot, a real photograph, a number or client logos. All of it should be visible on a phone without scrolling.
How big should a hero section be?
Large enough to hold the headline, support line, button and visual comfortably, and no larger. On desktop, roughly 60–90% of the viewport height is typical; a full-screen hero that hides all content below the fold is a common mistake. On mobile, keep the text and button within the first screen and let the image sit below or behind them.
Should a hero section have a video?
Rarely. A muted background video adds page weight, distracts from the headline, causes discomfort for some visitors and needs pause controls to meet accessibility guidelines. A short product demonstration clip can work on a product page; a decorative loop of drone footage almost never earns its cost.
What is the difference between a hero section and a banner?
A banner is any full-width strip, often promotional and often placed above or within content; it can be temporary. The hero is specifically the opening block of a page that introduces what the page is about and prompts the first action. A site may have promotional banners; it has one hero per page, if that.
Does every page need a hero section?
No. Homepages, landing pages and key service or product pages benefit from one. Articles, documentation and most interior pages do better with a clear title and immediate content, since a full-screen block there pushes what the visitor came for below the fold and adds nothing.
