What Does “Above the Fold” Mean in Web Design?

When someone lands on your website, the content they see before scrolling has an important job to do. In web design, this area is commonly referred to as “above the fold”, and it often contains what is known as the hero banner or hero section. Done well, this part of a website quickly explains who you are, what you offer and what the visitor should do next, all within the first few moments of their visit.

Key points

• Above the fold refers to the content visible when a webpage first loads, before the visitor begins scrolling.
• The hero banner is usually the main feature of this area and commonly includes a headline, supporting copy, imagery and a call to action.
• A strong hero section should communicate your unique selling proposition (USP) quickly and clearly.
• Calls to action such as Get a Quote, Book Online, Shop Now or Learn More give visitors an obvious next step.
• Trust signals, testimonials, reviews, client logos or credentials can help reassure visitors before they explore further.
• Above-the-fold design plays an important role in conversion rate optimisation (CRO) because it can directly influence whether a visitor engages, scrolls, clicks or leaves.
• The best hero sections balance visual impact with clarity. They should look good, but they also need to communicate useful information immediately.

What does “above the fold” mean?

The term above the fold actually comes from the newspaper industry.

Newspapers displayed for sale were traditionally folded in half, meaning only the content above the physical fold could initially be seen. Publishers naturally placed their strongest headlines, photographs and stories in this area because they needed to attract attention before someone decided to pick up or purchase the newspaper.

The same concept was later adopted in web design.

Today, above the fold refers to the portion of a webpage that is visible without scrolling when the page first loads.

There is no single fixed height for the fold because it changes depending on the visitor’s device, browser window and screen resolution. Someone viewing your website on a 27-inch desktop monitor will see a very different amount of content compared with someone visiting from an iPhone.

This is why I generally think of above-the-fold design as a priority area rather than an exact pixel measurement.

The question is not simply: “Does everything fit above the fold?”

The more useful question is: “Does the visitor understand enough from the first screen to want to continue?”

That distinction is important.

What is a website hero banner?

A hero banner, also called a hero section, is the prominent section normally positioned directly underneath a website’s header or navigation.

It is often the largest visual element on the page.

A hero section will typically combine a strong headline with supporting text, imagery or video and one or more calls to action.

Its purpose is to quickly establish context.

Within a few seconds, a visitor should ideally be able to understand:

What does this business do?

Who is it for?

Why should I consider them?

What should I do next?

A hero banner therefore isn’t simply a decorative header image. It is one of the most important communication and conversion elements on many modern websites.

What is the most common structure of an above-the-fold hero section?

Although hero sections can vary significantly between websites, the strongest examples normally use a fairly simple structure.

1. Website navigation

The navigation sits at the top of the page and allows visitors to access important areas of the website.

Depending on the business, this might include links such as:

• Services
• Products
• About
• Resources
• Pricing
• Contact

For ecommerce websites, you may also see prominent actions such as Sign In, Create Account, Get Started or Shop Now.

The navigation itself forms part of the above-the-fold experience, so it should be simple enough that visitors can quickly understand where they need to go.

2. Primary headline

The headline is normally the most prominent piece of text within the hero section.

This is where the website should communicate its primary value proposition.

Generic headings such as “Welcome to Our Website” do very little to help a new visitor.

A much stronger headline communicates something meaningful about the product, service or benefit.

The user should not have to search through the page to discover what the company actually does.’

Your USP should be immediately clear

One of the most important jobs of a hero section is communicating the business’s unique selling proposition, or USP.

A USP answers a very simple question:

Why should someone choose this business rather than another option?

It does not necessarily need to be a clever advertising slogan.

In fact, clarity will usually outperform cleverness.

For a local service business, the USP might involve:

• Specialist expertise
• A particular service area
• Fast turnaround times
• Personal service
• Years of experience
• Fixed pricing
• An industry specialisation
• A guarantee
• An easier or more convenient process

For a software company, the USP might instead focus on simplicity, automation, scalability, integrations or improved productivity.

Whatever the selling point may be, the visitor shouldn’t need to scroll halfway down the page to discover it.

3. Supporting hero copy

Underneath the primary heading, most hero banners include a short paragraph or subheading explaining the offer in more detail.

