Scroll any homepage back to the top. That block sitting there, the one with a big headline, some kind of image behind it, and a call-to-action button waiting to be clicked, is the hero section. It owns the space above the fold, and it carries the page’s actual pitch rather than its branding.
Almost every marketing homepage and landing page has one. Whether it works gets judged on scroll depth and bounce rate, which is a fairly blunt way to grade something that gets about a second to land.
Less than a second, it turns out. Carleton University research published in Behaviour and Information Technology in 2006 found that visitors judge a webpage’s visual appeal within 50 milliseconds. The hero section is the content that snap judgment is made of.
What Is a Hero Section?
Load a product page, a SaaS homepage, an agency site. The first thing to fill your screen after the page settles is the hero.
It sits directly above the fold, before any scrolling happens, and its job is to say what the page is about in one glance.
A headline. A short supporting line. A button. Usually a large image or video sitting behind all of it. Most heroes run that combination, though plenty drop one piece and get away with it.
What separates a hero from a regular header is ownership of the message. The header handles branding and menu links. The hero handles persuasion. On a landing page, it often has to do all of that persuading before a visitor scrolls another inch.
Hero Section vs Header vs Banner
People mix these up constantly, and the confusion is fair, since they overlap visually and sometimes stack on top of each other.
- The header is the strip holding the logo and navigation. Present on every page, usually short.
- A hero section is the large block below it, or wrapped around it, unique to whatever page you’re on, built around one core message.
- Banners are smaller promotional strips announcing a sale or a policy change, and they tend to sit above the hero rather than replace it.
Apple’s product pages make the split obvious. Thin header up top with the logo, then a full hero takes the rest of the screen with one product shot and one line of copy.
What Are the Core Components of a Hero Section?
The headline is the largest line of text and states the value in a handful of words. Under it, a subheadline picks up the context the headline couldn’t fit. The button offers the single action the page wants next. Behind all of that sits an image, a video, or an illustration doing the tone-setting.
Most of the persuasion work concentrates in the button. A well-placed call-to-action button hands the visitor one obvious next step rather than four competing ones, which is harder to pull off than it sounds once marketing, sales, and the founder all want their link up there.
Stripe’s homepage swaps the usual photo for a live animated code snippet. Structurally it’s still a hero image in every sense. It just proves the product instead of decorating the page.
What Are the Types of Hero Section Layouts?
About a third of the biggest ecommerce homepages still run a rotating carousel up top, even though it’s one of the least reliable layouts available. Baymard Institute’s most recent UX benchmark puts it at 33 percent of top US and European ecommerce sites using a carousel on the desktop homepage.
That gap between how popular a layout is and how well it performs is the whole reason layout choice deserves more thought than most teams give it.
| Layout Type | Description | Best Use Case | Load Impact |
|---|---|---|---|
| Full-bleed image | One static photo fills the entire hero area | Travel, lifestyle, fashion brands | Moderate, depends on image weight |
| Split screen | Text on one half, image or product shot on the other | SaaS products, app downloads | Low to moderate |
| Video background | A looping muted video plays behind the text | Hospitality, automotive, entertainment | High unless heavily compressed |
| Carousel | Multiple slides rotate through automatically or on click | Multi-product retailers, agencies | High, loads several assets at once |
| Minimalist text-only | Headline and button on a plain or solid-color background | Developer tools, utilities, early-stage startups | Very low |
Away built its homepage hero around a single lifestyle photo of its luggage sitting at an airport gate. Not minimalist at all, and it works because the photo does the selling. Basecamp went the other way for years, cutting the hero down to one sentence and a button on a flat background. Some sites add parallax scrolling over a full-bleed image for depth on the way past, which I’d use sparingly.
What Size Should a Hero Section Be?
There’s no correct height. Anyone who tells you 700px is the answer is describing their last project.
In practice designers work inside a range, somewhere between 60 and 100 percent of visible screen height, adjusted for device and how much content has to fit.
On desktop that often lands at 600 to 800 pixels tall, or 80 to 90 percent of viewport height on marketing pages. Mobile heroes are shorter in raw pixels but eat a larger share of the screen, since the screen itself is small. And full-viewport heroes take the whole 100 percent, pushing every other piece of content below the initial view.
A hero sized against a fixed pixel number breaks the second someone opens it on a different screen. Size it against the viewport instead, then adjust proportions with media queries at each breakpoint, and it stays intentional on a phone and on a 32-inch monitor both.
How Does a Hero Section Affect Page Load Speed?
The hero is usually the single biggest factor in how fast a page feels, because its image or video is almost always the largest element Google measures for loading speed.
That measurement is Largest Contentful Paint, one of the three Core Web Vitals Google uses as a ranking signal.
A few numbers worth knowing before you pick a background:
- A hero image or video typically becomes the page’s Largest Contentful Paint element, the metric Google wants under 2.5 seconds at the 75th percentile of visits (Google Search Central, 2025)
- WebP images run 25 to 34 percent smaller than comparable JPEG files at the same visual quality (Google)
- The chance of a visitor bouncing rises 32 percent as mobile load time moves from 1 second to 3 seconds (Google/SOASTA Research, 2017)
A heavy uncompressed hero image undoes everything else on the page before the visitor reads a word of the headline.
Here’s the part that catches people out. Lazy loading, which is normally good practice, works against a hero image. Delaying the exact asset Google is timing pushes the Largest Contentful Paint score higher, not lower. Took me an embarrassing number of Lighthouse runs to internalize that one.
What Makes a Hero Section Convert Visitors?
Conversion happens when the button, the headline, and the visual all point at the same action without arguing with each other.
You can see whether that’s happening in the click-through rate on the CTA button, in how far past the hero people scroll, and in the bounce rate on that specific page. None of those numbers mean much alone. Together they usually tell you if the hero is doing its job or just sitting there.
Dropbox’s early homepage still shows up in design writeups for a reason. One plain sentence about the product, one button, nothing else pulling at the eye.
Visual Hierarchy in Hero Section Design
Nielsen Norman Group’s original eyetracking study, which tracked 232 users across thousands of pages, found that visitors scan the top of a page in an F-pattern reading shape rather than reading it in full (Nielsen Norman Group, 2006).
That scanning behavior is why hero visual hierarchy matters as much as it does. The eye hits the headline, drifts toward whatever has the strongest contrast, and only then, if you’re lucky, reaches the button.
Four things build that hierarchy reliably. Size contrast, where the headline is noticeably bigger than everything else. Color contrast, where the CTA button uses a color the page doesn’t repeat anywhere. Whitespace around the button so it isn’t crowded. And motion, a small fade or animation pointing toward the action, which I’d use once or not at all.
Which Hero Section Type Fits Different Website Types?
The right layout depends less on taste and more on what the page has to prove in the first few seconds.
Ecommerce homepages get real value out of product photography, since it sells on sight, and a carousel can show several categories without extra clicks. The trouble is that carousels run straight into banner blindness, and a slow gallery hurts conversion at the worst possible spot on the page.
Allbirds skips the carousel and runs one full-bleed lifestyle shot, betting on a single strong image over several average ones.
SaaS landing pages do well with split screens, where a product screenshot sits next to the pitch and proves it on the spot. The risk is that a cluttered or dated-looking screenshot undercuts the claim faster than showing nothing would.
Slack has leaned on split-screen and product-in-context heroes for years, always pairing the copy with a real view of the interface.
Portfolio and agency sites lean minimalist or video-forward, which signals craft without a hard sell. It can also leave a first-time visitor genuinely unsure what the studio does, which is a strange thing to risk on a site selling clarity.
None of these choices happen in isolation from the rest of the page. Good web design principles treat the hero as the opening argument in a longer case, and the layout that wins is whichever one serves the user experience goal that page was built around.
Which Tools Are Used to Design a Hero Section?
Most hero sections exist as a design file long before anyone writes CSS.
Teams block out the layout inside a dedicated user interface tool, test it against real copy rather than lorem ipsum, then hand it off.
| Tool Category | Examples | Used For |
|---|---|---|
| Design and prototyping | Figma, Adobe XD, Sketch, Framer | Mocking up layout and content hierarchy before development |
| Website builders | Webflow, Squarespace, Elementor, Wix | Shipping pre-built hero templates without custom code |
| Heatmap and session tools | Hotjar, Crazy Egg | Showing where visitors click and how far they scroll |
| Traffic and conversion tracking | Google Analytics | Measuring bounce rate and goal completions tied to the hero |
Figma won that first category outright. Ramp’s vendor-adoption data puts Figma’s reach at 98 percent of companies that use any design-tool vendor at all.
A step-by-step guide on how to design a website in Figma covers blocking out the hero region, the navigation, and the sections underneath before a developer touches any code.
How Do You Design a Hero Section?
Building one is less about picking a template and more about working through a sequence in the right order. Skip a step and it usually resurfaces later as a redesign.
- Define the primary message. Decide what a visitor should understand in five seconds, before anyone opens a stock photo library.
- Pick the layout type based on the content that actually exists. Full-bleed photo, split screen, or plain text on a solid background.
- Block the structure in a wireframe. A rough wireframe sets proportions before real copy or imagery gets involved.
- Build the mockup with final copy, fonts, and colors, so the mockup stakeholders review looks close to the finished page.
- Optimize the visual asset. Compress and resize the chosen image or video before it reaches a developer, not after someone complains about load times.
- Test against real behavior. Watch heatmaps and analytics for a few weeks, then adjust the headline or button placement based on what visitors do rather than what the team assumed.
None of it is one-and-done. A hero that launched a year ago is rarely still the right one, and most sites find that out slowly.
Common Mistakes That Weaken a Hero Section
Weak heroes fail for a small, repeatable set of reasons.
- Generic stock photography gets skipped over almost entirely. Photos of a real product or a real person hold attention, according to Nielsen Norman Group’s eye-tracking research. The handshake-in-a-boardroom shot holds nothing.
- Two CTAs with equal visual weight split attention and neither one wins.
- A headline about the company instead of the outcome. “Innovative solutions for a better tomorrow” gives a visitor nothing to act on and, worse, nothing to remember.
- Too much crammed into one view. Carrot, a real estate software company, found in its own testing that a slimmed-down hero section outperformed a heavier version across every site type it measured.
How Do You Make a Hero Section Accessible?
Low contrast text is the most common accessibility failure on the web, found on 83.9 percent of home pages (WebAIM Million, 2026).
Missing or unhelpful alt text isn’t far behind, sitting on 53.1 percent of the same pages.
Heroes carry extra risk for both, since the headline usually lands directly on top of a photo or a video frame where contrast shifts from one pixel to the next.
What a hero needs to clear basic standards:
- Body-sized headline text needs at least a 4.5 to 1 color contrast ratio against its background under WCAG 2.2, or 3 to 1 for large text.
- A background image carrying information needs a written description. Purely decorative ones can be marked so screen readers pass over them.
- The CTA button has to be reachable by keyboard and visibly highlighted when someone tabs to it.
- Autoplaying hero video needs a visible pause control, since motion causes real discomfort for some visitors.
A full web accessibility checklist covers the rest of the page. The hero is usually where contrast problems start, because text-over-image treatments get designed for looks first and checked for readability second, if at all.
When Does a Hero Section Not Work?
A hero isn’t a default. Some pages are better off without one.
| Scenario | Why It Fails |
|---|---|
| Long-form content or documentation pages | A large visual block pushes the actual information below the first screen, working against why the visitor came |
| Pages on slow or unreliable connections | A heavy image or video becomes the biggest single reason the page feels stuck loading |
| Blog posts and articles | Readers arrive already knowing the topic from search or a link, so a persuasion-focused block adds friction instead of value |
| Pages that already have a strong header | Stacking a hero under a header repeating the same message just doubles the space before real content starts |
That doesn’t make a hero the wrong call. It just means the hero isn’t free.
Every pixel spent above the real content has to earn it, and that’s a question of usability rather than taste.
A hero built without responsive design in mind can end up costing a mobile visitor on a weak connection more than it ever gives back.
FAQ on What Is A Hero Section
What Is the Ideal Hero Section Size on Mobile?
Mobile heroes usually take 50 to 70 percent of viewport height, shorter than desktop. That keeps the headline and call-to-action button visible without shoving navigation or the next section too far down the page.
How Much Does a Custom Hero Section Cost to Design?
Almost nobody prices a hero on its own. It gets bundled into homepage or landing page work, typically billed at 50 to 150 dollars an hour for freelance designers, or folded into a flat project fee.
What Is the Difference Between a Hero Image and a Hero Banner?
The hero image is the specific photo or graphic behind the hero section’s text. Hero banner is looser, and people often use it to mean the whole hero section rather than just its background visual.
How Long Should a Hero Section Headline Be?
Short. An analysis of SaaS landing pages by Process.st found the average headline length is 6 words, with subheadlines averaging 12, long enough to add context without slowing the read down.
What Should You Fix First in What Is A Hero Section?
Fix a hero from the message outward. Clarify the headline and the call-to-action button first, then the layout, and treat the background image or video as the last variable you touch.
That order holds no matter which layout you’re using, because a confusing headline undermines even a fast, perfectly optimized background.
- Headline and call-to-action button
- Layout type and content proportions
- Background image or video weight
Cutting a hero image’s weight by the 25 to 34 percent margin WebP delivers over JPEG is often enough on its own to drag a borderline page under the 2.5 second Largest Contentful Paint threshold, a combination neither figure states alone.
Once the hero earns its spot at the top of the page, the next thing worth fixing is sitting right beside it: the website navigation.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- What is Backend in Web Development? - September 13, 2026
- What is Frontend Development? - September 11, 2026
- How to Make a Button in Figma: Design Best Practices - September 10, 2026
