What to Put Above the Fold on a Landing Page (and What to Move Down)

The first screen of your landing page does more work than any other part of it. It's where a visitor decides, usually in a few seconds, whether to keep reading, click, or hit the back button.

Yet a lot of hero sections are built around what looks good in a design tool: a big abstract illustration, a clever tagline, a row of floating badges. The stuff that actually helps a stranger decide often sits two screens down.

This guide covers what "above the fold" means today, whether it still matters, what belongs in that first screen, and how to check your own page.

Short answer

Above the fold on a landing page, put the things a first-time visitor needs to decide whether to stay: a headline that says what you offer and who it's for, a one-line subheadline that explains the outcome or how it works, one primary call to action, a visual that shows the actual product or result, a small trust signal, and a hint that there's more below. Move feature lists, long explanations, secondary links and full testimonial sections further down. The fold still matters because people spend most of their viewing time near the top of a page, and they scroll only when the top gives them a reason to.

What "above the fold" means now

The term comes from newspapers: the stories printed on the top half of the front page were the ones people saw on the newsstand. On the web, "above the fold" means whatever is visible when the page loads, before anyone scrolls.

There isn't one fold. A phone, a laptop and a large monitor each show a different amount of your page, and a responsive layout may have several folds depending on screen size. Nielsen Norman Group's Fold Manifesto makes this point directly: the exact location differs between devices, but a fold exists for every user on every screen.

So the practical question isn't "how many pixels tall is my hero?" It's "what does a visitor see on their own device before they do anything?"

Does the fold still matter?

You'll often read that "everyone scrolls now, so the fold is dead." The research says something more nuanced.

In a 2018 eyetracking analysis, Nielsen Norman Group found that users spent about 57% of their page-viewing time above the fold, and 74% within the first two screenfuls. That's down from 80% above the fold in their 2010 study, so people do scroll more than they used to. But attention still drops sharply after the first screen, and the same analysis found 81% of viewing time landed in the first three screenfuls.

Two things are true at once:

• People will scroll. You don't need to cram everything into the first screen.
• They scroll only when the top earns it. As the Fold Manifesto puts it, users scroll if what's above the fold is promising enough. Scrolling is extra effort, and nobody scrolls five screens on the blind hope that something useful is hidden there.

For a landing page, that means the first screen has one job: convince the right visitor that this page is for them and that reading on, or clicking, is worth it.

The six things your first screen needs

1. A headline that says what it is and who it's for

The headline is the first thing most people read and often the only thing. A good one answers "what is this?" in plain words. "Invoicing for freelance designers that gets you paid faster" beats "Work, reimagined" every time, because a stranger can tell in one glance whether it applies to them.

If your headline needs the rest of the page to make sense, it isn't doing its job. We cover the common traps in detail in landing page headline mistakes.

2. A subheadline that adds the "how" or the outcome

One or two short sentences under the headline. Use it to say how the product works, what the visitor gets, or what makes it different. Avoid repeating the headline in different words, and avoid a paragraph: if it wraps to four lines on a phone, it's too long.

3. One primary call to action

Pick the single action you most want a new visitor to take and make it the obvious button. Nielsen Norman Group's guidance from the same eyetracking analysis is to keep major CTAs above the fold, since that's where attention is highest.

Two common problems here:

• Competing buttons. "Start free trial," "Book a demo," "Watch video," and "See pricing" side by side split attention. If you need a second option, make it visually quieter (a text link instead of a button).
• Vague labels. "Submit" or "Learn more" tell the visitor nothing. Say what happens next: "Get my free report," "Start my 14-day trial." See how to write CTA copy that gets clicked for more.

4. A visual that shows the real thing

A screenshot of your actual product, a short clip of it in use, or a picture of the result (the finished report, the dashboard, the shipped package) helps people understand faster than an abstract illustration. Stock photos of smiling people at laptops add little, because visitors have seen them on a thousand other sites.

Ask: if someone looked only at this image, would they have a rough idea of what you sell?

5. A small trust signal near the CTA

You don't need a full testimonials wall in the hero, but a little reassurance near the button helps people who are on the fence. Depending on what's true for you, that might be:

• A one-line answer to the main objection ("No credit card required," "Cancel anytime," "Free preview, no sign-up").
• A real, attributed quote from a real customer.
• Logos of clients or publications, only if you have permission and they're genuine.
• A clear statement of who's behind the product.

If your product is new and you have no social proof yet, don't invent it. There are honest alternatives, which we cover in trust signals for a landing page with no testimonials.

6. A reason to scroll

Nielsen Norman Group warns about "false floors": minimalist layouts where the first screen looks complete, so visitors don't realize there's more. A full-height hero with nothing peeking in at the bottom can create exactly that illusion.

