What is the ideal hero section layout and copy structure for high-converting SaaS landing pages?

The ideal hero section combines a concise value proposition, a quantifiable benefit headline, a supporting sub‑headline, a primary CTA button, and a contextual visual that together lift conversion rates above 30 %. **Step‑by‑step layout & copy** 1. **Headline** – 6‑8 words, include a metric (e.g., “Cut onboarding time by 45 %”). Use a H1 tag with `font-size: 48px` on desktop. 2. **Sub‑headline** – 12‑16 words, expand the benefit and add a credibility cue (e.g., “Trusted by 12,000+ SaaS teams”). Render as `

`. 3. **Primary CTA** – Action verb + outcome, e.g., “Start free trial — save $100”. Button width ≥120 px, contrast ratio ≥4.5:1, placed above the fold. Use HubSpot CTA builder or ConvertKit. 4. **Supporting visual** – 1.5 s max load, SVG or WebP, shows the product in context. Align left for two‑column, right‑aligned for single‑column. 5. **Trust bar** – 3‑5 logos or a star rating, each 24 px high, loaded via lazy‑load. 6. **Micro‑copy** – Below the button, add a short risk‑reversal line (“Cancel anytime, no credit card required”) in 10‑12 words. **Layout comparison** | Layout | Avg. Conv. ↑ | Load ms | Ideal Use | |--------|--------------|--------|-----------| | Single‑column | 28 % | 900 | Mobile‑first, simple SaaS | | Two‑column | 33 % | 1,200 | Complex UI demos, B2B | **Formula for hero uplift** ```text uplift = (CTR_hero – CTR_baseline) * AOV ``` where `CTR_hero` is measured with Google Optimize, `AOV` is average order value. **Quick checklist** - [ ] Headline