What Is a Hero Section? A Quick Guide for Beginners

You have roughly 50 milliseconds to convince a visitor your page is worth their time. That window belongs entirely to the hero section.

Understanding what is a hero section in web design is the starting point for anyone building or improving a website. It is the full-width, above-the-fold area at the top of a page – the first thing every visitor sees before they scroll.

Get it right and users stay. Get it wrong and they leave, often permanently.

This article covers what a hero section is, what it contains, how it affects conversion rates, and the technical decisions that determine whether it helps or hurts your page performance.

What Is a Hero Section in Web Design?

A hero section is the full-width, above-the-fold area sitting at the very top of a webpage, directly below the site’s primary navigation. It is the first content a visitor encounters before scrolling. Its job is to communicate the page’s purpose instantly and guide the visitor toward a defined next action.

The term “hero” comes from print and broadcast design, where a dominant visual or image used to anchor a layout was called the hero element. Web design adopted it the same way – as the single most prominent section of a screen.

A hero section is different from 3 other commonly confused elements:

• Header: The header is the navigation bar. The hero sits below it.
• Banner: A banner is a generic promotional strip that can appear anywhere on a page.
• Carousel: A carousel is an interactive slideshow component. A hero can contain a carousel, but a hero and a carousel are not the same thing.

Nielsen Norman Group eyetracking research shows users spend 57% of their total page-viewing time above the fold – the highest attention window on any page.

The hero section controls that window entirely.

What Are the Core Components of a Hero Section?

A hero section contains 4 core elements: headline, subheadline, call-to-action, and a visual element. These components work together to communicate value and direct user behavior within the first few seconds of a page load.

Most high-performing hero sections also include a fifth element – social proof – placed within or directly below the core block.

The Headline

The headline is the primary message. It uses a larger font size than any other text on the page and states the value proposition in 6–12 words.

Good headline: “Automate your invoicing in under 5 minutes.”

Weak headline: “We help businesses grow.” (Says nothing specific.)

Visitors decide in under 0.05 seconds whether a page looks relevant to them (Behaviour & Information Technology study). That judgment starts with the headline.

The Subheadline

The subheadline adds specificity. It is not a repetition of the headline – it expands it.

Subheadline function: Clarify who the product is for, what it does in more detail, or address a common objection.

Typical length is 15–25 words. Anything longer breaks the scanning flow users follow when they first land.

The Call to Action

The call-to-action is the hero’s conversion element. It is a button or link that moves the visitor to the next step in the funnel.

Analysis from GMP shows multiple competing CTAs reduce conversions by up to 266%. One primary CTA, with at most a secondary ghost button, is the right approach.

The Visual Element

The visual element – image, video, illustration, or animation – reinforces the headline and establishes mood.

Product screenshots outperform stock photography in user experience tests for SaaS products. A user seeing an actual product interface understands the value faster than a user seeing a generic office photo.

Social Proof in the Hero Area

Social proof placement directly below the CTA reduces hesitation at the point of decision.

Common formats used in high-converting hero sections:

• Trust logos: “Used by teams at Adobe, Uber, and Slack”
• Star ratings with review counts
• User counts: “Trusted by 50,000+ developers”
• Short quote: One sentence from a recognizable customer

Ahrefs, for example, places recognizable brand logos – Adobe, eBay, Uber – immediately within the hero area to build credibility before the visitor reads a single feature.

What Are the Main Types of Hero Sections?

Hero sections follow 6 primary layout patterns, each suited to different content types and conversion goals. Choosing the wrong pattern for a page’s intent is one of the most common design mistakes.

Static Image Hero

Fastest-loading and most widely compatible format.

The static image hero pairs a background photo or product image with headline, subheadline, and CTA overlay text.

It works across all devices without performance cost and is the default choice for most landing pages and homepages where load time is the priority.

Split-Screen Hero

Left column holds text and CTA. Right column features a product shot, illustration, or photograph.

This is common in ecommerce because it gives the product immediate visual prominence without forcing the visitor to parse an image background with text on top. Shopify’s product page templates use this pattern heavily.

Video Background Hero

High engagement potential, high performance cost.

Video backgrounds use autoplay, muted, looped video. They consume more bandwidth and are slower to paint in the browser. On mobile, they often revert to a static fallback – which means the mobile experience requires separate design attention.

