Hero Section 101: How to Design a Hero Section That Converts

Your hero section is the trailhead sign of your website.

It’s the first big block people see at the top of the page, and it often decides whether they stay and explore or bounce back to Google. When your hero section is clear, visitors feel oriented fast. They understand what you do, who it’s for, and what to do next.

But when the hero section is vague, cluttered, or slow to load, people feel lost. And when people feel lost online, they do what they would do in the woods without a map. They turn around.

In this guide, you’ll learn what a hero section is, what to include, and how to design one that converts, with practical examples you can use right away.

TL;DR: Your Hero Section

• Your hero section should tell visitors what you do in one clear promise, with no guessing.
• Pair that promise with one obvious next step, like a single strong button.
• Use a visual that supports the message fast, not one that distracts or slows the page.
• Add 1 to 3 trust cues (reviews, logos, or a simple stat) so people feel safe taking action.
• Build mobile-first and keep it lightweight so it loads quickly, reads easily, and stays clickable.

What Is a Hero Section?

The hero section is the first “big block” visitors see at the top of a page, and it often decides whether they stay or bounce.

Simple definition

A hero section is the large, prominent section at the top of a webpage, usually right under the header (logo and navigation).

Most designs include:

• A headline (your main promise)
  
• A subheadline (extra clarity)
  
• A primary call-to-action button (the next step)
  
• A visual (photo, screenshot, illustration, or video)
  
• Trust cues (optional proof like reviews, logos, or stats)
  

It’s your clearest first message plus a clear trail marker that says “go this way.”

Hero section vs “above the fold” (why it changes by device)

You will hear “above the fold” a lot in web design. It means what people can see without scrolling.

But here’s the catch: the fold is not a fixed line.

It changes based on screen size, browser bars, device type, and even how someone holds their phone. What fits above the fold on a big monitor might be buried on a smaller laptop or mobile screen.

The important idea is not a measurement. It’s this: people scroll only if what they see first feels promising. 

Nielsen Norman Group explains that users do scroll, but what’s at the top still matters because it creates the first impression and sets the cost of interaction.

You want the first screen to feel like a clear invitation, not a wall.

Hero section vs hero image vs header (quick comparison)

These terms get mixed up, so here is the clean map:

• Header: The top bar with your logo and navigation.
  
• Hero image: The main visual inside the hero section.
  
• Hero section: The whole top block, including headline, subheadline, CTA, visual, and proof.

Why Do They Call It a Hero Section?

The name sounds dramatic, but it’s really about prominence and focus.

“Hero” means the main feature that leads the page

In storytelling, the hero is the main character. In web design, the “hero” is the main feature that leads the page.

It is the part of the page that should carry the most weight at first glance.

How “hero image” led to “hero section” in web design language

Years ago, designers started putting large “feature images” at the top of websites. That became known as the “hero image.”

Over time, teams realized the image alone was not enough. The top of the page needed a complete package: message, action, and proof.

What the name implies (big, clear, priority content)

Calling it a hero section implies:

• It’s prominent (easy to spot)
  
• It’s priority (most important content)
  
• It’s clear (not hidden behind fancy design tricks)
  

“Hero” is just shorthand for the most important, most visible section on the page.

Do I Need a Hero Section?

Not every page needs a big hero, but most pages need a clear first message.

When a hero section helps (homepages, service pages, landing pages)

A hero section helps most when the visitor might land on the page cold, like:

• Homepages
  
• Service pages
  
• Landing pages from ads
  
• Product pages
  
• Campaign pages (events, promos, signups)
  

These pages need strong orientation. A good hero section does that job fast.

When a hero section can be smaller or skipped (utility pages, dashboards, content hubs)

A hero section can be smaller or skipped on pages where the user is already oriented, such as:

• Login pages
  
• Account dashboards
  
• Checkout flows
  
• Internal tools
  
• Content hubs where browsing is the main goal
  

On these pages, a giant hero section can slow people down and get in the way.

The real requirement (clarity and a next step, with or without a big visual)

