What is a hero section?

Hero section, defined

A hero section is the first block a visitor sees at the top of a web page, above the fold. On a SaaS site it usually holds the headline, a short subhead, a primary call to action and a product visual. Its job is to tell visitors what you do and why it matters to them within a few seconds.

A hero section is the opening block of a page. It’s the big headline, the line under it, the button, and usually a picture of the product.

On a B2B SaaS site it does most of the heavy lifting. Plenty of visitors never scroll past it, so if the hero doesn’t make the offer clear, the rest of the page rarely gets a chance.

Why the hero section matters for conversion

Visitors decide very quickly whether a page is for them. The hero is where that decision gets made.

A good hero answers three questions without the visitor having to work for it:

What is this? The product category or outcome, in words the buyer already uses.
Is it for me? A hint at the audience or use case.
What do I do next? One clear action, like “Book a demo” or “Start free trial”.

If any of those are missing, people bounce or start hunting through the nav. Neither helps your pipeline.

What goes in a SaaS hero section

Most strong SaaS heroes use the same parts, in roughly this order:

Element	Job
Eyebrow text	Short label above the headline that sets context, like a category or a launch
Headline (H1)	The main promise. Outcome first, not features
Subhead	One or two lines on how it works or who it’s for
Primary CTA	The single action you most want taken
Secondary CTA	A lower-commitment option, like “See how it works”
Product visual	A real screenshot, short video or interactive demo
Social proof	A logo bar or a rating, often just below

You don’t need all of them. You do need the headline, the CTA and something that shows the product is real.

Hero section vs above the fold

The two terms get used as if they mean the same thing. They don’t.

Above the fold is a screen measurement: whatever is visible before the first scroll. It’s different on a laptop, a big monitor and a phone.

The hero section is a design decision: a specific block you write and lay out. On desktop it usually fills the space above the fold. On mobile, the fold often cuts through the middle of it, which is why the headline and CTA should come first in the markup.

Common hero section mistakes

A clever headline nobody understands. Wordplay makes visitors think. Plain beats clever on a homepage.
Too many buttons. Three equal CTAs means no CTA. Pick one primary action and make the rest quieter.
Abstract art instead of the product. Gradients and 3D blobs look nice and explain nothing. Show the actual product.
Saying what you are, not what you do. “The AI-native platform for X” tells the reader less than “Close your books in three days, not ten.”
A heavy hero that loads slowly. Big autoplay videos and unoptimised images hurt Largest Contentful Paint, which is usually the hero itself.

How to test your hero section

Show the page to someone outside your team for five seconds, then hide it. Ask what the company does and what they’d click.

If they can’t answer both, rewrite the headline before changing anything else. Once traffic allows, A/B test one change at a time, headline first, since it usually moves the needle most.

Questions about hero section

What should a SaaS hero section include?

A headline that says what the product does for the reader, a one or two line subhead that adds how or for whom, one primary call to action, and a visual of the product. Social proof such as a logo bar often sits just underneath.

How long should a hero headline be?

Short enough to read at a glance, usually under ten words. If the headline needs the subhead to make sense, it is probably too vague.

Is a hero section the same as above the fold?

Not quite. Above the fold is whatever shows on screen before scrolling, which changes with screen size. The hero section is a designed block that usually fills most of that space.