Only 59% of mobile pages achieve good LCP (Largest Contentful Paint) scores (HTTP Archive Web Almanac, 2024). Video background heroes make that number harder to hit.

Illustrated and Animated Hero

Popular across SaaS and technology products. Linear, Notion, and Stripe all use custom illustrations or subtle animations rather than photography.

The animated hero works well when the product is abstract or difficult to photograph. It lets the brand communicate a concept visually rather than relying on words or screenshots.

Typographic Hero

Text-only layout. No background image. Strong typography carries the page.

This works for editorial sites, portfolios, and agencies where the writing or brand voice is the primary product. It is also the easiest hero to optimize for responsive design.

Carousel and Slider Heroes

The carousel hero rotates through multiple messages or offers. UX data consistently discourages this format.

Users rarely interact with rotating banners and often ignore them entirely. If multiple messages need to appear in the hero area, a split-screen or typographic approach with a clear primary message performs better.

What Role Does the Hero Section Play in Conversion Rate?

The hero section is the highest-leverage element on any landing page or homepage. It is the only section every visitor sees before making the decision to stay or leave.

Carrot’s A/B testing across member sites found that hero section redesigns increased conversion rates by 25–55% without changing any other page element. That range is significant.

How Hero Design Connects to Conversion Behavior

First impressions are formed in 50 milliseconds – before the visitor processes a single word (Behaviour & Information Technology study). Visual weight, color contrast, and layout signal credibility or confusion instantly.

Forrester research shows that sites focused on superior user experience can achieve visit-to-lead conversion rates more than 400% higher than poorly designed counterparts.

The hero sets that user experience expectation before anything else loads.

CTA Placement and Click-Through Rates

CTAs placed above the fold perform 304% better than those positioned below it (LoopExDigital, 2026).

Centered CTAs generate up to 682% more clicks than left- or right-aligned alternatives. These numbers are dramatic enough that CTA positioning in the hero section deserves dedicated A/B testing on any high-traffic page.

Venture Harbour documented a real example: removing the hero CTA and replacing it with a stronger value proposition statement increased email sign-ups from 11% to 17% – a 55% lift. Sometimes less structure in the hero converts better.

Headline Specificity and Bounce Rate

A vague headline increases bounce rate because visitors cannot confirm relevance. A specific headline answering “what is this, who is it for” within the first few words reduces bounce by giving users the confirmation signal they need to stay.

70% of small business websites do not include a call to action at all (Sagapixel). That is the baseline this section is competing against.

How Does the Hero Section Affect UX and Page Hierarchy?

The hero section does not just introduce a page – it defines the entire reading structure that follows it. Every element below the fold inherits its context from what the hero established.

Nielsen Norman Group eyetracking data shows 65% of time spent above the fold concentrates in the top half of the viewport. That is exactly where the headline sits.

How the Hero Establishes Visual Hierarchy

Visual hierarchy across an entire page starts with the hero. The font size, weight, and color choices made in the hero set the scale that every other typographic element on the page follows.

If the hero headline is 72px bold, then H2 subheadings further down the page need to read as clearly secondary. If the CTA button is orange with 4:1 contrast against the background, similar CTA buttons in lower sections inherit that visual expectation.

A hero that breaks its own visual rules creates inconsistency that users feel even when they cannot describe it.

F-Pattern Reading and Scan Behavior

Users scan web pages in an F-pattern reading path – left to right across the top, then down the left edge with shorter horizontal scans on the way down.

The hero headline sits at the most-scanned position: the top-left of the content area. The CTA typically falls at a natural right-side endpoint.

Layouts that align with this scanning path reduce cognitive load. Layouts that fight it – for example, placing the CTA in the lower-left with the headline on the right – increase the effort required to process the page.

Scroll Depth and Time-on-Page

74% of total page viewing time is spent in the first two screenfuls (Nielsen Norman Group, 2018 eyetracking study). The hero fills the first one.

A hero that fails to create interest stops the scroll. A hero that clearly signals what comes next – through visual cues like downward arrows, preview imagery, or benefit text that truncates at the fold – invites the visitor to continue.

Amazon’s product page hero consistently places the product name, image, price, and primary purchase CTA all within the first screenful. That concentration of purchase-relevant information reduces the need to scroll for users who already know what they want.

What Are the Design Principles Behind an Effective Hero Section?

Effective hero sections follow a small set of structural rules. Most failures come from violating one of them – usually by trying to say too much.

