Hero Section
The hero section is the first block of a page, the part visible before anyone scrolls, where you say what this is and what to do about it.
In plain English
It is the handshake. A headline that says what you offer, a sentence that makes it concrete, and a button that points at the next step. Everything else on the page is elaboration.
The name comes from print, where the hero image was the big picture at the top. On the web it grew to mean the whole opening area, image or not.
Why it matters
People decide in a couple of seconds whether they are in the right place. The hero is almost all they have to go on, and no amount of good work further down the page rescues a confusing one.
It is also the highest leverage thing you can edit. Rewriting a headline takes ten minutes and can change how the whole page performs.
How it works
-
Say what it isPlain words, not clever ones. Someone who has never heard of you should understand in one line.
-
Make it concreteOne supporting sentence with a specific detail: who it is for, what changes, how long it takes.
-
Give one clear actionOne primary button. A second, quieter link is fine. A row of five is a menu, not a hero.
-
Check it on a phoneThe hero is the part most likely to look wrong on a small screen, because the headline was sized for a wide one.
Cut the welcome
Nobody has ever been persuaded by the words welcome to my website. Use those pixels to say what you do instead.