Fixes are simple: let the top of the next section show at the bottom of the screen, cut off text or images at the edge, or add a short line pointing to what comes next ("See how it works"). A tiny bouncing arrow on its own is weaker than real content peeking into view.

What to move below the fold

Not everything deserves the top spot. These usually work better further down:

• Feature lists and detailed explanations. Visitors who scroll are ready for them. Visitors who don't scroll weren't going to read them.
• Full testimonial sections, case studies and FAQs. Keep one short trust cue up top and put the rest where people are evaluating.
• Secondary links. Blog, careers, docs and "About us" links in a busy navigation bar pull people away from the main action. Many landing pages trim the nav entirely.
• Pricing details, unless price is the main thing visitors come to compare. If it is, a short "Plans from $X" line up top can help.
• Cookie banners, chat widgets and popups that cover the hero. If a pop-up hides your headline and button on a phone, the first screen your visitor sees isn't the one you designed.

Mobile is where most hero sections break

On a phone, the first screen is much smaller, and a hero that looks balanced on desktop often turns into a giant image with the headline and button pushed out of view.

Open your page on your own phone (not a resized desktop browser) and check:

• Is the headline readable without zooming?
• Is the primary button visible without scrolling, or at least within a short thumb swipe?
• Does a sticky header, cookie banner or chat bubble take up a big chunk of the screen?
• Does the hero image push everything else down?

Speed matters too, because a first screen that hasn't appeared yet can't persuade anyone. Google's Web Vitals guidance treats a Largest Contentful Paint (the time until the main content of the page is shown) of 2.5 seconds or less as good. A huge, unoptimized hero image or video is a common reason a landing page misses that. PageSpeed Insights will tell you which element is your largest one and how long it takes.

Common above-the-fold mistakes

• The clever headline. Wordplay that makes sense only after you know the product.
• The logo-and-image hero. A big brand mark, a background photo, and no clear statement of what you do.
• The carousel. Rotating slides mean visitors see whichever message happens to be showing, and the others are hidden behind an extra action.
• The button buffet. Three or four equally loud calls to action.
• The form wall. A long signup form in the hero before the visitor knows why they should fill it in. A short form can work up top; a ten-field one rarely does. See signup form friction.
• The mismatch. The ad, post or search result promised one thing and the first screen talks about something else. This is a classic cause of a high bounce rate.

A five-second test you can run today

You don't need special tools to check your first screen.

1. Open your landing page on a phone and on a laptop. Take a screenshot of what loads before scrolling on each.
2. Show one screenshot to someone who doesn't know your product for about five seconds, then hide it.
3. Ask them three questions: What does this company offer? Who is it for? What would you click next?

If they can't answer all three, your first screen needs work. Start with the headline, then the button, then the visual. Make one change at a time so you can tell what helped. If the first screen looks fine but the page still isn't converting, run through the 6 reasons your landing page isn't converting.

Get a second opinion on your page

It's hard to judge your own hero section, because you already know what the product does. Page Sheriff, an AI landing-page conversion audit by BizSaloon, lets you paste any public page URL and get a free preview with no sign-up: a conversion score out of 100, six sub-scores (Clarity of offer, Headline, Call to action, Trust & social proof, Objection handling, SEO basics), and the top fixes to start with. Clarity of offer and Headline line up with items 1 and 2 above, Call to action with item 3, and Trust & social proof and Objection handling with item 5.

If you want the full write-up, there are three one-time paid reports, each with a downloadable PDF: BASIC ($4.99), ADVANCED ($7.99) with site-specific solutions and rewrites, and EXPERT ($9.99) with in-depth strategic analysis and argued prioritization. Page Sheriff reviews your page's content and copy; it doesn't measure scroll depth or page speed, so pair it with the five-second test and PageSpeed Insights.

Fix your first screen, re-run the free Page Sheriff audit, and see whether your weakest sub-score moves.

FAQ

How tall should a landing page hero section be?

There's no single right height, because the fold changes with every screen size. Aim for the headline, subheadline and main button to be visible on common phone and laptop screens without scrolling, with a hint of the next section showing.

Should the call to action always be above the fold?

For most landing pages, yes: the primary button should be visible in the first screen. Nielsen Norman Group recommends keeping major CTAs above the fold. For complex or expensive products, it also helps to repeat the CTA further down, after you've explained more.

Is a video in the hero a good idea?

It can be, if it shows the product clearly and doesn't slow the page down. Make sure the headline and button still make sense without playing it, since many visitors won't.

Does the fold still matter if people scroll on mobile?

Yes. People scroll more on phones out of necessity, but they still decide whether to keep going based on what they see first. The smaller screen makes the first view more important, not less.