A decade of Canvas at your command — powered by our custom cutting-edge, continuously trained AI engineStart Building →
Glossary

What Is Hero Section?

A hero section is the large, prominent area at the top of a web page — the first thing visitors see when they land on the page, before any scrolling. It typically contains a headline, subheadline, call-to-action button, and a visual element (background image, video, or illustration). The hero section is the most valuable real estate on any page and largely determines whether visitors stay or leave.

Elements of an effective hero section

A high-performing hero section contains: a headline (clear value proposition in 6–10 words), a subheadline (2–3 sentences elaborating on the offer), a primary CTA button (action-oriented, specific — e.g. 'Get Started Free'), a secondary CTA (e.g. 'See Examples'), a visual element (screenshot, illustration, or photo reinforcing the message), and optionally, social proof (star rating, user count, logo strip).

Hero section design principles

Keep it simple — one primary message, one primary action. Visual hierarchy matters: the headline should be the largest text, the CTA should stand out through colour contrast. Avoid hero sections that are 100% image with text overlaid — this harms accessibility and often fails contrast checks. Test above-the-fold height on different devices — what fits in a desktop hero may push the CTA off-screen on mobile.

Hero section types

Centred hero — all elements centre-aligned, common for SaaS and app landing pages. Split hero — text on left, visual on right (or vice versa), common for product marketing. Full-background hero — full-bleed image or video behind text, common for hospitality, real estate, and portfolio sites. Minimal hero — white space with bold typography and no background image, increasingly popular for modern SaaS.

Hero Section & Canvas Builder

Canvas Builder can generate custom hero sections as individual blocks or as part of complete pages. Describe your niche, brand colours, and CTA — get a responsive hero in seconds.

Try Canvas Builder →

Frequently Asked Questions

How tall should a hero section be?
Hero height should show key content above the fold on common screen sizes (typically 900px–1080px desktop, 667px–812px mobile). A minimum height of 80vh is common, ensuring the CTA is visible without scrolling. Avoid fixed pixel heights that may not work across screen sizes.
Should a hero have a video background?
Video backgrounds are visually impressive but can hurt page speed and distract from the message. Use them for hospitality, lifestyle, and portfolio sites where atmosphere matters. For SaaS, product, and agency sites, a strong static image or illustration with fast load time typically converts better.
Can Canvas Builder generate hero sections?
Yes — Canvas Builder can generate full hero sections as standalone blocks (1 credit) or as part of a complete landing page. You describe the style, colours, and content, and get production-ready Bootstrap 5 HTML.