---
title: What Is a Hero Section? Website Examples | WebManics
description: The hero section is the first part of a web page visitors see. What to include, examples that work for service businesses and the mistakes that cost enquiries.
---

[Skip to main content](https://webmanics.com/glossary/hero-section#main-content) [Skip to main menu](https://webmanics.com/glossary/hero-section#main-menu) [Skip to footer](https://webmanics.com/glossary/hero-section#footer-menu)

[![webmanics-logo-rgb](https://webmanics.com/hubfs/agency-website/branding/logos/webmanics-logo-rgb.svg)](https://webmanics.com/)

- [Services](https://webmanics.com/services)
- [Case Studies](https://webmanics.com/case-studies)
- [Why Us](https://webmanics.com/why-webmanics)
- [Pricing](https://webmanics.com/pricing)
- [Resources](https://webmanics.com/blog)

- [Conversion-Optimised Website Build](https://webmanics.com/services/conversion-optimised-website-build)
- [AI Search Optimisation](https://webmanics.com/services/ai-search-optimisation)
- [Website Conversion Audit](https://webmanics.com/website-conversion-audit)
- [CRO Growth Retainer](https://webmanics.com/services/cro-growth-retainer)

[All services](https://webmanics.com/services)

- [Blog](https://webmanics.com/blog)
- [CRO Glossary](https://webmanics.com/glossary)
- [FAQs](https://webmanics.com/faqs)

[All resources](https://webmanics.com/blog)

[Request a consultation](https://webmanics.com/request-a-consultation)

[![webmanics-logo-rgb](https://webmanics.com/hubfs/agency-website/branding/logos/webmanics-logo-rgb.svg)](https://webmanics.com/)

- [Services](https://webmanics.com/services)

    - [Conversion-Optimised Website Build](https://webmanics.com/services/conversion-optimised-website-build)
    - [AI Search Optimisation](https://webmanics.com/services/ai-search-optimisation)
    - [Website Conversion Audit](https://webmanics.com/website-conversion-audit)
    - [CRO Growth Retainer](https://webmanics.com/services/cro-growth-retainer)
- [Case Studies](https://webmanics.com/case-studies)
- [Why Us](https://webmanics.com/why-webmanics)
- [Pricing](https://webmanics.com/pricing)
- [Resources](https://webmanics.com/blog)

    - [Blog](https://webmanics.com/blog)
    - [CRO Glossary](https://webmanics.com/glossary)
    - [FAQs](https://webmanics.com/faqs)

[Request a consultation](https://webmanics.com/request-a-consultation)

1. [Home](https://webmanics.com/)
2. •
3. [Glossary](https://webmanics.com/glossary/)
4. •
5. Hero section

# Hero section

A **hero section** is the large opening area at the top of a web page, usually containing the main headline, a short supporting line, a call to action and an image or video. It is the first thing visitors see, and it decides whether they keep reading.

- [UX and Page Design](https://webmanics.com/glossary/tag/ux-and-page-design)
- [Copy and Messaging](https://webmanics.com/glossary/tag/copy-and-messaging)

Updated 9 November 2026 • 2 min read

On this page

[All glossary terms A–Z](https://webmanics.com/glossary)

## Hero sections in plain English

Visitors decide within a few seconds whether a page is relevant to them. The hero section has to answer, almost instantly, *what is this, is it for me and what should I do next?* If it does, people scroll on. If it is vague, slow or cluttered, they leave.

## What a high-converting hero section includes

1. **A clear headline** that states your [value proposition](https://webmanics.com/glossary/value-proposition) in plain words: what you do and for whom.
2. **A supporting line** that adds the key detail: location, speed, specialism or price cue.
3. **One primary [call to action](https://webmanics.com/glossary/call-to-action)**, with an optional quieter secondary link.
4. **A trust signal**, such as a review rating, accreditation or recognisable client logos ([social proof](https://webmanics.com/glossary/social-proof)).
5. **A relevant image** of real people, premises or results, not generic stock photography.

## Examples for service businesses

- **Weak:** "Welcome to Smith & Co." **Stronger:** "Employment law advice for small businesses in Manchester. Fixed-fee first consultation."
- **Weak:** "Your health is our priority." **Stronger:** "Same-week physiotherapy in Leeds, with evening appointments. Rated 4.9 by 300+ patients."

## Common hero section mistakes

- **Sliders and carousels** that rotate several messages. Most visitors only see the first one.
- **Heavy background video** that slows the page on mobile.
- **Clever but unclear headlines** that make visitors work to understand the offer (see [cognitive load](https://webmanics.com/glossary/cognitive-load)).
- **Several competing buttons**, which slows decisions (see [Hick's law](https://webmanics.com/glossary/hicks-law)).
- **Text that is hard to read** over a busy image.

## Hero sections and "above the fold"

The hero usually fills the area visible before scrolling, often called [above the fold](https://webmanics.com/glossary/above-the-fold). It does not need to hold everything, but it does need to earn the scroll.

## Related terms

- [Above the fold](https://webmanics.com/glossary/above-the-fold)
- [Value proposition](https://webmanics.com/glossary/value-proposition)
- [Call to action (CTA)](https://webmanics.com/glossary/call-to-action)
- [Landing page](https://webmanics.com/glossary/landing-page)

## How WebManics can help

We write and design hero sections from customer research, then check how visitors respond with [heatmaps](https://webmanics.com/glossary/heatmap) and enquiry data. Our [free website conversion audit](https://webmanics.com/website-conversion-audit) reviews your key hero sections, and our [CRO Growth Retainer](https://webmanics.com/services/cro-growth-retainer) keeps improving them.

## Want more enquiries from your website?

Get a free website conversion audit. We’ll show you what’s stopping visitors from getting in touch, and what to fix first. No obligation.

[![Request a free audit](https://hubspot-no-cache-eu1-prod.s3.amazonaws.com/cta/default/143736829/interactive-87103837382.png)](https://webmanics.com/hs/cta/wi/redirect?encryptedPayload=AVxigLJiPtCmiNDsewaxzPIF%2BQBN00E4wy%2FunKs67Y0cH2k%2FfLx%2BpUC5J%2BCpIDofRXyZx%2BZTejdZqgmtE%2BreGRyjh0WX5wugRhDuhjzNVXPBvIJhZ2sJ%2BhqG8XuLKoqiTq%2Br1JudAlsBhAtwfSJNjIS66iI3pJgBTeVEI%2FVLkEbtB%2B0HEkFxf1r5rUJn%2BQqDxM%2FHCj%2FKf4de7ytxMMRY8G2zsCqnd6DAplIhnnXu%2FDN0ylnb37w%3D&webInteractiveContentId=87103837382&portalId=143736829)

## More definitions

[Browse all terms A–Z](https://webmanics.com/glossary)

### [Hick's law Hick's law (also called the Hick–Hyman law) states that the more options a person is given, the longer it takes them to ... Read definition](https://webmanics.com/glossary/hicks-law)

### [Click-through rate (CTR) Click-through rate (CTR) is the percentage of people who click on something after seeing it, such as your listing in Goo... Read definition](https://webmanics.com/glossary/click-through-rate)

### [Microcopy Microcopy is the small bits of text that guide people through a website: button labels, form field hints, error messages... Read definition](https://webmanics.com/glossary/microcopy)

## Clarity first.   Conversion next.

[Request a consultation](https://webmanics.com/request-a-consultation)

[![](https://webmanics.com/hubfs/archive/globals/webmanics-purple-icon.svg)](https://webmanics.com/)

- [Conversion-Optimised Website Build](https://webmanics.com/services/conversion-optimised-website-build)
- [AI Search Optimisation](https://webmanics.com/services/ai-search-optimisation)
- [CRO Growth Retainer](https://webmanics.com/services/cro-growth-retainer)
- [Website Conversion Audit](https://webmanics.com/website-conversion-audit)
- [Case Studies](https://webmanics.com/case-studies)
- [Why Us](https://webmanics.com/why-webmanics)
- [FAQs](https://webmanics.com/faqs)
- [Blog](https://webmanics.com/blog)

© 2026 All rights reserved, WebManics.

- [Privacy Policy](https://webmanics.com/privacy-policy)
- [Cookie Policy](https://webmanics.com/cookie-policy)

Back to top

```json
{
  "@context" : "https://schema.org",
  "@type" : "BreadcrumbList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : "https://webmanics.com",
    "name" : "Home",
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : "https://webmanics.com/glossary",
    "name" : "CRO Glossary",
    "position" : 2
  }, {
    "@type" : "ListItem",
    "item" : "https://webmanics.com/glossary/tag/ux-and-page-design",
    "name" : "UX and Page Design",
    "position" : 3
  }, {
    "@type" : "ListItem",
    "item" : "https://webmanics.com/glossary/hero-section",
    "name" : "Hero section",
    "position" : 4
  } ]
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://webmanics.com/glossary/hero-section#term",
  "@type" : "DefinedTerm",
  "description" : "A hero section is the large opening area at the top of a web page, usually containing the main headline, a short supporting line, a call to action and an image or video. It is the first thing visitors see, and it decides whether they keep reading.",
  "inDefinedTermSet" : {
    "@type" : "DefinedTermSet",
    "name" : "Glossary",
    "url" : "https://webmanics.com/glossary"
  },
  "name" : "Hero section",
  "url" : "https://webmanics.com/glossary/hero-section"
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://webmanics.com/#organization",
  "@type" : "Organization",
  "address" : {
    "@type" : "PostalAddress",
    "addressLocality" : "City",
    "addressRegion" : "State",
    "postalCode" : "Zip code"
  },
  "logo" : {
    "@type" : "ImageObject",
    "url" : "https://143736829.fs1.hubspotusercontent-eu1.net/hubfs/143736829/wm-webmanics/vectors/webmanics-logo-dark.svg"
  },
  "name" : "WebManics",
  "url" : "https://webmanics.com"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "Article",
  "author" : [ {
    "@type" : "Person",
    "name" : "WebManics",
    "url" : "https://webmanics.com/glossary/author/author"
  } ],
  "dateModified" : "2026-11-09T01:03:14+0000",
  "datePublished" : "2026-11-09T01:03:14+0000",
  "description" : "The hero section is the first part of a web page visitors see. What to include, examples that work for service businesses and the mistakes that cost enquiries.",
  "headline" : "What Is a Hero Section? Website Examples | WebManics",
  "inLanguage" : "en",
  "mainEntityOfPage" : {
    "@id" : "https://webmanics.com/glossary/hero-section"
  },
  "publisher" : {
    "@type" : "Organization",
    "name" : "WebManics",
    "url" : "https://webmanics.com/glossary/hero-section"
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "WebManics",
    "url" : "https://webmanics.com/glossary/author/author"
  },
  "dateModified" : "2026-11-09T01:03:14.926Z",
  "datePublished" : "2026-11-09T01:03:14.000Z",
  "headline" : "What Is a Hero Section? Website Examples | WebManics",
  "mainEntityOfPage" : {
    "@id" : "https://webmanics.com/glossary/hero-section",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://webmanics.com/hubfs/wm-webmanics/vectors/webmanics-logo-dark.svg"
    },
    "name" : "WebManics"
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BreadcrumbList",
  "itemListElement" : [ {
    "@type" : "ListItem",
    "item" : "https:///",
    "name" : "Home",
    "position" : 1
  }, {
    "@type" : "ListItem",
    "item" : "https:///glossary/",
    "name" : "Glossary",
    "position" : 2
  }, {
    "@type" : "ListItem",
    "item" : "https:///glossary/hero-section/",
    "name" : "Hero section",
    "position" : 3
  } ]
}
```