Here’s the real rule:

You do not need a big hero section.

You need a clear first impression.

That means a clear message and a clear next step. The hero section format is just one of the best ways to deliver that quickly.

Most pages need clarity at the top. A hero section is the cleanest way to deliver it.

Landing Page vs Hero Section: What’s the Difference?

People mix these up because landing pages usually start with a hero section, but they are not the same thing.

What a landing page is (a full page built around one goal)

A landing page is the whole path. It is a full page built around one goal, like:

• Book a call
  
• Request a quote
  
• Buy a product
  
• Start a trial
  
• Download a guide
  

Everything on the page supports that one goal.

What a hero section is (one section that introduces the offer)

A hero section is one section.

It introduces the offer, sets the direction, and points to the next step.

How they work together (hero sets direction, page does the convincing)

Here’s the trail metaphor:

• The landing page is the trail.
  
• The hero section is the trailhead sign.
  

The hero section says: “Here’s what this is. Here’s who it’s for. Here’s what to do next.”

Then the rest of the page proves it with details, examples, and trust.

Common examples (ads to landing pages, homepage to service pages)

• Google ad click to a landing page where the hero section matches the promise of the ad
  
• Homepage hero section that routes people to service pages
  
• Service page hero section that routes people to “Book a call” or “Get a quote”
  

A landing page is the whole journey. The hero section is the first sign that keeps people from getting lost.

What Should a Hero Section Look Like?

Good hero sections follow proven patterns because patterns reduce confusion.

5 hero layout patterns that work

You do not need to reinvent the wheel. Use a pattern that already works and make it yours with good messaging and real visuals.

Split layout (text left, visual right)

This is the classic layout:

• Headline, subheadline, CTA on the left
  
• Visual on the right

It works for services, ecommerce, and B2B because it’s easy to scan.

Centered stack (simple and bold)

Centered headline, subheadline, CTA under it.

This works when the offer is simple and the copy is strong. It also works well on mobile because it stacks naturally.

Product screenshot (SaaS and apps)

If your product is a screen, show the screen.

A screenshot hero section works best when:

• The screenshot is readable
  
• It shows the key moment (the “aha” part)
  
• The headline explains the benefit, not the features
  

Proof-led hero (reviews, logos, credibility first)

This pattern leads with trust, then message.

Examples of proof-first elements:

• Star rating
  
• “Trusted by” logos
  
• One strong stat (like time saved)
  

This is great when skepticism is the main barrier.

Minimal hero (one promise, one CTA)

This is the cleanest hero section style:

• One benefit-first headline
  
• One CTA
  
• Simple visual or even no visual
  

Minimal heroes work well when you want speed and clarity, and you do not want distractions.

The “clean design” rules (spacing, hierarchy, readability)

A hero section that converts usually follows these rules:

• The headline is the largest thing
  
• The CTA is the clearest button
  
• There is enough spacing so it does not feel cramped
  
• Text is readable on top of the visual
  
• The page does not shift around while loading
  

That last one matters more than people think. When the hero section loads and jumps, it feels broken. That hurts trust fast.

Best Examples & INspirational Designs

Dribble

How to avoid the “template look” while keeping clarity

Templates are fine. Confusion is the enemy.

To avoid the “generic template” feel:

• Use real images from your work, team, or products
  
• Write a specific headline that only fits your business
  
• Add a meaningful proof line (not random badges)
  
• Keep the hero section simple, then add personality below
  

A hero section should look intentional and easy to act on, not like a busy poster.

Anatomy of a High-Converting Hero Section

If your hero feels weak, it usually means one key piece is missing or unclear.

Headline (the main promise)

Your hero section headline should answer the visitor’s silent question:

“What do I get if I stay here?”

Good hero section headlines are:

• Benefit-first
  
• Specific
  
• Easy to understand in one breath
  

Examples (use the structure, not the exact words):

• “Get a website that brings you more qualified leads.”
  
• “Find the right track size in minutes, not hours.”
  
