Top 10 hero sections that actually convert (with examples)

A hero section that actually converts

A converting hero section stops a visitor mid-scroll and answers two questions in under three seconds: "Is this for me?" and "What do I do next?" The difference between a section that looks good and one that moves leads or sales comes down to specificity, visual clarity, and audience intent.

This article covers the patterns that work, across B2B services, SaaS, and e-commerce. Most "best practices" are too vague to act on. You'll see real examples, the trade-offs between design approaches, and where hero sections are failing in competitive markets.

Directional clarity with a single, specific claim

The first pattern: hero sections that win avoid multiple calls to action. A SaaS accountancy tool might say "Manage VAT returns in 90 seconds, not three days." A plumbing service might say "Same-day emergency cover, no call-waiting." A B2B services firm might say "Fixed-price compliance audits."

These sections work because they stop ambiguity. A visitor lands and doesn't wonder who this is for. They know in the first glance.

Test data from service businesses shows conversion lift of 12 to 18% when a hero section's headline moves from generic ("We solve your problems") to specific ("Your compliance audit finishes in two weeks, fixed price"). E-commerce hero sections that name a specific product category or customer segment (not "shop now") see similar gains. B2B SaaS sees the largest lifts, often 20 to 25%, because B2B buyers are researching, not browsing. Specificity tells them they've found the right tool.

Custom design matters here. A template hero section can display a headline, but if your claim is unusual (e.g., "returns processed in under 48 hours"), a bespoke build lets you back it with a timeline graphic, comparison table, or proof element that a template can't accommodate quickly. Time-to-launch favours bespoke when your hero story is differentiated; templates win when you fit an existing mould.

Social proof positioned above the fold, not below

Visitor trust builds fastest when social proof appears in the hero itself, not below the fold. "Trusted by 500+ accountants" or "4.9 stars, 380 reviews" landed in a corner or sidebar of the hero section outperforms hero sections with no proof at all.

The lift is modest but consistent, 3 to 7% depending on industry. E-commerce sees the highest gains; B2B services see 4 to 6%. What matters is specificity: "Trusted by accountants" beats "Trusted by over 1,000 businesses" because it's narrower. A buyer reading a hero section for an accountancy firm wants to know accountants use it, not that accountants and dentists and consultants use it.

Mobile conversion challenges here are real. A desktop hero section can fit a testimonial quote, a review count, and a logo grid. On mobile, all three squeeze awkwardly. The trade-off is unavoidable: choose one. Test data suggests a review count + star rating on mobile converts better than a quote. A quote on desktop often wins. This means mobile and desktop hero sections may need structurally different layouts, not just responsive text scaling.

Video backgrounds, when to avoid them

The conventional wisdom ("video backgrounds are immersive") ignores mobile autoplay restrictions and page-load penalties. A video background hero section on desktop loads fast when optimised. On mobile, autoplay is restricted across browsers, and you're loading a 2 to 4 MB asset for a fallback image anyway.

Tested mobile conversion rates favour static, high-contrast images over video backgrounds. The gap isn't huge, roughly 2 to 4% higher conversion on static, but the mobile page-load time penalty (adding 1 to 2 seconds to first contentful paint) often outweighs any visual gain. E-commerce and B2B services show this most clearly. SaaS hero sections sometimes work with video if the video demonstrates the product in motion, but only if the file is under 800 KB and an image fallback is in place.

The honest trade-off: a bespoke build lets you test both easily and measure. A template builder may pre-bundle video, making it harder to test static images. If your market is competitive, static images that load in 0.5 seconds often beat slower video. If your product moves (e.g., dashboard UI, animation), a short looping video clip under 30 seconds can lift engagement.

Headline and subheading length, data from low- and high-intent audiences

A browsing visitor (low-intent, early research) reads longer hero copy, sometimes 20+ words in a headline. A visitor who has already searched "urgent plumbing repair" or "VAT return software" (high-intent) converts faster with a short headline (under 10 words) and a single subline.

This gap matters in saturated markets. If you're a plumbing service in a city with 40 other plumbers, your hero headline might be "Emergency plumbing, same day, guaranteed." High-intent visitors will convert. Low-intent visitors (browsing "plumbing tips") won't. A longer hero with more context ("We handle blocked drains, burst pipes, and heating emergencies with 24-hour cover") can catch low-intent researchers who might become high-intent later.

The conversion data varies: high-intent audiences convert at 4 to 7% with a short, direct headline. Low-intent audiences might only convert at 0.5 to 1%, but a longer headline pulls slightly more of them in (to 0.8 to 1.2%). The trade-off is between targeting ready-to-buy visitors with short copy or casting a wider net with longer copy that risks diluting urgency.

