How to Design a Landing Page Hero Section That Converts (With Hero Section Examples)

Your hero section decides whether visitors stay or bounce. You have about 5 seconds before someone scrolls or closes the tab. If the hero does not answer "what is this and why should I care," nothing else on the page matters.

This tutorial walks you through how to design a hero that converts, with hero section examples from real products and a copy formula you can steal today.

What a hero section actually needs to do

Forget the design tutorials that obsess over gradients and 3D illustrations. A hero section has one job: get the visitor to do the next thing. That is usually clicking a CTA, scrolling further, or signing up.

To do that job, your hero needs four things working together:

1. A headline that names the outcome
2. A subheadline that explains who it is for and how it works
3. A single primary CTA
4. A visual that shows the product, not a stock photo

That is it. If your hero has six buttons, three taglines, a video, a press logo bar, and a chatbot popup, you are not designing a hero. You are designing a hostage situation.

Step 1: Write the headline before you touch the design

The biggest mistake founders make is opening Figma first. Wrong order. Write the headline before you design anything.

A converting headline does one of three things:

• States the outcome the user wants. Example: "Get more sleep without giving up coffee."
• Names the problem you solve. Example: "Stop losing leads to slow landing pages."
• Promises a specific result with a number. Example: "Ship a launch page in 12 minutes."

Avoid these patterns:

• Clever wordplay nobody understands ("The future of synergy")
• Feature lists ("AI-powered, blockchain-enabled, cloud-native")
• Vague benefit statements ("Work smarter, not harder")

Test your headline against this rule: if a stranger reads only your headline, can they guess what your product does and who it is for? If not, rewrite.

For more on this, see how to write CTAs that convert which uses similar principles for button copy.

Step 2: Write a subheadline that closes the gap

The headline grabs attention. The subheadline closes the deal by adding the missing context.

A good subheadline answers two questions:

• Who is this for?
• How does it work in one sentence?

Hero section example from Linear:

• Headline: "Linear is a better way to build products"
• Subheadline: "Meet the new standard for modern software development. Streamline issues, sprints, and product roadmaps."

The headline alone is too vague. The subheadline tells you it is a project management tool for software teams. Together, they work.

Keep your subheadline under 20 words. If it runs longer, you are stuffing it with features instead of clarity.

Step 3: Pick one primary CTA

One. Not two. Not "primary and secondary." One.

I know, every hero you see has "Start free trial" and "Book a demo" side by side. That works for companies with millions in traffic and dedicated sales teams. For most SaaS founders and indie hackers, two CTAs split attention and lower conversions on both.

Pick the action that matters most for your stage:

• Pre-launch? "Join the waitlist"
• Self-serve SaaS? "Start free" or "Try it free"
• High-ticket B2B? "Book a demo"
• Newsletter or content product? "Subscribe"

Make the button color contrast hard against the background. If your page is white with blue accents, your button should be a color that does not appear anywhere else above the fold. That visual isolation is what makes it click-worthy.

For deeper CTA tactics, read call to action examples that fix landing page drop-off.

Step 4: Show the product, not a stock photo

The visual in your hero should answer "what does this look like" before the user has to scroll.

Best options, ranked:

1. A clean screenshot of the product UI. Crop it so the most impressive part is visible.
2. A short looping video or GIF showing the product in action. Keep it under 6 seconds, no audio, autoplay.
3. A custom illustration that visualizes the workflow. Only if you have budget for a good designer.
4. Stock photos of people smiling at laptops. Never. Stop.

Hero section examples worth studying:

• Stripe uses an animated dashboard mockup that shows real-looking data flowing.
• Notion shows a stylized version of its actual UI with sample pages.
• Superhuman uses a static product screenshot with subtle highlights.

The pattern: the visual is the product. Visitors should see what they are signing up for.

Step 5: Get the layout right

After thousands of hero section examples, two layouts dominate because they work:

Layout A: Centered text, visual below

• Headline, subheadline, CTA stacked center
• Product visual sits below, full width
• Best for: simple products, single-feature tools

Layout B: Split screen

• Text on left (headline, subheadline, CTA)
• Visual on right (screenshot or video)
• Best for: complex products that need to show UI

Pick one. Do not invent a third layout because it looks creative. Visitors are pattern-matching against thousands of pages they have seen. Familiar layouts convert better than novel ones.

A few non-negotiables:

• Headline at least 40px on desktop, 28px on mobile
• Maximum line length around 60 characters for the subheadline
• The CTA should be visible without scrolling on a 13-inch laptop
• Mobile hero must show headline + CTA without scrolling. Test on a real phone.

For more on layout decisions, see visual hierarchy on landing pages.

Step 6: Add one trust signal (and only one)

Below the CTA, add one piece of social proof. Just one. Options:

• "Trusted by 4,200 founders"
• A row of 4-5 customer logos (only if they are recognizable)
• A star rating with review count: "4.9 stars from 312 reviews"
• A single short testimonial under 15 words

Do not stack all of these. Pick the strongest. If you have no real numbers yet, skip this entirely. Fake social proof gets sniffed out fast and tanks trust.

Step 7: Remove everything else

Now do the hardest part: delete things.

Look at your hero and remove anything that is not in the list above. Common culprits:

• Navigation with 8 links
• "As seen in" press logos that nobody recognizes
• Award badges
• Chat widgets that pop up automatically
• A second CTA that says "Learn more"
• Animated background videos that distract from the headline

Every element competes for attention. The fewer elements, the more weight your CTA carries.

Hero section examples that get this right

Three to study:

Cal.com: Big headline, one CTA, animated calendar UI on the right. No fluff.

Tally: Headline + subheadline + single button + screenshot. The whole page philosophy is in the hero.

Posthog: Headline names the audience ("How developers build successful products"), product screenshot below, one CTA.

What they share: clarity over cleverness, product visible above the fold, one action to take.

Step 8: Test before you ship

Once your hero is live, treat it as a hypothesis, not a finish line. Track scroll depth, CTA click rate, and bounce rate from the hero specifically.

The two changes that move conversion rate most:

1. Headline rewrites
2. CTA copy changes

Test these first before you redesign the whole layout. Read how to A/B test a landing page without wasting traffic to set this up properly even on low traffic.

Your hero section checklist

Before you publish, your hero should have:

• Headline that names outcome, problem, or specific result
• Subheadline that says who it is for and how it works
• One primary CTA with high-contrast color
• Real product visual (screenshot, video, or GIF)
• One trust signal (or none)
• Nothing else

If you are not sure your hero passes the 5-second test, drop your URL into PagePulse. We analyze your hero against 40+ UX rules and tell you exactly what is killing your conversion rate, with prioritized fixes you can ship the same day. No login wall, just paste and go.