• “Book more discovery calls with a landing page built to convert.”
  

Subheadline (the clarity layer)

The subheadline supports the headline by adding:

• Who it’s for
  
• How it works
  
• What makes it different
  

It turns the headline from “sounds nice” into “I get it.”

Primary CTA (the main action)

Your hero section CTA should be one clear action:

• Book a call
  
• Get a quote
  
• Shop now
  
• Start trial
  
• See pricing
  

One main path keeps the trail clean.

Secondary CTA (optional, only if it reduces friction)

A secondary CTA can work if it reduces fear and helps someone warm up.

Examples:

• Primary: “Book a Call”
  
• Secondary: “See Examples”
  

Or:

• Primary: “Start Trial”
  
• Secondary: “Watch Demo”
  

If the secondary button creates confusion, cut it.

Visual (supports the message, does not replace it)

Your hero section visual should support the message, not replace it.

If your visual is doing all the talking and your headline is vague, you are relying on vibes. That does not convert well.

Trust cues (proof without clutter)

Trust cues help the visitor feel safe taking the next step.

Good trust cues include:

• Review rating
  
• Short testimonial line
  
• Customer logos
  
• Simple stats (only if true)
  
• “Serving (region) since (year)”
  

Message, action, and proof work together. If one fails, your hero section conversion rate drops.

How to Write Hero Copy That People Actually Read

Your headline is not a slogan. It’s a promise the visitor understands fast.

Headline formulas you can use today

Here are hero section headline formulas you can write in 5 minutes:

1. Get (result) without (pain)
   Example: “Get more leads without a confusing website.”
   
2. (Do the thing) in (timeframe)
   Example: “Launch your new landing page in 14 days.”
   
3. The (category) for (audience)
   Example: “The quoting system for busy contractors.”
   
4. We help (audience) get (result)
   Example: “We help small businesses get websites that convert.”
   
5. Stop (pain). Start (benefit).
   Example: “Stop losing leads. Start booking calls.”
   

Subheadline formulas (who it’s for + how it helps)

Hero section subheadline formulas that stay clear:

• “Built for (audience) who want (result) without (pain).”
  
• “Simple process, fast load times, clear calls to action.”
  
• “Strategy, design, and build, all guided by one clear goal.”
  

Words and phrases that cause instant bounce (what to avoid)

These phrases often cause bounce because they sound empty:

• “World-class”
  
• “Cutting-edge”
  
• “Best-in-class”
  
• “Innovative solutions”
  
• “We’re passionate about”
  

They do not explain anything.

A better hero section uses plain language that actually says what you do.

Microcopy that increases clicks (tiny words that reduce friction)

Microcopy is the small text near your CTA that lowers fear.

Examples:

• “No pressure. Just a quick fit check.”
  
• “Takes 2 minutes.”
  
• “We reply within 1 business day.”
  
• “No credit card required.”
  

Microcopy is like a small trail marker that says, “Yep, this is safe. Keep going.”

Clear beats clever. Specific beats vague. Your hero section should read like a helpful guide, not a billboard.

Choosing the Right Visuals (Image vs Video vs Illustration)

Visuals should make the offer feel real, not just “look cool.”

When to use real photography

Use real photography in your hero section when:

• You sell a physical product
  
• You do hands-on work (construction, trades, field work)
  
• Trust is a major barrier
  
• Your results are visual (before and after, projects, events)
  

Real images feel honest. They show the buyer you exist and you do the work.

When illustrations make sense (and when they do not)

Illustrations can work well for:

• SaaS products
  
• Abstract services (data, systems, tools)
  
• Brands with a playful style
  

But illustrations can backfire if:

• The service is high-trust and expensive
  
• The buyer is skeptical
  
• Proof matters more than style
  

If you are a local contractor, a cartoon hero section usually feels like a costume. It is not you.

When a video hero helps (and when it slows you down)

Video hero sections help when motion explains the product faster than words.

But video hero sections also create performance risk. If the video delays the first paint, the hero section becomes a slow-loading obstacle.