This is your opportunity to provide context without overwhelming the visitor.

A useful supporting statement might explain:

• What the service does
• Who it is designed for
• The main problem it solves
• How it differs from alternatives
• The primary outcome or benefit
• The important word here is supporting.

Your hero section usually isn’t the place for three or four long paragraphs of copy. The goal is to provide enough information to encourage the visitor to continue exploring the website.

4. A clear call to action

Once you’ve explained what you offer, there should normally be an obvious next step.

This is your call to action, commonly shortened to CTA.

Examples include:

• Get a Quote
• Book a Consultation
• Shop Now
• View Our Services
• Start Free Trial
• Contact Us
• Explore Packages

The wording should reflect what the visitor is realistically ready to do at that stage of their journey.

A person visiting an emergency plumbing website may be ready to Call Now.

Someone researching a complex B2B service may be more comfortable with Learn More or Book a Consultation.

The best CTA is therefore not necessarily the most aggressive one. It is the action that makes the most sense for the visitor.

Quick Example #1: Mailchimp

Mailchimp‘s homepage hero section, combining a strong value proposition, supporting copy, primary CTA and third-party review signals.

Mailchimp provides a good example of how several above-the-fold elements can work together.

The main headline immediately focuses on its core offering:

Email & SMS marketing minus the learning curve

This does two things particularly well.

Firstly, it tells visitors what Mailchimp provides: email and SMS marketing.

Secondly, it communicates a benefit: making that marketing easier to use.

The supporting text then expands on the proposition by mentioning analytics, automation and AI tools.

The Sign Up button gives users a very obvious next action.

Mailchimp also introduces review information and recognised third-party platforms such as Capterra and TrustRadius directly within the hero area.

That additional information performs another important job. It builds trust.

5. Hero imagery and visual hierarchy

Hero banners commonly contain:

• Photography
• Product images
• Illustrations
• Videos
• Screenshots
• Animation
• Abstract graphics

However, imagery should support the message rather than compete with it.

One of the most common mistakes I see in website design is selecting a visually impressive image first and then attempting to fit the content around it.

The process should really work the other way around.

Start with the message.

Then choose imagery that helps communicate or reinforce that message.

A builder might show a completed project. A restaurant might feature one of its signature dishes. A software company might demonstrate its interface. A professional service provider might use authentic photography of its team or workplace.

Good visual hierarchy then ensures the headline, supporting information and CTA remain easy to identify.

Quick Example #2: Stripe

Stripe‘s homepage demonstrates a different hero-banner approach, using typography and distinctive visual design to communicate a complex product offering.

Stripe takes a noticeably different approach from Mailchimp.

Rather than using photography as the dominant feature, Stripe uses bold typography combined with its recognisable colourful visual treatment.

Its headline communicates the broader value proposition:

Financial infrastructure to grow your revenue.

Supporting content then explains that Stripe can help businesses accept payments, offer financial services and implement different revenue models.

Two calls to action are clearly visible: Get started and Sign up with Google

Stripe then places recognisable customer and technology brands immediately below the primary hero content.

This provides another form of social proof.

The design is visually sophisticated, but the underlying structure remains surprisingly conventional:

1. Navigation
2. Value proposition
3. Supporting explanation
4. CTA
5. Trust signals

That structure is worth remembering because it works across many industries.

6. Trust signals and social proof

Visitors rarely make decisions based on your headline alone.

They are also subconsciously asking:

Can I trust this business?

This is where trust signals become useful.

Depending on the website, these may include:

• Google review ratings
• Customer testimonials
• Client logos
• Industry accreditations
• Awards
• Years in business
• Number of customers served
• Guarantees
• Secure payment logos
• Professional associations
• Case study results

You certainly don’t need to cram all of these into your hero banner.

However, one strong piece of social proof positioned around the bottom of the hero area can provide additional reassurance without cluttering the design.

Stripe uses customer logos.

Mailchimp uses independent review platforms.

A local business might instead use something as simple as: Rated 4.9/5 from 180+ Google reviews

One thing to remember is the right trust signal depends on the audience.

Why is above-the-fold content important?

The importance of above-the-fold design comes down to one fundamental reality:

Visitors make decisions quickly.

