Above the Fold: What to Put There and Why It Matters

The first screen your visitor sees, before they scroll, before they click anything, determines whether they stay or leave. This area is called above the fold, and it is the most valuable real estate on your website.

Research consistently shows that visitors spend 57% of their page-viewing time above the fold and 74% of their time in the first two screenfuls of content. What you put in that space is not a design decision. It is a revenue decision.

Yet most websites waste this space. A vague headline, a stock photo, a navigation bar that takes up a third of the viewport on mobile. The above-the-fold content either earns the scroll or loses the visitor. There is no middle ground.

This guide covers exactly what to put above the fold for different page types, what the data says about layout and content priority, and how to test your way to an above-the-fold section that maximizes conversions.

Table of Contents

• What "Above the Fold" Actually Means in 2026
• Why Above the Fold Still Matters
• The 5 Elements That Belong Above the Fold
• Above the Fold for Landing Pages
• Above the Fold for Homepages
• Above the Fold for Product Pages
• Above the Fold for Blog Posts
• Common Above-the-Fold Mistakes
• How to Test Your Above-the-Fold Content
• Mobile Above the Fold: A Different Challenge
• Using CROgrader to Audit Your Above-the-Fold Content
• FAQ

What "Above the Fold" Actually Means in 2026

The term "above the fold" comes from newspapers, where the top half of the front page (visible when folded) had to grab attention. On the web, it means the content visible on screen before the user scrolls.

But here is what has changed: there is no single fold line anymore. Screen sizes range from 320px-wide phones to 2560px-wide monitors. The fold falls in a different place for every visitor.

That does not make the concept irrelevant. It makes it more nuanced. For practical purposes, above the fold means:

• Desktop: The top 600-800px of your page (roughly the first viewport at 1366x768 or 1920x1080 resolution)
• Mobile: The top 500-650px of your page (roughly the first viewport at 375x812 or 390x844 resolution)
• Tablet: The top 700-900px of your page

The actual fold for your audience depends on your traffic's device distribution. Use scroll heatmap data from a tool like Hotjar or Microsoft Clarity to see exactly where your visitors' fold falls. Do not guess. Measure it.

Why Above the Fold Still Matters

Some designers argue that people are used to scrolling now, so the fold does not matter. The data disagrees.

Attention is not evenly distributed. The Nielsen Norman Group's eye-tracking research found that users view the area above the fold 102% more than below it. That is not a small difference. Content above the fold gets seen by virtually everyone. Content below the fold gets seen by a decreasing percentage of visitors as you go further down.

First impressions are formed in milliseconds. Research shows that users form an opinion about your website in 50 milliseconds. That opinion is formed entirely based on what they see above the fold. If it looks unprofessional, confusing, or irrelevant, they leave before scrolling.

Scrolling is not engagement. People scroll out of habit, but scrolling does not equal reading or engaging. The percentage of visitors who meaningfully engage with content drops sharply after the first scroll. Your most important message and action need to be where the most eyeballs are.

This does not mean everything has to be above the fold. It means your above-the-fold content needs to accomplish two things: (1) communicate enough value that the visitor decides to stay, and (2) provide a clear action they can take immediately.

The 5 Elements That Belong Above the Fold

Based on conversion research across thousands of pages, these five elements should be visible before any scrolling:

1. A Clear, Specific Headline

Your headline is the single most important element on the page. It must answer the visitor's immediate question: "Am I in the right place?"

Effective above-the-fold headlines:

• State the specific benefit or outcome, not the product features
• Identify the target audience (explicitly or implicitly)
• Use concrete language over abstract promises

Weak: "Welcome to Our Platform"

Strong: "Ship Code 3x Faster Without Breaking Production"

The second headline immediately tells a developer that this product is for them, what it does, and what outcome to expect. The first headline tells nobody anything.

2. A Supporting Subheadline

The subheadline provides context that the headline cannot. It typically explains the how or adds a qualifying detail:

• "AI-powered code review catches bugs before they reach staging. Used by 2,000+ engineering teams."
• "The all-in-one CRO platform for ecommerce. Audit, test, and optimize in one place."

The subheadline should be 1-2 sentences maximum. Its job is to reinforce the headline, not replace it.

3. A Primary Call to Action

Your primary CTA must be visible above the fold. If visitors have to scroll to find the action you want them to take, a significant percentage will never take it.

The CTA should:

• Use action-oriented copy ("Start free trial" not "Learn more")
• Be visually distinct from everything else on the page (high contrast button)
• Include one CTA, not three competing actions

If you have a secondary action (like "Watch demo"), it can appear alongside the primary CTA but should be visually subordinate.

For guidance on writing CTAs that drive action, see our guide on how to write a CTA that converts.

4. Visual Proof of Value

Visitors need to see what they are getting. Depending on your page type, this could be:

• Product screenshot or interface preview for software products
• Hero image of the product for physical products
• Before/after comparison for transformation-based services
• Key metric or social proof number ("Trusted by 50,000 teams")

Abstract graphics and stock photos waste above-the-fold space. They add visual bulk without communicating value. A screenshot of your actual product is always more effective than an illustration of a concept.

5. Trust Signals (Compact)

A compact trust element above the fold immediately addresses the "Can I trust this?" question. This does not need to be a full testimonials section. It needs to be a quick signal:

• A logo bar of recognizable customers (5-8 logos)
• A rating badge ("4.8/5 on G2, 500+ reviews")
• A user count ("Joined by 12,000+ marketers")
• A security badge for sensitive industries

The trust signal takes up minimal space but answers a critical question in the visitor's mind.

Above the Fold for Landing Pages

Landing pages have the clearest above-the-fold requirements because they have a single conversion goal. Here is the optimal structure:

Layout: Headline on the left, product visual or form on the right (for desktop). On mobile, headline and CTA on top, visual below.

Must include:

• Headline with specific benefit
• Subheadline with context
• Primary CTA button
• Supporting visual (product screenshot, hero image, or form)
• One compact trust element

Must exclude:

• Full navigation menus (use minimal navigation or none)
• Multiple competing CTAs
• Long paragraphs of text
• Auto-playing video or animations that slow page load

The above-the-fold section of a landing page should take no more than 5 seconds to understand and no more than 1 click to convert. Everything else goes below the fold to support the decision.

If your landing page is underperforming, the above-the-fold section is the first place to investigate. See our guide on what to do when your landing page is not converting for a systematic troubleshooting approach.

Above the Fold for Homepages

Homepages are harder because they serve multiple audiences and goals. The above-the-fold section needs to work as a router: it should quickly communicate what you do and help different visitor types find their path.

Effective homepage above-the-fold structure:

• Primary headline that communicates your core value proposition to your largest audience segment
• Subheadline that adds specificity
• Primary CTA for your highest-value conversion action
• Secondary navigation or audience paths ("For Startups" / "For Enterprise") if you serve distinct segments
• Social proof bar with customer logos or aggregate metrics

The biggest mistake on homepage above-the-fold sections is trying to say everything. You cannot serve five audiences in 600 pixels. Choose your primary audience, lead with their value proposition, and let the navigation and below-fold content serve secondary audiences.

Above the Fold for Product Pages

Ecommerce product pages have specific above-the-fold requirements driven by purchase psychology:

Essential elements:

• Product name and category for orientation
• Primary product image (large, high-quality, zoomable)
• Price (visible without scrolling, including any sale or comparison pricing)
• Add to Cart button (high contrast, large enough for mobile tap targets)
• Key product attribute (size, color, main variant selector)
• Availability indicator ("In Stock" or shipping estimate)

Optional but high-impact:

• Star rating and review count (even just "4.7 stars, 234 reviews" as text)
• Free shipping indicator if applicable
• Urgency signal if genuine ("Only 3 left" or "Sale ends in 2 days")

The critical principle: a visitor should be able to add the product to their cart without scrolling. Every scroll required between seeing the product and clicking "Add to Cart" is a friction point that reduces conversion.

Above the Fold for Blog Posts

Blog posts have different above-the-fold goals. The conversion here is not a purchase but continued reading. Your above-the-fold section needs to earn the scroll.

Effective blog post above-the-fold:

• Headline that promises a specific, valuable takeaway
• First paragraph that hooks the reader with a problem, question, or surprising insight
• Reading time estimate (optional but helpful for longer content)
• Author credibility indicator if the author is an expert

What to avoid above the fold on blog posts: massive hero images that push the content down, social share buttons that take up a full row, newsletter popups that appear before the visitor has read a single word.

The goal is to get the reader into the content as quickly as possible. Every pixel of above-the-fold space used for non-content elements is a pixel that could be showing the reader why they should keep reading.

Common Above-the-Fold Mistakes

Mistake 1: Slider or carousel heroes. Sliders kill conversions. Users rarely interact with them, the first slide gets 90% of the views, and they push your actual value proposition down the page. Replace them with a single, strong hero section.

Mistake 2: Vague or clever headlines. "Innovation Meets Simplicity" means nothing. "Track Your Calories in 10 Seconds" means everything. Clarity always beats cleverness above the fold. Your visitor should understand exactly what you do and who it is for without thinking.

Mistake 3: Giant navigation bars. Navigation is important, but when it consumes 100+ pixels of above-the-fold space on mobile, it is stealing from your value proposition. Use compact navigation, sticky headers, or hamburger menus to preserve space for what matters.

Mistake 4: No CTA visible. If your primary CTA requires scrolling to reach, you are losing conversions from visitors who would have clicked immediately. Always include at least one action above the fold, even if a more detailed CTA appears below.