Speed matters because user experience signals are tracked through metrics like LCP, INP, and CLS. Google documents these Core Web Vitals and recommends monitoring them in Search Console.

Visual quality checklist (credibility, relevance, focus)

Before you ship a hero section visual, ask:

• Does this visual match the offer?
  
• Does it look credible for the price point?
  
• Is there a clear focal point?
  
• Does text stay readable?
  
• Is it optimized for speed?
  

Pick the hero section visual that explains the offer fastest, with the least load time risk.

Call-to-Action Strategy for the Hero Section

If visitors do not know what to do next, your hero section is not doing its job.

One primary CTA (keep the path clean)

Most hero sections should have one primary CTA.

Why?

Because choice creates friction.

A clean trail has one clear direction at the trailhead. It does not split into four paths with no map.

Button wording that drives action

Strong hero section CTA buttons use verbs:

• Book
  
• Get
  
• Start
  
• Download
  
• Shop
  
• Compare
  
• Check
  

Weak buttons are often vague labels:

• Submit
  
• Click here
  
• Learn more (sometimes fine, often unclear)
  

Better: make the button describe the next step.

Examples:

• “Get a Quote”
  
• “Book a Discovery Call”
  
• “Check My Track Size”
  
• “See Pricing”
  

Placement rules (so the CTA stays visible and obvious)

Hero section CTA placement rules that work:

• Place CTA close to the headline and subheadline
  
• Keep CTA visible on mobile when possible
  
• Make it visually obvious (contrast, size, spacing)
  
• Avoid burying it under a huge image
  

Remember, people scroll only if the first screen feels promising. Nielsen Norman Group’s research still supports that “top of page” content gets more attention, even in a scrolling world.

Common CTA mistakes (too many choices, weak verbs, low contrast)

Common hero section CTA mistakes:

• Too many buttons
  
• Weak button copy
  
• Button blends into the background
  
• CTA pushed far below the first screen on mobile
  

Your hero section CTA should feel like the natural next step, not a hard sell.

Add Trust Without Clutter

Trust is the difference between “interesting” and “I’m ready.”

Best trust elements by business type

Trust cues should match what your buyer actually cares about.

Service businesses:

• Testimonials
  
• “Serving (region) since (year)”
  
• Certifications (only if relevant)
  
• Case studies
  

Ecommerce:

• Review stars
  
• Shipping and returns promise
  
• Secure checkout note
  
• Clear support options
  

SaaS and B2B:

• Client logos
  
• Short stats
  
• Short quote from a recognizable customer type
  
• Security notes (if your buyer cares)
  

The proof bar pattern (logos, reviews, stats under the CTA)

A simple pattern that converts well:

Headline
Subheadline
CTA
Then a small proof bar under the CTA, like:

• “Rated 4.8 by 300+ customers”
  
• 3 client logos
  
• One true stat
  

This keeps the hero section clean and trustworthy.

What not to do (too many badges, huge testimonials, tiny unreadable logos)

Avoid:

• 12 badges in a row
  
• Huge testimonial blocks inside the hero section
  
• Tiny logos that look like dust
  
• Proof that does not matter (random awards nobody recognizes)
  

Use 1 to 3 trust cues that matter most to your buyer, and keep your hero section clean.

Mobile-First Hero Sections

Most hero sections break on mobile because the design assumes a desktop screen.

Mobile layout rules (stacking, spacing, tap targets)

On mobile, your hero section should usually stack like this:

• Headline
  
• Subheadline
  
• CTA
  
• Trust cue
  
• Visual (or smaller visual)
  

Also, make sure:

• Buttons are easy to tap
  
• Spacing is not cramped
  
• Text is not tiny
  

Keep the CTA visible (avoid pushing it below the fold)

If the hero section pushes the CTA far down, mobile users may not even see the next step.

And if they do not see the next step, they will not take it.

Again, the fold is not fixed, but the idea is real: top content influences whether users keep going.

