Websites · Glossary
What is a hero section?
A hero section is the large opening block at the top of a web page, usually holding the main heading, a short supporting line, a primary button and an image or background. It introduces what the page is about and what the visitor can do, and it is the first thing everyone sees.
The name borrows from the hero image of print advertising: the biggest, boldest element that carries the message. On a website it is a whole section, not just a picture.
Nuwan Madhusanka · Co-founder
3 min read · Published
What a hero contains
A heading that states the offer or the outcome, a supporting sentence with the key detail, a primary button and sometimes a secondary link, plus a visual that shows the real place, product or result. Some heroes add a small label above the heading or two or three proof numbers below.
Common hero layouts
A statement centred over a colour or full photo, copy beside a photo, a photo filling the screen with copy in a corner, and copy beside a set of proof numbers for services and launches. The right one depends on whether your photos or your words do the selling.
Writing the heading
Say what you do for whom, in plain words: Physiotherapy for runners and desk workers in Fremantle. Clever slogans read well to the owner and mean little to a stranger. If you use a slogan, put the plain description in the supporting line directly under it.
Common mistakes
Stock photos that could be anywhere, a heading over a busy photo that is hard to read, a slider rotating messages, two equal buttons competing, and a hero so tall on phones that the heading or button falls below the first screen.
Where it shows up in OneCraft
Every generated page opens with a hero section, and the hero library has four layouts: a statement over colour or a photo, copy beside a photo, a photo filling the screen with copy in the bottom left, and a heading beside the pitch with up to three proof numbers. The image picker sets a focal point so the subject stays in frame at every width.
Questions people ask
Does every page need a hero section?
Most do, because every page needs an opening that says what it is. Inner pages can use a smaller, quieter hero with just a heading and a line. Link pages are an exception: the profile photo and name at the top act as the hero.
Should a hero section have a video background?
Rarely on a small business site. Background video adds weight, can distract from the heading, and often does not play on phones in low power mode. A strong still photo of the real place or product usually does the job better and loads faster.
What image works best in a hero?
A real photo of your place, product or people, with space for the heading, in sharp focus at the subject. Avoid generic stock that could belong to any business. If the heading sits over the photo, make sure the text stays readable at phone size.
How long should the hero heading be?
Short enough to read in a glance, usually five to ten words. Use the supporting line for the detail. Long headings wrap into many lines on phones and push the button down, so test the heading at phone width before publishing.
Is a slider a good hero?
Usually not. Rotating slides hide most of their messages, since visitors see the first slide and scroll on, and moving content can distract or cause accessibility problems. One clear message with one button almost always performs better than a carousel.
Make one with websites
The button opens the generator with this use case already described. Change the wording to match your own.
Create a website with OneCraftRelated questions
- What does above the fold mean?What does above the fold mean on a website? The part of a page visible before scrolling. What belongs there, how it differs on phones, and why it still matters.
- What is a call to action on a website?What is a call to action on a website? The button or link that asks visitors to take the next step, such as book, call or buy. Placement, wording and examples.
- What is a landing page?What is a landing page? A standalone page built around one action, such as signing up or booking, usually for a campaign. What it needs and what to leave out.
Sources
Written and checked by the OneCraft team. Last checked .