Mistake 5: Autoplay video with no fallback. Videos that play automatically slow page load, consume mobile data, and annoy visitors who are in public or at work. If you use video above the fold, make it click-to-play with a compelling thumbnail.

Mistake 6: Stock photos instead of product visuals. A stock photo of smiling people in an office communicates nothing. A screenshot of your actual product communicates everything. Use real visuals that show what the visitor will actually get.

How to Test Your Above-the-Fold Content

Testing above-the-fold content is high-leverage because it affects every visitor. Here is a practical testing framework:

What to test first (highest impact):

1. Headline. Test different value propositions, not just word variations. "Save 10 hours per week" versus "Automate your reporting" tests different framing of the same benefit.
2. CTA copy and placement. Test specific versus generic copy ("Start my free trial" vs "Get started") and test CTA above the fold versus below.
3. Hero visual. Test product screenshot versus no image, or product screenshot versus customer photo.

What to test second (medium impact):

4. Subheadline variations. Test social proof subheadline ("Used by 5,000 teams") versus benefit subheadline ("See results in 24 hours").
5. Trust signal type. Customer logos versus review scores versus user count.
6. Layout. Left-aligned text with right-side image versus centered text with image below.

How to measure:

• Primary metric: Conversion rate (whatever your macro conversion is)
• Secondary metric: Scroll depth (are people engaging with the rest of the page?)
• Diagnostic metric: Time on page (does the variant hold attention or repel it?)

Run each test for at least 2 weeks or until you hit 95% statistical significance, whichever comes later. Above-the-fold changes tend to produce clear signals relatively quickly because all traffic is exposed to them.

Mobile Above the Fold: A Different Challenge

Mobile above-the-fold optimization deserves special attention because the constraints are fundamentally different:

Vertical space is severely limited. On a typical mobile screen (375x812), the above-the-fold area is roughly 500-600px tall after accounting for the browser chrome (URL bar, status bar). That is barely enough for a headline, a short paragraph, and a CTA.

Thumb-friendly tap targets are essential. The CTA button needs to be at least 48px tall and positioned in the lower half of the screen (thumb zone). A beautiful CTA that requires the user to stretch their thumb to the top of the screen gets fewer taps.

Images take up proportionally more space. A hero image that works on desktop (taking up 40% of the viewport) will dominate the entire mobile viewport and push your headline and CTA below the fold. Either use a smaller mobile-specific image or remove it entirely and lead with text.

Mobile priorities above the fold:

1. Headline (adapted for mobile, possibly shorter)
2. Subheadline (one sentence max on mobile)
3. CTA button (large, high contrast, thumb-friendly)
4. Optional: compact trust signal (one line)

That is it. No hero image, no logo bar, no secondary navigation. On mobile, above the fold is ruthlessly prioritized for the single most important action.

If your mobile conversion rate significantly lags desktop, the above-the-fold experience is typically the first bottleneck. For ecommerce-specific mobile optimization, see our guide on mobile checkout optimization.

Using CROgrader to Audit Your Above-the-Fold Content

Your above-the-fold section might look good to you, but you see it with full context of what your product does. A new visitor sees it with zero context, and they decide in seconds whether to stay.

CROgrader analyzes your above-the-fold content for headline clarity, CTA visibility, visual hierarchy, and mobile responsiveness. In 60 seconds, you get a specific report showing what your first-time visitors experience and what needs to change to keep more of them on the page.

Start with a free CROgrader audit and see exactly how your above-the-fold section performs against conversion best practices.

FAQ

Does the fold still matter if people are used to scrolling?

Yes. While people do scroll more than they used to, attention is still concentrated above the fold. Research shows visitors spend 57% of their viewing time on above-the-fold content and 74% in the first two screenfuls. The fold determines whether someone stays and scrolls or leaves. It is the gateway to all the content below it.

How much content should I put above the fold?

Enough to communicate your value proposition and provide one clear action, but no more. For most pages, that means a headline, a subheadline, a CTA, and a supporting visual or trust signal. The goal is clarity, not density. Cramming too much above the fold creates visual clutter that is worse than having too little.

Should I put the price above the fold?

For ecommerce product pages, yes. The price is one of the most critical pieces of information in the purchase decision, and hiding it creates unnecessary friction. For SaaS landing pages, it depends on your sales model. If pricing is straightforward and competitive, showing it above the fold demonstrates confidence. If pricing requires context, link to a pricing page instead.

How do I optimize above the fold for different screen sizes?

Use responsive design that adapts the above-the-fold layout by breakpoint. On desktop, use a two-column layout (text left, visual right). On tablet, use a similar layout with adjusted proportions. On mobile, stack elements vertically with the headline and CTA first, visual second. Test on actual devices, not just browser resize.

What is the most important above-the-fold element to test?

The headline. It has the highest impact on whether visitors stay or leave. Test different value propositions (not just word variations) to find the framing that resonates most with your audience. A headline test that finds a significantly better value proposition can lift conversion rates by 20-40%.