When someone lands on a website, they are immediately trying to determine whether the page is relevant to what they need. If the opening screen is confusing, slow, generic or visually overwhelming, there is very little reason for them to keep exploring.

A strong above-the-fold section reduces that uncertainty. It gives visitors context, creates confidence and encourages further interaction.

Above the fold and conversion rate optimisation

This is also where conversion rate optimisation (CRO) becomes relevant.

Conversion rate optimisation is the process of improving a website so that a greater percentage of visitors complete a desired action.

That action might be:

• Calling your business
• Submitting an enquiry
• Booking an appointment
• Purchasing a product
• Creating an account
• Downloading something
• Requesting a quote
• Starting a trial

Because the hero section is normally one of the first things every visitor sees, relatively small changes here can potentially influence a large proportion of your website traffic.

For example, CRO improvements might involve testing:

• A clearer headline
• Different CTA wording
• One CTA instead of several
• More visible contact details
• Stronger trust signals
• Different imagery
• Shorter supporting copy
• A more prominent button
• Different mobile layouts

The aim isn’t to make the hero section louder, it is to make it clearer and easier to act upon.

Above the fold should capture attention, not contain everything

A common misconception is that every important piece of information needs to appear above the fold. It doesn’t.

Trying to squeeze your services, reviews, company history, contact form, awards, FAQs and every possible CTA into the opening screen usually creates the opposite result.

The hero section should provide a compelling reason to continue. Think of it as the beginning of the conversation rather than the entire conversation.

A visitor should understand enough to either:

• take the primary action, or
• continue scrolling because the website appears relevant to them.

That is a successful hero section.

What are the key benefits of a well-designed hero banner?

There are several reasons why businesses should pay particular attention to this part of their website.

1. It explains your business quickly
2. It communicates your competitive advantage
3. It guides visitor behaviour
4. It builds confidence
5. It increases engagement
6. It supports conversions
7. It reinforces your brand

Above-the-fold design on mobile devices

Hero sections also need to be designed specifically with mobile users in mind.

A layout that works beautifully across a large desktop monitor can become awkward when compressed onto a phone.

On mobile, priorities become even more important:

• Your main heading should generally remain visible without forcing the user through unnecessary visual content first.
• Buttons need to be easy to tap.
• Text needs to remain readable.
• Images should load efficiently.
• Navigation should be simple.

You may also need to adjust or reposition elements rather than simply stacking everything from the desktop version.

Responsive design isn’t just about making a website fit smaller screens. It is about maintaining the same communication hierarchy across different devices.

Common above-the-fold hero banner mistakes

Some of the most common issues I encounter are surprisingly simple.

• Vague headlines
• Too many calls to action
• Failure to establish a clear primary action
• Using sliders unnecessarily
• Oversized hero sections
• Text over busy imagery
• Weak CTAs
• Designing only for desktop and neglecting table and mobile devices

Above the Fold Frequently Asked Questions

What does above the fold mean on a website?

Above the fold is the portion of a webpage visible immediately after the page loads, before the visitor scrolls. The exact area varies depending on the visitor’s screen size, device and browser.

What is a hero banner?

A hero banner is the prominent section near the top of a webpage, usually underneath the navigation. It commonly contains a headline, supporting text, imagery and a call to action.

What should a website hero banner include?

Most effective hero sections include a clear value proposition, concise supporting copy, a primary CTA and relevant visual content. Trust signals such as reviews, testimonials or client logos can also be useful.

Why is above-the-fold content important?

Above-the-fold content helps visitors quickly understand what a website offers and whether it is relevant to them. Clear messaging can improve engagement and encourage visitors to take the next step.

Should the call to action be above the fold?

In most cases, yes. If there is an obvious action you want visitors to take, making that CTA visible within the initial screen reduces unnecessary friction.

Does everything important need to be above the fold?

No. The goal is not to squeeze every piece of information into the first screen. Above-the-fold content should communicate enough information to encourage the visitor to take action or continue exploring the page.

Is above-the-fold content important for SEO?

Above-the-fold design is primarily a user experience and conversion consideration, but good UX supports the overall effectiveness of a website. Your main heading and introductory content also help establish the topic and purpose of the page for both users and search engines.