The first screen of your website — the hero section — is the most important part of the whole site. Not because it’s the only one that matters, but because if it fails, the rest doesn’t matter.

A visitor who doesn’t understand what you do within five seconds doesn’t scroll further. They close the tab.

Here’s the formula for a hero that actually works.

The four components

A good hero section contains four things:

1. A main heading that says what you do. Concrete, not vague.

2. A subhead that specifies for whom and where. Neighbourhood, establishment, or audience.

3. A real photo or video. From the business, not stock.

4. A clear primary CTA. “Book a time”, “Call us”, “Contact us”.

Everything visible without scrolling. Everything clear within five seconds.

The main heading

This is where most websites go wrong. The most common types of bad main headings:

Welcome sentences:

  • “Welcome to us”
  • “Hi and welcome!”

Empty phrases:

  • “Together we create opportunities”
  • “Quality and engagement since 2015”
  • “We help you look your best”

Overly creative phrasing:

  • “An oasis of calm in the city’s pulse”
  • “Where every detail means everything”

None of this says what the business actually does. For a stranger searching for a specific service it’s not actively informative.

A good main heading says:

  • What you are (hair salon, restaurant, clinic, trades company)
  • What you specialise in (if relevant)
  • Where you are (neighbourhood or city)

Examples:

  • “Hair salon in Vasastan — men’s cuts and beard trims”
  • “Italian restaurant in Linnéstaden, Gothenburg”
  • “Dentist in Lund — specialists in dental anxiety”
  • “Plumber across Stockholm — emergency same day”

Concrete beats pretty, every time.

The subhead

Beneath the main heading often comes a subhead giving a bit more context. Good subheads contain:

  • Establishment (“since 2018”, “running since 1992”)
  • Specialty (“specialising in drop-in”, “paediatric care for children”)
  • Availability (“open 7 days a week”, “emergency slots every weekday”)
  • How to book (“drop-in or book via the button”, “call 08-XXX for emergencies”)

Rather 2-3 specific facts than one lyrical pretty sentence. The subhead should deepen the main heading with practical information.

The image

The hero image is often the largest visual part of the page. Three rules here:

1. Real. From the premises, the staff, your work. Not stock.

2. Thematically relevant. The image should show something about your business. A hairdresser shows the premises or the work. A restaurant shows the food or the atmosphere. A tradesperson shows a job.

3. Not a distraction. The image should support, not compete with, the text. The contrast between text and background should be sufficient for readability.

For background video: short, muted, low volume. Not distracting. And always with a still image as fallback.

The primary CTA

A clear primary CTA — one button that dominates — is what guides the visitor to the next step.

Good CTA design:

  • Colour stands out against the rest of the page
  • Text is concrete (“Book a time”, “Call 08-XXX”, “Contact us”)
  • Size is sufficient (at least 44×44 pixels for mobile hit accuracy)
  • Placement is logical — end of the hero section, within the first screen

Common mistakes:

  • Three or four CTA buttons competing for attention
  • “Read more” button that doesn’t say where it leads
  • CTA at the bottom of the page, requiring scrolling
  • CTA in the same colour as the rest (disappears)

One button. Clear. Visible. That wins.

Specific examples

Good: Hairdresser

Main heading: “Men’s hairdresser in Vasastan, Stockholm” Subhead: “Classic men’s cuts, beard trims and styling. Drop-in or book a time since 2018.” Image: The premises seen from the entrance CTA: “Book a time”

Good: Restaurant

Main heading: “Italian restaurant in Linnéstaden” Subhead: “Pasta from scratch, pizza from a wood-fired oven. Open seven days a week.” Image: A signature dish CTA: “Book a table”

Good: Tradesperson (plumber)

Main heading: “Plumber in Stockholm — open 7-19” Subhead: “Emergency jobs the same day. Pipe flushing, bathroom renovation, water leaks. Since 2002.” Image: A professional photo of the plumber at work CTA: “Call 08-XXX XX XX”

Quick audit

Show your hero section to someone who doesn’t know the business. Count five seconds. Close the screen. Ask:

Want to go deeper? Read The website that actually creates customers for the whole picture, or Building trust in 5 seconds for the trust part specifically.