Most visitors decide within a few seconds whether a page is worth their time, and your hero section makes that call for them. These eight hero section designs have clear conversion logic behind them, along with the code to build them.
- A converting website hero section has four parts: a specific headline, a supporting line, one primary CTA and one piece of proof.
- Match the hero pattern to the visitor’s intent: split layouts for services, product screenshots for software, forms for lead generation.
- Keep hero images and video light, since a slow hero hurts both conversions and Largest Contentful Paint.
- In Canvas, set brand colour once with
--cnvs-themecolorso every hero button and accent stays consistent.
What a Converting Hero Section Needs
Before choosing a pattern, check the fundamentals. Every strong hero section example answers three questions immediately: what is this, who is it for, and what should I do next.
- Headline: state the outcome, not the category. “Book a table in 30 seconds” beats “Welcome to our restaurant”.
- Supporting line: one sentence of 15 to 25 words that adds the how or the proof.
- Primary CTA: one dominant button with a verb-led label. A secondary link is fine, but never two equal buttons.
- Proof: a rating, customer count, logo strip or testimonial within the same viewport.
The 5-second above-the-fold test is a useful benchmark here. Show your hero to someone for five seconds and ask what you offer.
Designs 1 to 3: Heroes Led by Copy and Offer
These patterns work when your message is the strongest asset and the visitor already knows roughly what they want.
1. The split hero
Text on one side, image on the other. It is the safest layout for services, agencies and consultants because the image adds context while the copy stays readable. It collapses cleanly to a single column on mobile.
<section class="py-6">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<h1 class="display-4 fw-bold">Fix your plumbing in under 24 hours</h1>
<p class="lead text-muted">Licensed local engineers, fixed prices, 4.9 stars from 1,200 reviews.</p>
<a href="#quote" class="button button-large">Get a free quote</a>
</div>
<div class="col-lg-6">
<img src="images/hero-engineer.jpg" class="img-fluid rounded-4" alt="Engineer fixing a boiler" width="640" height="480">
</div>
</div>
</div>
</section>2. The centred headline with one CTA
A large centred headline, a short subhead and a single button. It suits newsletters, apps and single-offer pages where distraction is the enemy. The weakness is that it relies entirely on copy quality. Avoid it if your headline is vague.
3. The lead-form hero
Place a short form directly in the hero: name and email, or just email. This removes a click and typically suits webinars, quotes and downloads. Keep it to three fields at most, and put the benefit in the button label.
Designs 4 to 6: Heroes Led by Proof and Product
When visitors need to believe before they act, show evidence instead of describing it.
4. The product screenshot hero
Software buyers want to see the interface. Pair the headline with a cropped, high-contrast screenshot that bleeds off the edge of the viewport. This is a staple of the patterns covered in our SaaS landing page design guide.
5. The social proof hero
Add a row of five to six greyscale client logos, or a “Trusted by 4,000+ teams” line, directly under the CTA. Low effort, real credibility gain, no crowding of the headline.
6. The background video hero
Looping video suits hospitality, fitness and travel, where atmosphere sells. Use a muted, compressed clip under 3 MB, always set a poster image, and add a dark overlay so text stays legible. Skip it for utility-focused products or low-bandwidth audiences.
<section class="position-relative min-vh-75 d-flex align-items-center text-white">
<video class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover"
autoplay muted loop playsinline poster="images/hero-poster.jpg">
<source src="videos/hero.mp4" type="video/mp4">
</video>
<div class="position-absolute top-0 start-0 w-100 h-100 bg-black opacity-50"></div>
<div class="container position-relative">
<h1 class="display-3 fw-bold">Train harder. Recover smarter.</h1>
<a href="#trial" class="button button-large">Start your free week</a>
</div>
</section>
Designs 7 and 8: Heroes Built Around Intent
7. The search or booking hero
If the visitor’s job is to find or reserve something, put the tool in the hero. A date picker, location field or search bar converts better than a button that leads to one. This pattern powers property, travel and rental sites, and it is central to a direct booking website.
8. The urgency hero
Events, launches and sales benefit from a date, a countdown or a seat counter beside the CTA. Use real deadlines only. Fake urgency erodes trust and is easy to spot.
A quick way to choose between all eight:
| Goal | Best pattern |
|---|---|
| Local service enquiries | Split hero or lead-form hero |
| Software trials | Product screenshot hero |
| Bookings and searches | Search or booking hero |
| Brand and atmosphere | Background video hero |
| Registrations | Urgency hero |
Building These Heroes in Canvas
The Canvas HTML Template ships with Bootstrap 5 bundled, so never add a separate Bootstrap CDN link. Brand styling comes from CSS variables, which means you restyle every hero from one place.
:root {
--cnvs-themecolor: #e4572e;
--cnvs-themecolor-rgb: 228, 87, 46;
--cnvs-primary-font: "Inter", sans-serif;
}
.hero-accent {
color: var(--cnvs-themecolor);
}Keep these Canvas-specific points in mind:
- Use
--cnvs-themecolorfor accents instead of hardcoding hex values in each section. - If the hero sits under a transparent header, check
--cnvs-header-bgand--cnvs-primary-menu-colorso navigation remains readable over images. - Size your logo with
--cnvs-logo-height, not CSS targeting#logo img. - Test at the Bootstrap breakpoints. Our guide to Bootstrap 5 breakpoints covers where split layouts should stack.
The honest trade-off: hand-coding eight variants is slow, and a blank-page start often produces generic results. Canvas Builder generates these sections as Canvas-compatible HTML from a plain-language brief, which is useful when you need to compare two or three hero directions for a client before committing.
Frequently Asked Questions
What is the best hero section design for conversions?
There is no single winner. Split heroes work well for services, product screenshot heroes for software, and booking heroes for search-driven sites. Choose the pattern that matches what your visitor came to do.
How tall should a website hero section be?
Aim for 70 to 100 percent of the viewport height on desktop, using min-vh-75 or min-vh-100. On mobile, allow content to define the height so the CTA is never pushed below the fold.
Should a hero section have more than one button?
Use one primary button. A secondary text link, such as “See how it works”, is acceptable, but two equally weighted buttons split attention and usually reduce clicks on the main action.
Does a video background hurt performance?
It can. Large videos slow loading and harm Largest Contentful Paint. Compress the clip under 3 MB, provide a poster image, and consider disabling the video on small screens.
How do I change hero colours in Canvas?
Set --cnvs-themecolor and --cnvs-themecolor-rgb in your CSS root. Buttons, accents and other themed elements inherit the change, so you avoid editing each section individually.
If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.
Build it by describing it
Canvas Builder turns a plain-English description into a complete, responsive website in minutes, then hands you the clean Bootstrap 5 HTML to host anywhere.