What to put above the fold on a landing page
George Peric · Conversion designer · 4 min readShort answer
Above the fold, a landing page needs five things: a headline that repeats the ad’s promise, a subhead that says how or for whom, a visual that shows the offer, a clear first action, and a piece of proof near that action. On mobile, the headline and first action should both fit on the first screen.
Key takeaways
- The first screen answers three questions: am I in the right place, what do I get, what do I do next.
- Headline, subhead, visual, first action and proof. Cut anything that competes with them.
- Design the phone screen first. That is where most paid social traffic lands.
- People do scroll, but the first screen decides whether they bother.
What does “above the fold” mean on a landing page?
“Above the fold” is everything a visitor sees before scrolling: the first screen. It is different on every device, so in practice I design for a common phone screen and a common laptop screen and make sure the essentials fit both.
People do scroll. Nielsen Norman Group’s eyetracking research found that in 2018 people still spent 57% of their viewing time above the fold, and 74% in the first two screenfuls. The first screen gets the most attention and decides whether people keep going.
What should be above the fold?
Five elements, each with one job.
| Element | Its job | Good example | Weak example |
|---|---|---|---|
| Headline | Confirm the ad’s promise | “See how much you could save with solar” | “Welcome to [Brand name]” |
| Subhead | Say how, for whom, or how fast | “Answer 3 questions. Get your estimate in 60 seconds.” | A paragraph about the company’s history |
| Visual | Show the offer or the outcome | The product in use, the same image as the ad | Abstract stock photo |
| First action | Make the next step obvious and easy | A button that says what you get, or the first quiz question | “Learn more”, or three buttons of equal weight |
| Proof | Remove the first doubt | Star rating and review count next to the button | Logos at the very bottom of the page |
How do you write the headline?
Reuse the promise and the key words of the ad that sent the visitor. The headline’s first job is to confirm “yes, this is what you clicked on”. Clever headlines that need a second read lose people who are skimming. If several ads point to the same page, write the headline around the promise they share. More in ad-to-landing page message match.
What should the first action be?
The easiest step that moves the visitor toward the goal. On a lead or quiz funnel, the strongest first action is often the first question itself, answered with one tap, rather than a button that leads to a form. On a product page, it is a button that names the outcome, such as “Get my estimate” or “Start my plan”.
Example
Say a fitness app’s ad asks “What’s your goal: lose weight, build muscle or get fitter?”, and the first screen has a matching headline, an image and a single “Get started” button. Replacing that button with the three goals as one-tap answers turns the first action into the ad’s own question. The headline and image stay the same, so only the first action changes, which keeps the test easy to read.
What should the mobile first screen look like?
Headline, a short subhead and the first action, all visible without scrolling, with the visual kept small or behind them. On a phone, a large hero image often pushes the button below the fold. Some practical rules:
- Keep the headline to about two or three lines on a phone.
- Put the first action within the first screen, with a thumb-sized tap area.
- Shrink or crop the image rather than letting it push the button down.
- Show one line of proof (a rating, a count) near the button, not a full testimonial.
- Keep cookie banners, chat bubbles and pop-ups from covering the button.
- Make sure the main content loads fast. Google’s “good” mark for Largest Contentful Paint is 2.5 seconds or less.
What are the most common above-the-fold mistakes?
- A brand headline instead of the offer. “Welcome” or a slogan makes visitors work out why they are there.
- A slider or carousel. Rotating messages split attention and hide the one that matches the ad.
- Too many calls to action. Three equal buttons ask the visitor to make a decision before they know enough.
- A hero image that pushes the action off the phone screen.
- Full navigation. On a paid landing page, the menu is an exit.
- Proof hidden at the bottom. Doubt starts on the first screen, so the first piece of proof belongs there.
How do you test the first screen?
Change one element at a time and judge on revenue per visitor. The first screen is where most visitors decide, so it is usually the best place to start testing. Good first tests: the headline wording, the first action (button versus first question), and the position of proof. Run at least two full weeks and keep quality as a guardrail. See how to calculate the revenue impact.
FAQ
Does everything important need to be above the fold?
No. People scroll when the first screen convinces them to. The first screen needs the promise, the first action and a piece of proof. Details, objections and longer proof can go below.
Should the call to action be above the fold?
On a paid landing page, yes. The first action should be visible without scrolling on both phone and desktop, and it can be repeated further down the page.
Is a hero image necessary above the fold?
Not always. A visual that shows the offer helps, but on mobile it should never push the headline or the first action off the first screen.
How tall is the fold on mobile?
It depends on the device and browser bars. Design for a common phone screen size and check on a few real devices rather than relying on one number.
Sources
Conversion designer, CXL certified in Conversion Optimization and Ecommerce Marketing. I design ads, landing pages and funnels and A/B test them.