48% of users say web design is the primary factor in judging a business’s credibility (G2 research). The hero is the first signal they use.

Message Clarity

One message. One CTA. One goal.

Every element in the hero should answer the same question from a different angle. If the headline says “Ship code faster,” the subheadline says “Cut your deployment time by 60%,” and the CTA says “Start Free Trial” – those three elements reinforce each other.

If the hero tries to communicate two distinct value propositions, neither one lands.

Figma’s hero section demonstrates this well. A single “Get started for free” CTA. No competing secondary buttons in the primary hero. Their headline states what the product is; the CTA closes the action. Nothing in between creates friction.

Visual Contrast and Legibility

Text over background images requires contrast ratios that meet WCAG 2.1 AA standards – a minimum of 4.5:1 for body text and 3:1 for large display text.

The most common hero legibility problem: a beautiful lifestyle photo with white headline text overlaid on a bright sky or light background. The contrast fails. The headline becomes unreadable on mobile.

Solutions used in practice:

• Semi-transparent dark overlay (rgba 0,0,0 at 40–60% opacity)
• Gaussian blur on the background image
• Solid or gradient color band behind the text
• Image cropped so the text lands on a consistently dark or light area

Color contrast is not just an accessibility requirement – it directly affects whether users read the headline at all.

Responsive Layout Behavior

A split-screen desktop layout that stacks vertically on mobile needs explicit design decisions for the mobile view. The stacked order matters: headline first, then image, then CTA. Not image first.

Responsive typography in the hero means the 72px desktop headline becomes 36–42px on mobile without losing its visual weight relative to surrounding elements. Media queries handle this scaling – but scaling alone is not enough if the copy is too long to read comfortably at smaller sizes.

Over 60% of global web traffic comes from mobile devices (Unbounce, 2024). A hero designed only for desktop is, effectively, broken for the majority of visitors.

How Does Hero Section Copy Work?

Hero copy is not body copy. It operates under different constraints – shorter windows, faster judgment, and a visitor who has not committed to reading anything yet.

39% of users judge a business’s credibility based on whether the copy answers their question immediately. Vague headlines fail that test before the visitor finishes the first line.

Value Proposition Framing

The hero headline needs to answer 3 questions simultaneously: what it is, who it is for, and why it matters.

Weak: “A better way to manage projects.”

Strong: “The project management tool built for remote engineering teams – sync, ship, and track in one place.”

The second version is longer, but it passes the 3-question test. The reader knows what it is, who it is for, and why it exists.

This is the core of value proposition design in frontend development work – the structure of the message comes before the visual treatment of it.

Subheadline Purpose

The subheadline adds specificity, not decoration.

Wrong use: Repeating the headline idea in different words.

Right use: Naming the primary benefit, addressing a common objection, or stating a concrete outcome (“Most teams set it up in under 10 minutes”).

Think of the subheadline as the first sales objection handler. What would a visitor ask after reading the headline? Answer that.

CTA Copy

Action verb plus value indicator outperforms generic text consistently.

• “Start Free Trial” beats “Get Started”
• “Get My Free Quote” beats “Request a Quote”
• “Try It Free – No Card Required” beats “Sign Up”

The addendum “No credit card required” or “Cancel anytime” placed below the CTA button reduces hesitation at the point of action. It does not need to be large – even small supporting text near the button handles objections without cluttering the hero.

HubSpot’s 2024 data shows personalized CTAs convert 202% better than generic alternatives. That principle applies at the hero level – if the page is targeted at a specific audience segment, the CTA copy should reflect that.

Common Copy Mistakes

• Jargon-first headlines: Starting with an internal term or category name the visitor does not yet know
• Feature-led copy: “Powered by AI” says nothing about what the AI does for the user
• Passive constructions: “Businesses are helped by our platform” instead of “We help businesses cut costs by 30%”
• White space violations in copy: cramming too many ideas into the headline instead of letting it breathe with one strong statement

What Are the Technical Considerations for Hero Section Performance?

The hero section is almost always the Largest Contentful Paint (LCP) element on a page. That makes it the single biggest factor in whether a site passes or fails Google’s Core Web Vitals.

According to the 2025 Web Almanac, on 76% of mobile pages the LCP element is an image – and that image is almost always the hero. Fix the hero image, and LCP improves for most sites.

