60 website hero section examples
The first screen, and the only one everyone sees
The hero says what this is, who it is for, and what happens next. It is the only section every visitor sees, which is why it gets more attention than the other sixteen put together.
Every screenshot here is an invented business, generated to show a look rather than to show a client. The real alumni sites, with names and live links, are on the workshop page.
A landing page is one continuous argument. This is one move in it; the other 17 sections are here too.
Hero
60Nothing matches that. Try a shorter word.
The other 17 sections.
Layouts grouped by the job each section does rather than by what it is called. Pick one from each and you have most of a page.
Proof bar
60 examples
Problem
60 examples
How it works
60 examples
Agenda
60 examples
Benefits
60 examples
Features
60 examples
Testimonials
60 examples
Why us
60 examples
Pricing
60 examples
De-risking
60 examples
FAQ
60 examples
Final CTA
60 examples
Point of view
60 examples
Body of work
60 examples
About
60 examples
Why me
60 examples
Where else
60 examples
All 18 sections, or the seven galleries that vary a whole page instead:
Bring the one you picked to the workshop.
An afternoon in central Singapore. Walk in with a brief and a reference, walk out with the site live at your own domain.
S$288 · 1pm – 6pm · Limited to 15 seats
Runs monthly · Next: 25 Sept