Mobile readability checklist (font size, contrast, line length)

Quick hero section checklist for mobile:

• Headline readable without zoom
  
• Strong contrast between text and background
  
• Subheadline is short and scannable
  
• Button is obvious and large
  
• No key text baked into an image
  

A mobile-first hero section should be simpler than desktop, not busier.

Speed and Performance (Hero Sections Can Slow Your Site)

The hero section is often the heaviest part of the page, and speed affects rankings and conversions.

The usual speed killers (huge images, video backgrounds, sliders)

Common hero section speed killers:

• Huge images that are not compressed
  
• Background video that loads immediately
  
• Sliders with multiple heavy assets
  
• Too many scripts and animations at the top of the page
  

Fast hero best practices (compression, formats, loading priorities)

Strong speed practices for a hero section:

• Use modern image formats
  
• Serve responsive sizes
  
• Prioritize the hero section media that affects Largest Contentful Paint
  
• Avoid heavy scripts above the first screen
  

Google’s Core Web Vitals documentation focuses on LCP, INP, and CLS, which are all affected by what happens at the top of your page.

A “fast hero” setup that still looks premium

If you want a hero section that looks premium without being heavy, use:

• One crisp, relevant image
  
• A readable overlay behind text
  
• Simple typography
  
• One CTA
  
• One trust cue
  

Minimal motion. Maximum clarity.

A fast hero section wins. A slow hero section loses leads before your offer even loads.

Accessibility Basics for Hero Sections

Accessibility is not extra. It’s part of good design.

And good accessibility often improves conversions because more people can use your site.

Contrast and readability

If your hero section has text over an image, contrast is critical.

WCAG guidance for contrast (Success Criterion 1.4.3) describes a common baseline of 4.5:1 for normal text, with exceptions for large text.

Simple fix: use a dark overlay behind light text, or a light overlay behind dark text.

Alt text and meaningful visuals

If your hero section image is meaningful, give it meaningful alt text.

If it is decorative, treat it as decorative so screen readers do not read junk.

Keyboard navigation and focus states

Your hero section CTA must be reachable by keyboard, and the focus state should be visible.

When focus states are missing, the site feels broken for keyboard users.

Motion safety (reduce heavy animations)

Avoid aggressive movement in the hero section.

Subtle motion can help guide attention, but heavy motion can cause discomfort and distract from the CTA.

An accessible hero section is easier to use, easier to trust, and often easier to convert.

SEO Considerations for Hero Sections

Your hero section sets topic clarity for both people and search engines.

Use one clear H1 that matches page intent

Your hero section should usually include the page’s H1.

That H1 should match the intent of the page, not a vague slogan.

If the page is about “website design for contractors,” say that clearly.

Keep hero text as real HTML (not baked into images)

Do not bake your headline into an image.

Why?

Because:

• It hurts accessibility
  
• It hurts clarity on mobile
  
• It is harder to update
  
• It can weaken how the page communicates topic
  

WCAG’s guidance on images of text (Success Criterion 1.4.5) encourages using real text when possible instead of images of text.

Align hero messaging with search intent (what the visitor came for)

If someone searched “hero section,” they want:

• A clear definition
  
• What to include
  
• Best practices
  
• Mistakes to avoid
  
• Examples and checklists
  

So the hero section of this article is built around that exact intent.

Do the same for your pages. Match the hero section promise to the keyword intent.

Avoid thin, generic copy that could fit any business

If your hero section could be swapped onto 200 websites and still make sense, it is too generic.

Specific wins.

SEO-friendly hero sections are specific, readable, and aligned to what the visitor came for.

What Are the 7 Characteristics of a Hero? (Website Hero Section Checklist)

Think of this as your field checklist.

Characteristic 1: Clear promise (benefit-first)

Your hero section should communicate a benefit in seconds.

Characteristic 2: Obvious audience (who it’s for)

Your hero section should hint who it’s for.

Characteristic 3: Strong visual hierarchy (eyes land in the right order)

A good hero section guides the eye:

Headline
Subheadline
CTA
Proof
Visual

Characteristic 4: One primary CTA (no confusion)

One main action keeps the path clean.

Characteristic 5: Proof signals (trust without clutter)

Use proof that matters, not proof that looks busy.

Characteristic 6: Mobile-ready layout (clean stack, easy tap)

If your hero section is hard to read on mobile, it will not convert well.

Characteristic 7: Fast and accessible (loads quickly, readable for everyone)

The hero section often impacts Core Web Vitals like LCP and CLS, especially when it is media-heavy.

Trail takeaway: If your hero section hits all 7, it will usually perform well even before testing.

---

How to Test and Improve Your Hero Section

Great hero sections are built, then tuned with evidence.

What to measure (CTA clicks, bounce rate, scroll depth, conversions)

Track:

• CTA clicks
  
• Bounce rate
  
• Scroll depth
  
• Conversions (forms, calls, purchases)
  

These numbers tell you if your hero section is doing its job.

What to A/B test first (headline, CTA, visual, proof placement)

Start with the biggest levers:

1. Headline
   
2. CTA wording
   
3. Visual choice
   
4. Proof placement
   

Change one thing at a time so you know what worked.

A simple weekly testing rhythm

A practical rhythm:

• Week 1: test headline
  
• Week 2: test CTA
  
• Week 3: test proof cue
  
• Week 4: test visual
  

Then repeat.

One small hero section test each week beats one big redesign each year.

Common Hero Section Mistakes to Avoid

Most hero problems come down to confusion, clutter, or slow load times.

Vague headline, no real offer

If your hero section headline could be a poster on a wall, it is probably too vague.

Too many CTAs and competing messages

If you give people too many paths, they often choose none.

Sliders and heavy animation

Sliders often hurt speed and clarity. Heavy animation can distract from the CTA.

Generic visuals that do not match the offer

A random stock photo does not build trust.

Use visuals that match what you sell.

CTA hidden or low contrast

If your CTA is hard to see, your hero section is not guiding anyone.

Trail takeaway: If visitors hesitate, simplify and clarify your hero section first.

Step-by-Step: Build Your Hero Section From Scratch

This build order prevents rework and helps you launch faster.

Step 1: Choose the one action you want

Pick one primary action for the hero section:

• Book
  
• Quote
  
• Shop
  
• Demo
  
• Download
  

Everything else supports that.

Step 2: Write the headline and subheadline

Write a benefit-first headline.

Then add a subheadline that clarifies who it’s for and how it works.

Step 3: Pick a layout pattern

Choose one:

• Split layout
  
• Centered stack
  
• Screenshot hero
  
• Proof-led hero
  
• Minimal hero
  

Step 4: Add visuals and trust cues

Pick one visual that supports the message.

Add 1 to 3 trust cues that matter.

Step 5: Make it mobile-first

Stack cleanly.

Keep the CTA visible early.

Step 6: Speed check and accessibility check

Speed: Remember Core Web Vitals like LCP and CLS are affected by heavy hero section assets.

Accessibility: Maintain readable contrast and avoid images of text when real text works.

Step 7: Launch and test

Ship it, measure it, improve it.

Trail takeaway: Build your hero section for clarity first, then improve it with data.

Conclusion: Make the Next Step Obvious

Your hero section is not decoration. It’s direction.

When someone lands on your site, they want to feel oriented. They want to know what you do. And they want to know what to do next.

Recap the essentials (message, CTA, proof, speed)

A high-performing hero section comes back to four basics:

• Clear message
  
• Clear CTA
  
• Simple proof
  
• Fast load and readable design
  

Next step checklist (what to fix first)

If your hero section is not converting, start here:

• Rewrite the headline to be specific and benefit-first
  
• Reduce to one primary CTA
  
• Add one strong trust cue
  
• Optimize hero visuals for speed
  
• Fix mobile stacking and readability
  

A strong hero section makes visitors feel confident and ready to act.

FAQs About The Hero Section