Hero Images and LCP

Only 62% of mobile origins currently pass LCP (2025 Web Almanac), with a “good” threshold set at 2.5 seconds or less.

Hero images are the primary reason sites miss that threshold. The fixes are specific and well-documented:

• Add fetchpriority="high" to the hero <img> element
• Never add loading="lazy" to a hero image – it actively delays LCP
• Serve images in WebP or AVIF format instead of JPEG or PNG
• Target hero image file sizes under 80KB after compression

The Google Flights team added fetchpriority="high" to their hero image and saw LCP improve by 700 milliseconds from that single HTML attribute change.

Lazy Loading

17% of pages still lazy-load their LCP image (2025 Web Almanac). That is 17% of sites making their performance worse on purpose.

Lazy loading is correct for images below the fold. Applied to a hero image – which is already in the viewport – it creates an unnecessary delay before the browser can fetch it.

The rule is simple: loading="eager" on hero images, loading="lazy" on everything else.

Video Background Performance

Video background heroes carry a separate performance cost.

A looping autoplay video needs to be muted (required for autoplay to work in Chrome), compressed to under 5MB, and served with a static image fallback for mobile. Without a fallback, many mobile browsers display a blank hero area while the video loads.

53% of mobile users leave a page that takes over 3 seconds to load (Google). A video background hero that is not properly optimized is one of the fastest ways to hit that threshold.

Font Loading in Text-Heavy Heroes

Text-heavy or typographic heroes face a different performance issue: font loading causes FOUT (Flash of Unstyled Text) or FOIT (Flash of Invisible Text), where the headline either blinks in the wrong style or is invisible until the font loads.

Using font-display: swap in CSS prevents invisible text while the custom font loads. Preloading the primary font file with <link rel="preload"> reduces the time before the styled headline appears.

How Do Hero Sections Differ Across Page Types?

The hero section serves a different conversion goal depending on the page it sits on. A homepage hero and a landing page hero look similar but are structured around different visitor intents.

Homepage Hero

The homepage hero speaks to the broadest possible audience. It communicates brand-level positioning – what the company does and who it is for – rather than promoting a specific product or campaign.

Brand clarity over feature specifics is the design principle here. Stripe’s homepage hero is a strong example: it communicates that Stripe is a financial infrastructure platform without naming individual products. The CTA (“Start now”) is low friction, not a hard sell.

Landing Page Hero

A landing page hero is campaign-specific. It matches the message from the ad or email that brought the visitor there – a concept known as message match.

Message match matters more here than anywhere else. Unbounce’s Conversion Benchmark Report found that 83% of all landing page visits happen on mobile devices in 2024. That means the landing page hero’s mobile layout is not an afterthought – it is the primary experience.

Single CTA. No navigation links. No competing offers. The landing page hero is the most constrained hero format by design.

Product Page Hero

Product page heroes are feature-led. The visual should show the product in use – an interface screenshot for software, a product close-up for physical goods.

Nike consistently uses this well. Their product page heroes pair high-contrast athlete imagery directly with the product name, colorway, and a single “Add to Bag” CTA. The visual and the CTA point at exactly the same thing.

About Page Hero

No hard conversion pressure. The about page hero is often typographic – a statement about company values, mission, or team. The CTA, if present, is usually a secondary action like “Meet the team” or “See open roles.”

Forcing a sales-oriented CTA on an about page creates a mismatch between user intent (they came to learn about the company) and page goal. That mismatch increases bounce rate.

Blog and Content Hub Hero

The blog hero orients the reader to the topic area. It typically includes a category label, a featured article headline, and a “Read more” or “Subscribe” CTA.

Secondary navigation elements – category links, search, recent post titles – often live just below the hero on content hub pages, bridging the hero and the article listing.

What Are the Most Common Hero Section Mistakes?

74% of startup hero sections have at least one critical design flaw that reduces conversion performance (Ofspace, 2025 study of 100 startup sites). The same 4 mistakes appear in most of them.

Multiple Competing CTAs

27% of startups include two or more equally styled CTAs in the hero (Ofspace, 2025). When 2 buttons share the same size, weight, and color, neither one clearly leads.

The result is decision paralysis. The visitor chooses nothing.

Fix: One primary CTA in the hero. If a secondary option is needed, use a ghost button (text-only or outlined) with clearly lower visual weight.

Background Images That Break Legibility

