A homepage hero section is the large, top-of-page block visitors see first, built to communicate your core value proposition and move the visitor toward a single primary action. Its one job is clarity: state what you offer, who it's for, and what to click next, all without making the visitor scroll or guess. Keep that message above the fold and limit yourself to one dominant call to action.
TL;DR:
- Write a headline that states a benefit and names its audience or result, place proof in the subheadline, and make the CTA an action with an outcome.
- On phones, place the headline, short subheadline, and CTA before the image, and keep the next section partly visible to signal that scrolling continues.
- Use responsive image sizes and modern formats, preload the hero image, and never lazy load it; use video only when motion demonstrates the product.
- Test headline wording, CTA color or copy, and hero image before adjusting font weight or spacing, which tend to affect conversions less.
- For software, show the product itself; for local services, use a photo of completed work, while brand stories can rely on mood setting imagery.
Table of Contents
- Essential Components of an Effective Hero Section
- Design Rules and Visual Hierarchy to Control the User's Gaze
- How Hero Media Affects Load Speed and LCP
- Copy Patterns for Headlines and CTAs That Convert
- Layout Patterns and Mobile-First Adaptations
- Hero Section Examples Worth Studying
- How a Rapid-Build Studio Approaches Hero-First Homepages
- Forge Web Studio: Rapid, Mobile-First Homepage and Hero Builds
- FAQ
- Sources
Essential Components of an Effective Hero Section
A hero section earns its space only when every piece inside it supports the same goal. Several elements carry that weight, and each one fails differently when it's missing or done poorly.
The headline answers "what's in it for me?" in a single sentence. It should name the benefit, not describe the product category: "Get paid faster" works harder than "Invoicing software for freelancers." The subheadline follows with a supporting detail, often a number, a timeframe, or a clarifying phrase that removes ambiguity about who the product serves.
The primary CTA is the one button you want clicked. It belongs near the headline, in a color that contrasts with the rest of the hero, with microcopy that states an action and an outcome ("Start my free trial") rather than a vague prompt ("Learn more"). The supporting visual, whether a product screenshot, a short looping video, or an illustration, should reinforce the headline's claim rather than decorate the page; a photo of a happy team means less than a screenshot of the actual product in use when the goal is a software sale.
Finally, trust signals and navigation need a light touch inside the hero itself:
- A small customer logo strip or a single review snippet can sit near the CTA without crowding it.
- Navigation should stay visible but visually quiet, so it doesn't compete with the hero's main message.
- Avoid stacking more than one secondary link or badge near the primary CTA, since each addition dilutes the visitor's attention.
Nielsen Norman Group's research on homepage usability backs this with a long-standing guideline: include a concise tagline near the top that summarizes what the site does and highlights its top priority task, nothing more.
Design Rules and Visual Hierarchy to Control the User's Gaze
Good hero design is mostly about restraint. The visitor's eye should land on exactly one thing first, then move in a deliberate order to the next.
- Build a single, visible focal point using size, contrast, and whitespace, so the headline or hero image is unmistakably the largest or brightest element on the screen.
- Limit the choices inside the hero to one primary CTA and, at most, one quiet secondary link, since more options slow decisions rather than speed them up.
- Use signifiers like a cropped image, a downward arrow, or a line of text that trails off the viewport to signal there's more content below.
- Avoid false floors: a hero that fills the entire screen with whitespace or a full-bleed background can look like the end of the page, so leave a visible edge of the next section peeking in.
- Start testing with the highest-leverage variables first: headline wording, CTA button color, and hero image choice tend to move conversion more than smaller tweaks like font weight or spacing.
Nielsen Norman Group's original eye-tracking research on scrolling behavior and attention found that people spend far more time looking at content above the fold, which is the core argument for putting your primary CTA and value statement there rather than lower on the page.
Pro Tip: Before adding a second CTA, ask whether it serves a different audience segment; if it doesn't, cut it.
How Hero Media Affects Load Speed and LCP
The hero's visual is usually the biggest file on the homepage, and it's also usually the element that determines your Largest Contentful Paint score, a key Core Web Vitals metric. Getting this wrong makes an otherwise good design feel slow.
Choose static images when the goal is quick comprehension and fast load, and reserve video or animation for cases where motion itself demonstrates the product, since video adds meaningful weight and complexity on mobile connections. For images, serve multiple sizes with srcset and sizes attributes so phones download a smaller file than desktops do; Web outlines this as the standard way to cut mobile data use without sacrificing quality on larger screens.
- Preload the first hero image with a
<link rel="preload">tag so the browser starts fetching it immediately instead of waiting on CSS or JavaScript to request it. - Compress images aggressively and use modern formats like AVIF or WebP where browser support allows.
- Lazy-load everything below the fold, but never lazy-load the hero image itself.
Preloading the hero image can measurably improve perceived load time, since web.dev's preloading guidance notes that images otherwise discovered late by the browser delay the Largest Contentful Paint moment visitors actually notice.
Copy Patterns for Headlines and CTAs That Convert
Hero copy works best when it follows a repeatable formula rather than trying to be clever. Start with a value-first headline: benefit plus audience ("The CRM built for solo agents") or benefit plus metric ("Cut onboarding time in half"). Both patterns tell the visitor immediately whether the page is for them.
- Save proof points and quantifiers for the subheadline, where a specific number or timeframe adds credibility without crowding the headline.
- Write CTA buttons as action plus benefit: "Get a free quote" outperforms a flat "Learn more" because it names what happens next.
- Keep one primary CTA inside the hero and, if a second action is necessary, place it below the fold or style it as a plain text link rather than a second button.
- Match CTA tone to the stage of the decision: early-stage visitors respond better to low-commitment language like "See how it works" than to "Buy now."
A partner resource on crafting effective CTAs covers phrasing techniques in more depth if you want to test variations beyond the basics above.
Layout Patterns and Mobile-First Adaptations
Several layout families cover most heroes, including centered text over a full-bleed background, a split layout with text on one side and media on the other, and a stacked mobile-first layout. Centered layouts read fastest but can feel generic; split layouts let you pair a strong headline with a literal product shot, which often performs better for software and services.
Mobile forces tougher choices because the viewport is short. Prioritize the headline and CTA above any decorative image, and trim subheadlines to one line wherever possible, since every added line pushes the CTA further down the screen.
- Stack elements vertically in this order: headline, short subheadline, CTA, then image.
- Keep body text legible and touch targets large enough so buttons are easy to tap.
- Use strong contrast between text and background for readability.
- Use a partial image crop or a visible scroll arrow to invite visitors further down the page, mirroring the signifiers used on desktop.
Hero Section Examples Worth Studying
The strongest heroes borrow from a handful of repeatable patterns rather than reinventing the format each time.
Product lead: a screenshot of the actual app sits beside the headline, letting the visitor see the product before reading a word of copy. Lead-gen hero: a short form sits directly in the hero, reducing the clicks between arrival and conversion. Brand story hero: a full-bleed photo or short video sets a mood, paired with an emotional headline rather than a feature list. Service hero: a photo of real work (a finished kitchen, a completed roof) builds immediate credibility for local or trade businesses. Minimal headline-only hero: no image, just a bold statement and a CTA, useful when the brand's copy alone can carry the page. Split media and text hero: text alongside a looping product demo, common among SaaS homepages. Social proof hero: a customer logo bar or a quote sits just under the CTA to reduce early hesitation. Illustration-led hero: a custom illustration replaces a photo, often used when no real product shot exists yet.
Quick swaps are worth testing on almost any hero: replace a photo with an illustration (or the reverse) to see which builds more trust for your audience, and shorten a long CTA like "Start your free trial today" down to "Start free trial" to see whether brevity lifts click-through.
How a Rapid-Build Studio Approaches Hero-First Homepages
Working on homepages built in days rather than weeks changes how we prioritize. Mobile clarity comes first, since most first visits to a local business site happen on a phone, and a hero that buries the phone number or the booking button under decorative scroll loses leads immediately. Lead flow comes second: every hero we build points toward one contact path, whether that's a call button, a quote form, or a booking link, never more than one competing action.
Tests we run consistently on new homepages include swapping a generic stock photo for a real photo of the business or its work, and shortening the primary CTA to see whether a tighter, more specific phrase pulls more clicks than a longer one. Both tend to move the needle more than cosmetic changes to color or font.
— Dylan
Forge Web Studio: Rapid, Mobile-First Homepage and Hero Builds
We build custom websites with mobile-first hero sections designed around one clear action, a fast load time, and a visible contact path, launched quickly. We offer lead flow design and local search optimization, so the hero you get isn't just good looking, it's built to turn visits into calls and quote requests.
If your current homepage buries its message or loads slowly on phones, our Website Redesign service rebuilds the hero and the pages behind it around a clearer, faster first impression. Start with our pricing page, where the Starter Website begins at $500 one-off, to see which build fits your business.
FAQ
What Is a Hero Section on a Home Page?
A hero section is the large block at the top of a homepage, usually including a headline, a short supporting line, an image or video, and a primary call to action. Its purpose is to communicate what the business offers and prompt one clear next step before the visitor scrolls further.
What Is the Difference Between a Landing Page and a Hero Section?
A hero section is one component, the top block of a page, while a landing page is the entire standalone page built around a single campaign or offer. A landing page often has its own hero section at the top, followed by supporting content, whereas a homepage hero sits above a broader set of navigation and sections.
How Do I Make a Hero Section for a Website?
Start with a one-sentence value headline, add a short supporting line, choose one primary CTA, and pair it with an image or video that reinforces the message. Keep the layout simple, test the headline and CTA wording first, and make sure the hero loads quickly on mobile by preloading the main image.
Why Do They Call It a Hero Section?
The name comes from the "hero image" or "hero shot" used in print and broadcast design, a large, prominent visual meant to grab attention first. Web designers adopted the term for the top-of-page block because it plays the same role: the first and most dominant thing a visitor sees.
What Should I A/B Test First on My Hero Section?
Test the headline wording and the primary CTA button color or copy first, since both directly affect whether a visitor understands the offer and clicks through. Image or video choice is worth testing next, once the copy and CTA are performing well.