♞Websites
What to Put Above the Fold on Your Homepage: Headline, Proof and CTA
Short answer: Above the fold on a homepage, put a clear headline that says what you offer and for whom, one supporting line, a single primary call to action, a piece of proof such as reviews or client logos, and a visual of your product or work. Keep navigation simple and make it load fast on mobile.
The fold is the bottom edge of the screen before anyone scrolls. People do scroll, but they decide whether it is worth scrolling based on what they see first. In Nielsen Norman Group’s 2018 eyetracking research, visitors spent about 57% of their page-viewing time above the fold, and 74% within the first two screenfuls. The first screen is not the whole story, but it decides whether the rest gets read.
This guide covers what belongs in that first screen, example structures for different kinds of business, what to leave out, and how to test it. It is the framework we use on every website redesign.
What does ‘above the fold’ mean on a website in 2026?
The term comes from newspapers, where the top half of the front page was visible on the stand. On the web there is no single fold. A phone, a laptop and a large monitor all show different amounts of the page, and most small business sites now get much of their traffic on mobile.
So treat the fold as a priority zone rather than a pixel line. Design the first screen for a typical phone first, then check that the same priorities hold on a laptop. If the headline, the main action and a hint of proof are visible on both without scrolling, you are in good shape.
The six elements to put above the fold
1. A headline that says what you do
Visitors want to know, within seconds, whether they are in the right place. A good headline names the outcome or the offer in plain words: what you sell, for whom, and what makes it different. Clever slogans that need explaining push that job onto the rest of the page, and most visitors will not wait.
2. One supporting line
A short sentence under the headline adds the detail the headline could not carry: the product range, the service area, the audience or the main benefit. One or two lines is enough.
3. A single primary call to action
Decide the one action most visitors should take, such as Shop the range, Book a call or Get a quote, and make it the most visible button on the screen. A second, quieter link (View our work, How it works) is fine for people who are not ready. Three or four equal buttons make the choice harder, not easier.
4. Proof
A star rating with the number of reviews, logos of known clients or stockists, a short testimonial, or a verifiable fact such as years trading. Proof answers the silent question, why should I trust you? Only use claims you can back up.
5. A visual that shows the real thing
The product, the work, the team or the result. A strong product image or a crop of a real project tells visitors more than generic stock photos. For e-commerce, show the hero product clearly; for services, show finished work.
6. Simple navigation
A logo that links home, a short menu of your main sections, and on e-commerce sites a basket and search. Hide secondary links in the footer. The header should help people move, not compete with the headline.
Examples of above-the-fold structures
The six elements stay the same, but the emphasis changes with the business. These are the structures we start from.
| Business | Headline approach | Primary CTA | Proof | Visual |
|---|---|---|---|---|
| E-commerce brand | Product category plus key benefit | Shop now, or shop a named range | Review rating and count, press or stockist logos | Hero product, large and clear |
| Service business | Service, audience and outcome | Book a call or Get a quote | Client logos or a short testimonial | Real project or result |
| Local business | Service plus location | Call, book or get directions | Review rating, years trading | The premises, team or work |
| Software or app | The problem it solves, in the user’s words | Start a trial or See a demo | Customer logos, usage stats you can verify | Product screenshot or short loop |
Notice what every row has in common: a visitor who reads only the first screen still knows what you do, what to do next and why they might trust you.
What to leave out of the first screen
- Auto-rotating carousels. Usability research from Nielsen Norman Group and university UX teams has repeatedly found that visitors ignore or miss carousel slides, often treating them as ads. If content moves automatically for more than five seconds, WCAG 2.2 also requires a way to pause it.
- Full-screen pop-ups on arrival. Google’s Search Central guidance warns that intrusive interstitials that cover content can harm both user trust and search performance. Use a small banner instead.
- Vague slogans. If the headline could belong to any company, it is not doing its job.
- Several competing buttons. One primary action, one secondary at most.
- Heavy background video. Autoplay video can slow the page and distract from the message. A still image or a short, compressed loop is usually better.
- Walls of text. Save the detail for below the fold, where people who are interested will look for it.
Speed: why the hero section decides your load time
The first screen is also where most of your loading time is spent. Google’s Core Web Vitals measure Largest Contentful Paint (LCP): how long the biggest visible element takes to appear. On most homepages that is the hero image or the headline block. Google defines a good LCP as 2.5 seconds or less, measured at the 75th percentile of visits.
Practical fixes we apply to almost every hero section:
- Export the hero image at the size it is displayed, in a modern format such as WebP or AVIF, with separate smaller versions for mobile.
- Do not lazy-load the hero image. It should load first, not last.
- Limit web fonts to the weights you actually use.
- Avoid sliders and large scripts that block the first paint.
How to test your above-the-fold section
- The five-second test. Show the first screen to someone outside the business for five seconds, then ask what you do and what they would click. If they cannot say, simplify.
- Check real devices. Look at the page on an ordinary phone, a small laptop and a large screen. Browser developer tools let you preview common widths.
- Read your analytics. Scroll depth, clicks on the primary button and bounce rate from the homepage show whether the first screen is working.
- Run PageSpeed Insights. It reports LCP and flags the element responsible.
From our projects: we write the headline, supporting line and button text before we design anything. If the words do not work as plain text in a document, no amount of layout will save them. Design then makes good words easier to read, not the other way round.
Consistent typography, colour and imagery in the hero also matter, because the first screen is where visitors meet your brand identity. If your logo is strong but nothing else feels consistent, our guide to brand identity versus a logo explains what is missing. And if the first screen is only one of several problems, see the signs your website needs a redesign.
Checklist: your homepage above the fold
- The headline says what you offer, and for whom, in plain words.
- One supporting line adds the key detail or benefit.
- There is one clear primary call to action, and at most one secondary link.
- At least one piece of verifiable proof is visible without scrolling.
- The visual shows your real product, work or team.
- Navigation is short, with secondary links moved to the footer.
- No auto-rotating carousel or full-screen pop-up on arrival.
- The first screen works on a typical phone as well as a laptop.
- The hero image is properly sized, compressed and not lazy-loaded.
- LCP is 2.5 seconds or less in PageSpeed Insights.
Questions
What does above the fold mean on a website?
Above the fold is the part of a web page visible before the visitor scrolls. The term comes from newspapers. Because screen sizes vary, there is no single fold line on the web, so treat it as the first screen on a typical phone and laptop, where the most important content should appear.
Is above the fold still important?
Yes. People scroll more than they used to, but they decide whether to scroll based on the first screen. Nielsen Norman Group's 2018 research found visitors spent about 57% of their viewing time above the fold. Put your headline, main call to action and proof there, and use the rest of the page for detail.
Should the call to action be above the fold?
Your primary call to action should be visible above the fold so ready visitors can act immediately. For complex or high-commitment offers, repeat it lower on the page after the explanation and proof, because many visitors need more information before they click.
Are image sliders good for a homepage hero?
Usually not. Usability studies have repeatedly found that visitors ignore or miss rotating slides, and automatic movement can be difficult for some users. A single strong image with a clear headline and call to action normally communicates better and loads faster.
How much text should be above the fold?
Keep it short: a headline, one or two lines of supporting text, button labels and a line of proof. That is usually enough to explain what you do and what to do next. Longer explanations, features and stories belong further down the page.