Generic stock photography as a hero background is a visual and conversion problem.

Two failure modes:

• Low contrast: Bright sky or light background behind white headline text. The text is unreadable.
• Cognitive mismatch: Decorative image unrelated to the product. 20% of startups in the Ofspace study used imagery that didn’t connect to their core message, creating user hesitation.

Custom photography or product screenshots are more effective than stock. If stock is unavoidable, a dark overlay with at least 50% opacity maintains legibility.

Mobile Hero Not Tested Independently

A hero section that looks good on desktop can completely collapse on mobile – CTAs pushed below the fold, headlines wrapping into 6 lines, buttons too small to tap.

Nearly 25% of hero sections had major mobile usability issues in the Ofspace startup analysis. Mobile accounts for 58% of global web traffic (Statista, 2023). Those two numbers together describe a serious problem.

Mobile-first design means designing the mobile hero layout first, then expanding it to desktop – not designing desktop and shrinking it down. The stack order on mobile (headline first, then image, then CTA) needs its own deliberate decision.

Hero That Doesn’t State What the Product Does

37% of visitors leave a site if they cannot understand the offering within 3 seconds (WP Rocket research). Vague, clever, or abstract headlines are the primary cause.

Headlines like “The future of work” or “Empowering teams everywhere” fail the clarity test. They sound polished but say nothing specific. A visitor who cannot immediately identify what the product does will not scroll to find out.

The user interface and the copy must work together to answer one question: “What is this, and why does it matter to me?” If the hero does not answer that in under 3 seconds, no amount of good design further down the page will recover the visitor.

FAQ on Hero Section In Web Design

What is a hero section in web design?

A hero section is the full-width, above-the-fold area at the top of a webpage, visible before any scrolling. It typically contains a headline, subheadline, call-to-action, and a visual element. It is the first content every visitor sees on a page.

What is the purpose of a hero section?

Its job is to communicate the page’s value proposition instantly and direct visitors toward a specific action. A well-designed hero section reduces bounce rate, builds credibility, and guides users into the rest of the page content.

What elements does a hero section include?

A standard hero section contains 4 core elements: headline, subheadline, call-to-action button, and a visual element. Many also include social proof such as trust logos, star ratings, or short customer testimonials placed near the CTA.

How is a hero section different from a header?

The header is the navigation bar at the top of the page. The hero section sits directly below it. They are separate elements. A header handles site navigation; the hero handles the first impression and primary conversion message.

What makes a hero section effective?

One clear message, one focused CTA, strong visual contrast, and a headline that answers “what is this and who is it for” within 3 seconds. Message clarity consistently outperforms visual complexity in conversion testing across landing pages and homepages.

Does the hero section affect page performance?

Yes. The hero image is the Largest Contentful Paint (LCP) element on 76% of mobile pages (2025 Web Almanac). Lazy-loading a hero image or using uncompressed video backgrounds are the most common causes of failing Core Web Vitals scores.

What are the most common hero section types?

There are 6 primary types: static image, split-screen, video background, illustrated or animated, typographic (text-only), and carousel. Static image and split-screen are the most widely used. Carousel heroes are generally discouraged based on UX research.

How does a hero section affect conversion rate?

Directly. CTAs placed above the fold perform 304% better than those below it. Carrot’s testing showed hero section redesigns alone increased conversions by 25–55% without changing any other page element. It is the highest-leverage element on any page.

Should a hero section look the same across different page types?

No. A homepage hero communicates broad brand positioning. A landing page hero is campaign-specific with a single CTA and no navigation. A product page hero is feature-led. Each page type requires a different hero structure based on visitor intent.

What are the most common hero section mistakes?

The 4 most common: multiple competing CTAs, background images that reduce headline legibility, a mobile layout that was never tested independently, and a headline so vague the visitor cannot identify what the product does within 3 seconds of landing.

Conclusion

Knowing what is a hero section in web design is just the starting point. The real work is in the decisions: headline clarity, visual hierarchy, CTA placement, image performance, and how the layout shifts across devices.

Every element inside the hero section either earns the visitor’s attention or loses it.

The above-the-fold area is not where you show off. It is where you communicate value, fast. One focused message, one primary action, and a Largest Contentful Paint score under 2.5 seconds – that combination does more for conversion rate than any visual trend.

Build the hero around the visitor’s intent. Everything else follows from there.