Above the fold: what to put on your landing page's first screen

The first screen of a landing page, the part visitors see before they scroll, is called above the fold. It's the most valuable space on the page, because it's the only part every visitor sees. Whether they read the rest depends on it.

This guide covers what to put there, in what order, and how to check it.

The short answer: the first screen should tell a stranger what you sell, who it's for, why it matters and what to do next. A headline, a subline, one call to action, a visual of the product or outcome, and, if there's room, one piece of proof.

What the first screen has to do

A visitor arrives with a question: Is this for me, and is it worth my time? The first screen has a few seconds to answer it. To do that, it needs to cover four things:

1. What it is. The category, in words the visitor already uses.
2. Who it's for. A role, a company type or a situation the visitor recognises as theirs.
3. Why it matters. The outcome, or the reason it's better than what they do today.
4. What to do next. One clear action.

Everything else (the feature tour, the integrations, the team photo) can wait until they scroll.

The elements, in order

1. Headline

The headline does most of the work. It should say what you sell and, ideally, who it's for or what it changes. Plain beats clever: a clever headline only works for people who already know the product.

Compare two made-up headlines for an invoicing tool:

• "Finance, reimagined." Clever, but it could be anything.
• "Invoicing that chases late payments for you." A stranger knows what this is.

2. Subline

One or two sentences that add what the headline couldn't: who it's for, the outcome, a number. "For agencies and freelancers with 5–50 clients. Send invoices in a minute and get paid in days, not months."

3. Call to action

One primary button whose label says what happens: "Start free trial", "See a 2-minute demo". If you need a second option, make it a text link so it doesn't compete. Right next to it, lower the risk: "No credit card", "Free for 14 days". See call to action for more.

4. Visual

Show the product or the result: a real screenshot, a short loop of the product in use, or a clear picture of the outcome. Avoid generic stock photos. They take space and say nothing.

5. Proof, if there's room

A row of recognisable customer logos, a rating with a review count, or one short named quote. Proof on the first screen helps the skeptical visitor keep reading. See social proof.

Hierarchy matters as much as content

Having the right elements isn't enough if the eye lands on the wrong one first. The visual hierarchy should lead from headline to subline to call to action. A common failure is a product screenshot so large and colourful that visitors look at it, don't understand it, and never read the headline.

A quick check: squint at the first screen, or blur a screenshot of it. The two things that still stand out should be the headline and the main button.

Desktop and mobile are different first screens

On a laptop, the first screen might show the headline, subline, button, visual and a logo row. On a phone, the same page might show only the headline and part of the subline.

• Check the first screen on a real phone, not just a narrow browser window.
• On mobile, put the call to action before the visual, not after it.
• Keep the headline short enough not to fill the whole screen.

Common mistakes

• A slogan instead of a description. "Work smarter" tells nobody what you sell.
• Two or three equal buttons. "Start trial", "Book demo" and "Watch video" side by side split attention.
• The button below the fold. Large hero images often push it down, especially on laptops with small screens.
• Too much text. The first screen isn't the place for the whole story. Give visitors a reason to scroll.
• A first screen that doesn't match the ad. Visitors from a campaign look for the promise they clicked. See message match.

A first-screen template

Use this as a starting point and adapt the words to your product:

[What it is] for [who it's for]

[The outcome they get], so they can [what changes]. [One specific: number, time, comparison.]

[Verb that says what happens] · [Risk reducer]

[Product screenshot or outcome visual]

[Logos, rating or one named quote]

How to check your first screen

Show the first screen to someone who has never seen the product for five seconds, then ask what the company does and who it's for. This is a five-second test. If their answer doesn't match what you meant, start with the headline.

For a faster first read, Klar's design review looks at your page's first screen on every review: where the eye lands first, whether the primary call to action is above the fold, and how the hierarchy holds up, with fixes for what's weak. The persona panel then tells you whether buyers understood what you sell. It reviews the desktop layout, so check mobile yourself.