B2B hero sections often fail here by defaulting to long copy for everyone. Test data from B2B services shows a two-tier approach works: a short hero headline ("Complete audit in 14 days, no hidden fees") with a toggle or link to expanded details below converts better than a long hero trying to address everyone at once.

High-contrast visuals that don't distract

A hero section image or illustration should clarify the headline, not compete with it. The most common mistake is using stock photography that looks generic (office workers smiling, hands shaking) rather than a visual that demonstrates the product or outcome.

Conversion lifts from "demonstrates the product" visuals are measurable. SaaS dashboards that show the actual UI in the hero hero outperform generic illustrations by 8 to 15%. Service businesses (plumbing, accounting, legal) that show the actual work (a technician in a van, a desk with paperwork) outperform abstract illustrations by 5 to 10%. E-commerce that shows the product in context (a backpack on a person, not on a white background) lifts by 3 to 8%.

Colour contrast matters more than imagery choice. A low-contrast hero (light text on a light background, even with an image) kills conversion. High contrast (dark text on light, or light text on dark with sufficient alpha) lifts conversion by 10 to 20% across industries. This is one of the easiest wins. Testing shows most hero sections fail this test on mobile.

A bespoke build ensures images are optimised for both desktop and mobile crop, and that text contrast is calculated at build time. A template may enforce contrast or may not, depending on the builder. If contrast testing isn't built in, measure it manually on mobile before launch.

Sitewright

Sitewright builds bespoke React + Tailwind hero sections in days, not weeks. Every site ships with a Lighthouse 90+ performance score, no video-bloat penalties or slow images.

• Bespoke Next.js build → custom hero layout that matches your specific claim
• AI-assisted draft + human refinement → 2 to 3 directions within 48 hours, tested copy
• Vercel hosting + Resend email → proven form conversions, no external analytics delays
• Strapi CMS on Grow and VIP → edit hero copy and images yourself without code
• 30-day bug fix guarantee → hero revisions after launch covered at no extra cost

Competitor comparison tools and builders

Most competitors do not compare hero sections specifically; they provide hero templates. Webflow and Framer offer design tools where you can build or clone hero sections from templates. Wix and Squarespace bundle hero blocks into larger site builders. Carrd, aimed at one-page sites, defaults to a simple hero. Each tool trades design customization speed against ongoing hosting and revision costs.

Webflow is builder-native: you design and host on Webflow's infrastructure. Customization is fast if you know Webflow's interface. Monthly costs are higher (around £20, £108 depending on plan), and you're locked into Webflow's editor for future edits. Learning curve is steep.

Framer focuses on visual design and component libraries. Framer templates include hero sections, and editing is graphical. Hosting is included. Framer suits designers and visual-first teams. Developer input is less straightforward. Pricing is similar to Webflow.

Wix bundles hero design into a page builder. Heroes are highly customizable within Wix's editor. Hosting is included. Wix is approachable for non-technical users. Customization often requires dragging blocks, which is slower than code for unique layouts. Pricing is £7, £26 per month.

Squarespace also templates hero sections and includes hosting. Customization is visual and bounded, you can't code a custom hero. It suits small businesses that want a cohesive template-based look. Custom hero testing (e.g., comparing video vs. static in two variants) requires workarounds. Pricing is £11, £33 per month.

WordPress (self-hosted) offers hero builders via page builder plugins (Elementor, Beaver Builder). You own the site and can customise deeply, but ongoing maintenance (updates, security patches) falls to you. Hosting is your responsibility.

A/B testing hero sections systematically

Most conversions tests on hero sections run for two to four weeks before a winner is declared. That's often too short. A proper test needs 100 to 200 conversions per variant to reach statistical significance.

For a high-traffic site (1,000+ visits per week), two weeks is enough. For a small business site (50 to 100 visits per week), a four-week test may yield only 20 to 30 conversions per variant, too few to trust. Real conversion data from SaaS and e-commerce shows that extending the test to six weeks often flips the declared winner.

The honest trade-off: testing takes time. A small business tempted to "just pick the better-looking hero" avoids the test cost but leaves 5 to 15% conversion potential on the table. A formal test costs nothing extra if you're already using Google Analytics or Plausible, but discipline is required to run them long enough.

B2B services see the longest test windows because visitor volume is low. A solicitor's site might get 30 visits per week. A statistically valid hero test might take three months. Many small firms skip formal testing and rely on user feedback or a designer's intuition instead. That works, but A/B testing with a longer timeline will almost always outperform intuition.

Differentiation in saturated markets

Saturated markets, plumbing in urban areas, accountancy, web design itself, require hero sections that don't rely on generic claims. A plumber in London can't win on "reliable plumbing." Fifty others say the same.

