Hero Section: 6 Layouts and When to Use Each

Role

The hero has one job: in 5 seconds, the visitor must understand who this is for, what problem it solves, and what to do next. Everything else on the page depends on whether the hero earns the scroll.

It is not a branding moment. It is not a mission statement. It is the answer to "should I stay or bounce?"

What follows is based on a manual analysis of 300+ modern landing pages across SaaS, agency, e-commerce, creator, and local business verticals. We broke down each page's section structure, hero layout, and content hierarchy to identify recurring patterns.

Anatomy

Every hero we analyzed follows the same 5-slot structure, regardless of layout:

1. Eyebrow (optional). A short trust signal or category label above the headline. "Trusted by 5,000+ teams" or "AI-powered design tool". Sets context before the visitor reads the main headline.
2. Headline. The single most important line on the page. Names the outcome, not the product. "Get a real-tier landing in seconds" beats "Welcome to our platform".
3. Subhead. 1-2 sentences that clarify the audience and the mechanism. If the headline is the promise, the subhead is the proof sketch.
4. Primary CTA. One clear action. "Start building", "Try free", "Open editor". Not three buttons competing for attention.
5. Secondary CTA (optional). A softer alternative for visitors not ready to commit. "See how it works", "View examples". Always visually subordinate to the primary.

The 6 layouts

1. Split (text left, visual right)

The workhorse layout. Text occupies the left half, a product screenshot or illustration fills the right. The eye reads left-to-right, hitting the value prop first, then the proof.

Best for: SaaS products with a UI to show, agencies with portfolio work, any product where a visual demo strengthens the pitch.

Common variations: The standard 50/50 split is the baseline. You can add a trust line ("Trusted by 500+ teams") below the CTA to frontload credibility. A tighter spacing version works well for dense, data-heavy products. Some pages slot 3 inline metrics below the subhead to quantify the value prop before the visitor scrolls.

When to pick it: You have a strong product visual and your audience expects to see the tool before signing up. The split layout lets you lead with words and prove with visuals simultaneously.

2. Centered

Headline and subhead are center-aligned, creating a focused, editorial feel. No image competes for attention. The copy does all the work.

Best for: Products where the value prop is conceptual rather than visual. Consulting, API products, developer tools, abstract SaaS.

Common variations: The base version is pure text. Adding an announcement pill above the headline ("Just launched v2.0") creates urgency. Showing a row of user avatars below the CTA is a lightweight way to signal adoption without a full testimonials section.

When to pick it: Your product doesn't screenshot well, or your copy is strong enough to stand alone. Also great for waitlist pages where the product isn't built yet.

3. Asymmetric

Text and image share the space but in unequal proportions, typically 60/40 or 40/60. The unequal split breaks the grid expectation the visitor has from seeing hundreds of 50/50 hero sections. That disruption reads as intentional, editorial, premium. It's the same reason magazine layouts rarely center everything: controlled imbalance signals that a designer made a choice.

Best for: Agencies, portfolios, design-forward SaaS. Anything where you want to signal craft and intentionality.

Common variations: Text-left with a narrower image column is the default. Flipping image to the left works when the visual is the hook (portfolio piece, bold photography). Pinning the CTA below the fold line rather than inline lets the hero breathe. Adding client logos below the content serves double duty as trust signal and visual anchor.

When to pick it: You're targeting a design-savvy audience that notices layout quality. The asymmetry itself signals "we sweat the details".

4. Centered screenshot

A centered headline above a large product screenshot that extends below the fold. The screenshot acts as a bridge between the hero and the next section, pulling the visitor into a scroll.

Best for: SaaS and developer tools where the UI is the selling point. The screenshot is not decoration. It is the proof.

Common variations: The clean version is just headline + screenshot. Adding an announcement pill creates a news hook. Trust logos below the headline let credibility sit next to the promise. Replacing the button CTA with an inline email capture field ("Enter your email to start") shortens the signup funnel by one step.

When to pick it: Your product UI is polished and self-explanatory. The screenshot should make the visitor think "I want to use that" without reading a word.

5. Big typography

Oversized headline (often 5-8rem) with minimal supporting elements. The words themselves are the visual. High-impact, high-confidence.

Best for: Editorial brands, creative agencies, portfolio sites, any product with a short and punchy tagline.

Common variations: Can be left-aligned or centered. Switching to a serif typeface adds editorial weight and works well for media, publishing, or luxury positioning. Adding small metadata labels (a date, a version number, a category tag) gives it a magazine-cover feel that signals curation.

When to pick it: Your headline is memorable and your brand can carry the confidence. Weak copy at 8rem looks worse, not better. This layout magnifies both good and bad writing.

6. Floating cards

Headline surrounded by floating UI cards or feature previews that orbit the text. Creates visual richness without a single hero image. The cards themselves demo the product.

Best for: Products with multiple features worth previewing, design tools, dashboards, anything with diverse UI surfaces.

Common variations: The base version has an eyebrow label and scattered cards. Adding a secondary CTA ("See how it works") catches visitors who want more context before committing. A star rating or review score above the headline leverages social proof as the first thing the eye hits. A tighter version with fewer cards works for simpler products where 3-4 feature previews are enough.

When to pick it: You want to show what the product does without committing to a single screenshot. The cards tease multiple features and create curiosity.

Choosing the right layout

Anti-patterns

• Carousel or slider in the hero. Conversion rate drops with every slide the visitor doesn't see. Pick one message and commit to it.
• Three competing CTAs. "Start free", "Book a demo", "Watch video" in the same hero splits attention three ways. One primary, one secondary at most.
• Generic stock photo. A smiling person in a headset tells the visitor nothing. If you can't show your product, use no image at all. Centered text beats irrelevant imagery.
• The hero introduces the company, not the visitor. "Welcome to Acme, founded in 2019" makes the visitor work to find relevance. Lead with their problem or desired outcome.
• Subhead that repeats the headline. If your subhead says the same thing in different words, cut it. The subhead should add new information: who it's for, how it works, or a specific proof point.