Visitors spend roughly 5-6 seconds scanning your above-the-fold area before they decide to stay or leave. In those seconds, your landing page needs to answer three questions: What is this? Is it for me? Should I trust it? After building 3,000+ landing pages across 300+ clients, we have seen the same pattern play out thousands of times. Pages that nail those first 5 seconds convert at 2-5x the rate of pages that do not. Pages that get it wrong bleed ad spend no matter how good the offer is. This guide covers exactly what goes above the fold on a landing page, how to design it for conversions, and the mistakes we fix most often when auditing new client pages.

What does “above the fold” mean on a landing page?

Above the fold is the portion of your landing page visible without scrolling. The term comes from newspaper publishing, editors placed their strongest headlines above the physical fold of the broadsheet to grab attention on the newsstand. On a landing page, the fold is wherever the browser viewport ends. That varies by device:

• Desktop, roughly 600-800px of vertical space, depending on screen resolution
• Laptop, typically 550-700px
• Mobile, 500-650px, but the thumb zone matters more than raw pixels The critical difference between a landing page and a regular website page: landing pages have one job. There is no navigation menu pulling attention sideways, no sidebar competing for clicks. Every pixel above the fold should push toward a single conversion goal.

Why above the fold makes or breaks your conversion rate

Content above the fold attracts 84% more attention than content below it. Visitors spend 57% of their viewing time in this zone. Those numbers match what we see in heatmap reviews across client accounts, the top of the page gets hammered with attention, and everything below it drops off fast. But most guides stop there. They tell you the fold matters, then list generic tips. What they miss: above the fold does not need to close the deal. It needs to earn the scroll. When we audit landing pages for new clients, the most common problem is not a missing CTA button. It is a headline that does not match the ad that brought the visitor there. The visitor clicks an ad promising “14-Day Acne Guarantee” and lands on a page with the headline “All-Natural Acne Cream Rocks!”, that disconnect kills conversions before the page even finishes loading. One pattern we see consistently: pages where the above-the-fold section matches the ad message word-for-word convert 20-35% higher than pages with even slight message mismatches.

The 7 elements of a High-Converting Above-the-Fold section

After 10 years of building and testing landing pages, we have narrowed it down to seven elements that matter above the fold. Not every page needs all seven, but skipping any without a reason usually costs conversions.

1. A Headline That Passes the 3-Second Test

Your headline needs to communicate what you offer, who it is for, and what outcome the visitor gets, in one sentence. If a stranger cannot explain your offer after reading just the headline. It is too vague.

Weak: “Change Your Business Today”

Strong: “Landing Pages That Convert Your Ad Traffic Into Leads, Built in 2 Weeks” The second headline names the deliverable (landing pages), the outcome (convert ad traffic into leads), and sets a timeline expectation (2 weeks). No ambiguity.

2. A subheadline that explains how

The headline says what. The subheadline says how. Keep it to one or two sentences. If your headline is “Landing Pages That Convert Your Ad Traffic Into Leads,” a strong subheadline might be: “We research your competitors, design a conversion-focused page in Figma, build it on your platform, and run it through our 37-point QA checklist before it goes live.” The subheadline works because it walks the visitor through the process in plain language. It builds credibility without requiring the visitor to scroll.

3. A single: clear Call-to-Action

One CTA. Not two, not three. One primary action you want the visitor to take. The CTA button should:

• Use a contrasting colour that stands out from the page background
• Continue the narrative of the headline (not generic “Submit” or “Click Here”)
• Be large enough to tap easily on mobile, minimum 44x44px touch target
• Sit within the natural eye-flow path: headline → subheadline → CTA

4. Visual proof of your product or service

A hero image or video that shows your product in action reduces uncertainty faster than any amount of copy. People do not read landing pages, they scan, and images are what they scan first. For SaaS products, this means a screenshot or short demo clip. For service businesses like ours, it means portfolio examples, a before/after or a polished mockup of a completed landing page.

5. At least one trust signal

Trust signals above the fold shorten the decision cycle. The most effective ones we have tested:

• Client logos, 3-5 recognisable logos
• A specific stat, “3,000+ landing pages built” is stronger than “thousands of happy customers”
• A review badge, Clutch, Google, or Trustpilot badges with star ratings
• A short testimonial, one punchy line from a real client with their name and company

6. Message match with your traffic source

This is where we see the biggest missed opportunities. The above-the-fold section must mirror the language and offer of whatever brought the visitor to the page. Google Ad, Facebook campaign, email, does not matter. The headline on the page should feel like a continuation of the click that got them there. If your ad says “Free 14-Day Trial,” the landing page headline should say “Free 14-Day Trial”, not “Get Started Today” or “Explore Our Platform.”

7. Mobile-First Layout

With 63% of web traffic now on mobile, designing desktop-first and “making it responsive” is backwards. Design for the smallest screen first, then expand. On mobile, the above-the-fold checklist becomes tighter:

• Headline visible without horizontal scrolling
• CTA button thumb-reachable on first load
• No hero image that pushes the headline below the fold
• Font sizes large enough to read without pinching (minimum 16px body, 24px+ headline)

The Above-the-Fold audit framework

