What a Hero Section Owes Your First-Time Visitor

What is the Hero Section of a Website?

The hero section is the area at the top of a page, visible before scrolling, that carries the headline, a supporting line, the primary call to action, and usually a product visual. It is the first and often only impression a visitor forms, so it decides whether they keep reading.

What Should a Hero Section Include?

Four things, in this order: what it is, who it is for, one action, and a piece of proof. Anything beyond that is competing for space with the parts that do the work.

The headline says plainly what the product does. The subhead adds the qualifier the headline could not carry, usually the audience or the specific outcome. The button gives one obvious next step. And a small piece of proof, a few logos or a hard number, tells the visitor that other people already trust this. That is a complete hero. Most sites have three of those four and wonder why the page underperforms.

The word that gets misused here is “hero.” Teams hear it and think of a big image. The image is the least important part. A homepage hero design with a stunning illustration and a vague headline is a beautiful way to lose someone.

What Makes a Good Hero Section?

A good hero can be repeated back by a stranger who saw it for five seconds. That is the whole bar, and it is harder to clear than it sounds.

The failure mode is almost always the same: reaching for a feeling instead of a fact. “Reimagine how your team builds” sounds bold in a meeting and means nothing to a visitor who does not yet know what you sell. “Schedule and publish your social posts from one place” is not poetry, but a person can act on it. Specific beats grand, every time, because specific is something someone can picture.

There is a real tension worth naming. Founders resist the plain sentence because it feels like it undersells the vision. It does not. The plain sentence is what earns you the scroll where the vision can actually be told. Nobody gets sold the vision above the fold. They get sold on whether it is worth staying.

Strong Hero vs Weak Hero

Put two heroes side by side, and the difference is never how they look. It is whether a stranger can answer three questions after five seconds.

‍

Notice that none of these rows is about aesthetics. You can build the strong version in a plain layout, and it will outperform a gorgeous weak one, which is the part most teams find hard to accept.

If your hero takes a paragraph to explain, that is the problem, not your traffic. That is exactly what a clarity audit finds, where visitors lose the thread in the first few seconds. 

Get a clarity audit

How Do You Write a Hero Section?

Write it in this order, and write the headline last. Most people do the reverse and end up with a clever line that no supporting content can rescue.

1. Write the plain sentence first. What does the product do, for whom? No adjectives. This is the raw material, not the final copy.
2. Cut it until a stranger could repeat it. If it needs a comma and a clause to survive, it is still too complicated.
3. Add the qualifier in the subhead. The audience, the outcome, or the thing that makes you different. This is where the nuance lives.
4. Choose one action. Trial, demo, or signup. Pick the one that matches how ready your visitor actually is, and demote the rest.
5. Show a real screen. The product doing one clear thing beats any illustration. Show it before you explain it.
6. Put proof underneath. Logos or a number, close to the button, where the doubt lives.

This is the sequence we use at Peppermint on almost every website above the fold, and the first two steps are where the real work is. Once the sentence is right, the rest of the hero mostly writes itself.

How Long Should Hero Copy Be?

Short enough to read without effort. A headline of roughly five to ten words, a subhead of one line. If it takes a paragraph to explain your product, the problem is not the paragraph; it is that the product has not been positioned yet.

Length is a symptom. Teams write long hero copy when they have not decided what matters most, so everything goes in, and the visitor has to sort it out. That sorting is work, and a stranger will not do work for a product they do not yet care about. Decide first, then write short.

What Are the Most Common Hero Section Mistakes?

The same handful show up on nearly every tech site we audit, and each one costs you the most valuable screen you own.

Leading with a feeling instead of a fact is the big one. Close behind it: an internal phrase nobody outside the company understands, usually a feature name or a bit of category jargon the team stopped hearing as jargon years ago. Then there is the hero who talks about the company rather than the visitor, opening with how long you have been in business rather than what you can do for the reader.

Two more are worth naming. A carousel, which is a way of admitting you could not choose a message, so you show three and let the visitor catch whichever one is passing. And an autoplay video that buries the point twenty seconds in, on a screen where you have about five. Both look like effort. Both are avoidance dressed up as design.

Does the Hero Section Still Matter?

Yes, more than most parts of the page. People have not stopped scrolling, but they have got faster at deciding whether a page is worth it, and that decision happens in the hero.

The old debate about whether the fold is real misses the point. The question was never whether people scroll. It is whether they scroll on your site, and that depends entirely on whether the first screen gave them a reason. A visitor who reads a vague headline does not scroll to find clarity. They leave and find a competitor whose first line already made sense.

So the hero section of a website is not just the top of the page. It is the gate to the rest of it. Everything below it is written for people the hero already convinced to stay.

Frequently Asked Questions

What is a hero section?

The hero section is the top area of a page, seen before scrolling, holding the headline, supporting line, primary call to action, and usually a product visual. It carries the first impression, so it decides whether the visitor keeps reading.

What goes above the fold?

What the product does, who it is for, one clear action, and a small piece of proof. Everything above the fold should help a stranger decide whether to stay. Anything that does not serve that is taking up the most valuable space on your site.

How long should a hero headline be?

Roughly five to ten words. Long enough to say what the product does, short enough to read in a glance. If it needs a clause to survive, the message is not settled yet.

Do I need a hero image?

You need a visual that shows the product doing something real. A screenshot of one clear action beats a stock illustration every time. If the image does not help someone understand the product, it is decoration in the most expensive spot on the page.

Should a hero have one CTA or two?

One primary action. You can include a quieter secondary link, like a demo next to a trial, but they should not carry equal weight. Two equal buttons make the visitor choose before they have decided to care.