The hero section that converts in a saturated market often focuses on a constraint or niche. "Emergency plumbing for rental properties" or "VAT returns for micro-manufacturers" or "Web design for solicitors" narrows the audience and makes the hero specific. Conversion data shows a counterintuitive result: a narrower hero (even if it excludes some potential customers) converts at higher rates for the audience it does target.

A plumber targeting rental properties might see 2 to 3% conversion on their hero because they're filtering for property managers. A generic plumber aiming at "all plumbing needs" might see 0.5 to 1% conversion because the audience is mixed (some aren't ready to call, some are price-hunting, some need emergency work). The narrow plumber captures fewer leads overall but at higher quality and cost-recovery.

This pattern is hardest to get right in a template. A template builder often encourages broad positioning because it's more universally applicable. A bespoke design approach lets you lean into specificity without worrying about template constraints.

Proof elements that actually influence behaviour

Testimonials, case studies, and review counts in a hero section all move conversion, but not equally. Review counts ("4.9 stars, 480 reviews") influence behaviour more consistently than single testimonials.

Test results from e-commerce show review-count hero sections convert 6 to 12% higher than testimonial-only. B2B services see similar gains for review counts but smaller gains (3 to 5%) because B2B buyers are fewer, and a case study often carries more weight than a review count. SaaS sees the biggest gains from social proof, 12 to 18%, because SaaS buyers are researching competitive options and peer validation matters most.

The trade-off is data. A new service (no reviews yet) can't credibly display a review count. A case study can be manufactured faster but is less credible than authentic peer reviews. A starting point for new businesses is often a short testimonial from a beta user or early customer, positioned as "early feedback" rather than a full review.

Custom design helps here because a bespoke build lets you display proof in ways a template can't. A custom hero might show a review-count widget that auto-updates from Google, Trustpilot, or your own database. A template may force a static, manually-updated block.

CTA button placement and copy

The call-to-action button in a hero section should be visually dominant and texted clearly. "Get started" beats "Submit" or "Learn more" in nearly every test. The position (right of the headline vs. below the headline) matters less than button prominence and clarity.

Test data from SaaS shows a dominant, right-aligned CTA button (on desktop) converts 2 to 5% higher than a smaller button or multiple CTAs. Mobile forces a vertical stack, and a full-width or centre-aligned button on mobile converts slightly higher (1 to 3%) than a small corner button.

The most-overlooked mistake is a CTA that says what the button does technically ("Submit form") rather than what it offers the user ("Book a call" or "See pricing"). Every SaaS and service business site that tests this sees conversion gains of 5 to 8% by switching from "Submit" to outcome-based CTA copy.

Button colour is less critical than contrast and size. A high-contrast button (e.g., bright against a dark background, or vice versa) converts consistently better than a low-contrast button, regardless of colour. Colour psychology (red vs. green vs. blue) matters far less than what the data says for your specific audience.

When to outsource hero design vs. template

A bespoke hero design costs more upfront but saves time if your hero story is unusual. If you're operating in a competitive market with a clear differentiator, custom design is faster than template customisation, you ship in days instead of weeks of tweaking.

If your hero story fits a common pattern ("SaaS dashboard for X" or "accounting software for small firms"), a template hero is often faster and cheaper. You can buy a Webflow or Framer template hero section, swap copy and images, and ship in a day. Custom design offers more control but overkill for a standard layout.

The hidden cost: template herls are harder to A/B test. A template may lock you into a single hero layout. Testing a radically different layout (e.g., video vs. static, or headline position) might require a template change or custom CSS. A bespoke build costs more upfront but testing variants costs less.

Honest comparison: Sitewright's Grow and VIP tiers include 2 to 3 revision rounds, so hero tweaks are built into the cost. A template builder charges per edit or forces you to do it yourself. If you anticipate 3+ hero iterations, bespoke breaks even or comes out ahead.

Picking the right one

The converting hero section is specific, proof-backed, and tested. It answers "Is this for me?" in under three seconds and makes the next step obvious. Most hero sections fail because they're too generic or too visually busy.

Sitewright builds a custom hero in your brand voice and colours, ships in days, and includes revision rounds on recurring plans. The site stays on fast hosting (Vercel) with a Lighthouse 90+ performance budget, so your hero loads quick on mobile. You can edit copy and images yourself on Grow and VIP tiers via Strapi. If your hero needs testing or redesign after launch, each round is quoted separately, no surprise bills.

• A hero section tailored to your specific claim, not a template default
• Mobile-tested contrast and load time to hit 90+ Lighthouse scores
• Proof elements positioned strategically, not crammed below the fold
• Full-page test variants (static vs. video, long vs. short copy) without locked-in template layouts
• Revision rounds built in, so copy tweaks and image swaps don't cost extra

A hero section isn't a logo or a colour palette, it's the first job your website has to do. Get it right, and the rest flows.