When we onboard a new CRO client, the first thing we check is the above-the-fold section. Here is the framework we use internally. You can apply it to your own pages.

Common Above-the-Fold mistakes (and how to fix them)

We have audited hundreds of landing pages over the past decade. These five problems show up more than any others.

Mistake 1: the hero image pushes everything down

A full-width hero image that takes up 80% of the viewport looks great in Figma. On a 13-inch laptop, which is what most of your visitors are actually using, it pushes the headline, CTA, and trust signals below the fold.

Fix: Limit hero images to 40-50% of viewport height. Place the headline and CTA alongside or overlaid on the image, not below it.

Mistake 2: too many competing CTAs

We have audited pages with three different buttons above the fold: “Get a Quote,” “Book a Demo,” and “Watch a Video.” Each button dilutes the others. The visitor freezes because they are forced to make a choice before they understand the offer.

Fix: One primary CTA. If you must include a secondary option, make it a text link, not a button, so the visual hierarchy stays clear.

Mistake 3: vague headlines that could be any company

“Helping Your Digital Transformation” could be any B2B company on the planet. It tells the visitor nothing about what you actually do or why they should care.

Fix: Name your product, your audience, and the outcome in the headline. Be specific enough that a competitor could not copy-paste your headline onto their page.

Mistake 4: no social proof above the fold

Many landing pages save testimonials and logos for the bottom of the page. By then, most visitors have already bounced. With 84% of attention focused above the fold, that is where your strongest proof should live.

Fix: Add a single client logo bar, a review count badge, or a one-line testimonial directly below the headline. It does not need to dominate, even a subtle row of logos shifts trust.

Mistake 5: ignoring mobile viewport differences

A design that looks perfect at 1440px wide can completely fall apart at 375px. The headline wraps to four lines, the CTA drops below the fold, and the form fields are too small to tap.

Fix: Design mobile-first. Set breakpoints at 375px (mobile), 768px (tablet), and 1024px+ (desktop). Test every design on real devices, not just browser emulators.

See our workApexure Landing Page Portfolio, 117 projects including above-the-fold designs→

Above the fold for different landing page types

The seven elements above apply broadly, but the emphasis shifts depending on what your landing page is trying to do.

Lead generation pages

The form should be visible above the fold, or at minimum, the first step of a multi-step form.

Book a demo / free trial pages

The above-the-fold section should make the value of the demo immediately clear. Not “Book a Demo”, instead, “See How [Product] Reduces Your [Pain Point] in 30 Minutes.” For Flare.io, the shorter version of their demo page, with a tighter above-the-fold section, outperformed the long version by 65%. Less content above the fold meant less friction before the CTA.

PPC landing pages

Message match matters more here than on any other page type. The headline must echo the ad keyword. If someone searches “SaaS landing page agency” and clicks your ad, the landing page headline should include those exact words.

Event registration pages

Date, location (or “virtual”), and a speaker accent should all be above the fold. The Board Agenda registration page hit 27.89% conversion by putting the event details and a multi-step form in the first viewport, no scrolling required to register.

Testing your Above-the-Fold design

Designing the above-the-fold section gets you to a baseline. Testing is how you find out what actually works for your specific audience. Using our EPIC framework, we prioritise A/B tests by Experiment potential, Priority, Impact, and Cost. For above-the-fold tests, the highest-impact elements to test are:

1. Headline copy, test specific vs broad, outcome-focused vs feature-focused
2. CTA button text and colour, “Get My Free Quote” vs “Start Now”
3. Hero image vs no image, sometimes removing the image and letting the copy breathe converts better
4. Form placement, above the fold vs triggered after a scroll commitment
5. Social proof type, logo bar vs testimonial vs stat badge

Checklist: designing your Above-the-Fold section

Use this as a quick reference before launching any landing page:

• Headline names the product, audience, and outcome
• Subheadline explains how in 1-2 sentences
• One primary CTA button with contrasting colour
• CTA button text continues the headline’s narrative
• At least one trust signal (logo bar, badge, stat, or testimonial)
• Hero image shows the product or result, no generic stock photos
• Message matches the ad or link that brought the visitor here
• CTA visible without scrolling on both desktop (1440px) and mobile (375px)
• Page loads in under 2.5 seconds on mobile
• No competing navigation links or secondary CTAs stealing focus

What comes next

The above-the-fold section is the highest-use part of any landing page. Fix this first. Everything else, the proof section, the feature breakdown, the pricing, depends on whether visitors make it past those first 5 seconds. But a strong above-the-fold section earns the scroll. It does not close the deal by itself. What follows below the fold needs to deliver on the promise your headline made. If you are running paid traffic to landing pages that are not converting, start with the audit framework above. Check message match first, it is the most common failure point and the easiest to fix. Then work through the other six audit points before you consider a full redesign.

Related Articles:

• The Complete Guide to High-Converting Landing Page Design

• Landing Page Call to Action Button Tips That Convert

• Landing Page Conversion Rate Optimisation: 15 Proven Tips

• Landing Page Form Design Best Practices With Examples

• Landing Page Design Inspiration Ideas Proven to Convert

• Ways To Increase Landing Page Social Proof For More Conversions

• CRO Testing: Everything You Need to Maximize Conversions