Website design · 11 Nov 2026 · 8 min read
Website hero section: what to put above the fold
The hero section is the first thing a visitor sees, and it has a few seconds to say what the site is for. This guide covers what belongs in it, which kind of visual to use and how to keep it fast.
The short answer
A website hero section is the first block of a page, shown before any scrolling. It should state what you offer and who it is for, give one clear next step, and show a picture or video that supports the message. Anything that does not help a visitor decide whether to stay should wait below the fold.
What is a website hero section?
A website hero section is the first large block at the top of a page, usually directly under the navigation bar. It normally holds a headline, a line of supporting text, a button and a picture or video. On a homepage it gives the first answer to the question every visitor asks: am I in the right place?
The idea of the fold comes from print. In a newspaper, above the fold meant the top half of the front page, the part a buyer could see on the stand. A website has no fixed fold. It moves with the screen, so a large monitor shows far more than a phone held upright. Treat above the fold content as whatever appears before the first scroll on the devices your visitors really use, and check the smallest one first.
Not every page needs the same hero. A homepage hero section introduces the whole business. A service page or campaign page can use a tighter version that repeats the words the visitor searched for or clicked. A blog post needs little more than a title and a short introduction.
Four questions the first screen has to answer
Visitors decide quickly whether to stay. You cannot control how long they give you, so make the first screen answer four questions in this order.
| Visitor's question | What answers it | Common failure |
|---|---|---|
| What is this? | A headline that names what you do in ordinary words | A slogan that could describe any business |
| Is it for me? | A supporting line that names the customer, the problem or the area you cover | Wording that only the company understands |
| What do I do next? | One main button with a label that says what happens | Several buttons of equal weight, or none |
| Can I trust it? | A real photograph, a recognisable detail or one line of proof you can back up | Stock pictures of strangers shaking hands, or claims with nothing behind them |
The order matters. If the headline fails, nothing below it gets read. Write the four answers as plain sentences before any design work starts, then decide how the layout carries them.
What should go above the fold?
Put in the minimum that lets a visitor understand the offer and act, and leave the rest for the scroll. For most business sites the first screen holds these parts:
- the navigation, kept to the links that matter, with a clear route to contact
- a headline and one supporting line
- one main button and, if needed, a quieter second option
- one visual that shows the product, the service in use or the people behind it
Several things usually do not belong there: a welcome message that says nothing, a long account of company history, a row of badges you cannot explain, a banner that covers half the screen, and a pop-up that opens the moment the page loads. If a notice is legally needed, keep it small and easy to dismiss. A short line of proof, such as a quote from a customer who gave permission, can sit just under the hero rather than inside it.
How to write the headline and the button
Say what you do, for whom, in the words your customers use. A useful test is to cover the logo, show the first screen to someone outside your business for a few seconds and ask what the site is for. If they cannot say, change the headline.
Take an imaginary accounting practice. ‘Your success, our passion’ tells the visitor nothing. ‘Bookkeeping and tax returns for small shops and studios’ says what is on offer and who it suits. The second is plainer and does more work.
The supporting line adds the one thing the headline could not carry: the area you cover, how the service starts, or a detail you can prove. Keep both short enough to read at a glance on a phone, where a long headline can fill the whole screen.
Give the button a label that says what happens next, such as ‘Request a quote’ or ‘See the menu’. Offer one main action. When a hero presents several choices of equal weight, many visitors take none. A second, quieter button works for visitors who are not ready, for example ‘See how it works’.
Should the hero be an image, a video or text?
Choose by what the visitor needs to see, not by what looks striking in a design file. Each option has a place.
| Option | Works well when | Watch out for |
|---|---|---|
| Text only | The message is the offer, or the service has nothing visual to show | Looks bare unless type, spacing and colour are handled with care |
| Photograph | People, a place or a physical product are central to the sale | Stock photos that could belong to any business; text laid over a busy picture |
| Illustration or graphic | The service is abstract, as with software or finance | Decoration that explains nothing |
| Video | Movement explains the offer, such as a venue, a process or a product in use | File weight, autoplay rules and accessibility, covered below |
| Slider or carousel | Rarely | Later slides are seldom seen, and moving content brings accessibility duties |
Treat video as an extra, not the foundation. Show a still image first, called a poster image, so the page looks right while the video loads or if it never plays. Browsers set their own autoplay rules. Chrome's documentation says that muted autoplay is allowed and that autoplay with sound is limited, so a background video should be muted and should not carry information that exists only in the sound. Other browsers may behave differently, so check their current documentation.
Accessibility guidance applies too. WCAG, the standard published by the W3C, says that moving, blinking or scrolling content which starts automatically, lasts more than five seconds and sits alongside other content needs a way for the user to pause, stop or hide it. A background video or an auto-rotating slider therefore needs a visible pause control. If you cannot provide one, use a still image.
Keep the hero section fast
The hero is usually the first thing a browser has to draw, so it shapes how quickly a page feels. Google's web.dev documentation describes LCP, the loading measure in Core Web Vitals, and on many pages the element it measures is the hero image. Its advice is to leave that image out of lazy loading, make sure it is in the page's HTML so the browser finds it early, and where it helps mark it as high priority. Lazy loading suits images further down the page, not the first screen.
In practice, export the hero image at the size it is displayed rather than the size it left the camera, use a compressed format your developer recommends, and set its width and height in the page so the layout does not jump as it loads. The guide to how to check and improve website speed explains how to test the result. If the page is still slow after the image is fixed, the cause may be the server rather than the picture, and the difference between a domain name, a website and hosting shows who to ask.
How the hero behaves on a phone
Design the phone version first, because that is where the fold sits highest. Check four things on a real phone held upright: the headline wraps to a sensible number of lines, the button is visible without scrolling, the text stays readable against the image, and the menu does not push the headline off the screen. A background photo that works on a wide monitor often crops badly on a narrow one. Choose a picture whose subject survives a tall, narrow crop, or supply a separate crop for phones.
These behaviours come from responsive web design, where one set of content rearranges itself to suit the screen. Test with larger text sizes and with zoom as well, since some visitors depend on them.
Hero sections for different kinds of site
A shop usually starts with a product or a clear choice of category rather than a brand statement. A local service business can name the area it covers and put a contact route in the first screen. A software business may show the product itself. A creative site can let the work be the hero.
A membership site has two first screens: the public page that explains what joining gives, and the screen a member sees after signing in. The guide to how a membership website works covers the second one.
Who edits the hero, and how often
Decide at the start who will change the hero text and image. It is often the part of the site that changes most, with seasonal offers, new campaigns and rewording after you learn what visitors do. If the site runs on a content management system, ask for the hero to be editable by staff without touching code. The guide to what a CMS is and how to choose one covers the trade-offs.
Keep a dated note of each change. Judge a new headline by enquiries or sales over a fair period, not by opinion. If the hero needs a custom layout, a fast video or a design that holds across screen sizes, Liftup Technologies offers website development that covers this kind of work.
A short review before you publish
- Cover the logo and ask someone outside the business what the site is for.
- Look at the first screen on a small phone and on a wide monitor.
- Confirm there is one main button and that its label says what happens.
- Check that any moving content can be paused and that any video has a still image behind it.
- Test the page speed with the hero in place.
- Read the headline aloud. If it could sit on a competitor's site unchanged, rewrite it.
Related guides
- Website development
- Cms what it is and how to choose
- Domain name vs website vs hosting
- How to check and improve website speed
- Responsive Web Design Explained in Plain English
- Website content plan what to write first
Questions and answers
What is a hero section?
A hero section is the first large block of a web page, usually holding a headline, a short supporting line, a button and an image or video. Its job is to tell a visitor what the page is about and what to do next. A homepage hero introduces the whole business, while a service page hero repeats the topic the visitor came for.
What should go above the fold?
Enough for a visitor to understand the offer and act: navigation, a plain headline, one supporting line, one main button and a supporting visual. Extra proof can follow just below. The fold varies by device, so check the first screen on a small phone as well as a desktop monitor.
Should the hero be an image, a video or text?
Choose by the message. Text suits a clear offer, photographs suit places, people and physical products, and video suits movement that explains something. Video adds weight and accessibility duties, so give it a still image and a pause control if it plays on its own. If you are unsure, start with one well-chosen photograph.
Does the fold still matter on phones?
Yes, and it sits higher because the screen is small. People do scroll, so the fold is not a wall, but the first screen decides whether they continue. Keep the headline and main button visible without scrolling on a small phone held upright.
Should I use a slider in the hero?
A single message usually works better. Later slides are seen less often, and a slider that moves on its own needs a way to pause it under accessibility guidance. If you have several messages, give each its own section or page.
Can a hero section slow the page down?
Yes, because it is often the first and heaviest element. Compress the image, size it for the screen, avoid lazy loading it and think twice about autoplay video. Test the page before and after each change so you know what helped.
Tell us what you are building.
A short call, a written plan and a fixed quote. No obligation.