Bold SaaS Revenue Forecasting Hero — Divi 5 Layout

Hero SaaS Bold

A high-impact Divi 5 hero section for SaaS products. Two-column layout with bold headline, eyebrow tag, trial CTA, trust line, and product image.

Rate this element

Be the first to rate

Download this section — free

Divi 5 JSON — import in seconds
Commercial license included
No account needed

Click to view the full page

Overview

A two-column hero built for SaaS conversion: copy on the left, product image on the right, both constrained to a 1240px row with a 64px column gap and 48px row gap. The section sits on a clean white background with generous 120px vertical padding (80px tablet, 64px phone), so the composition never feels cramped even on wide viewports. A red eyebrow — 14px Inter uppercase in #dc2626 with 2px tracking — sits above the headline as a segment marker, followed by an 800-weight H1 that scales from 64px on desktop down to 48px on tablet and 36px on phone.

The palette does real work here. Slate ink (#0f172a for the headline, #334155 for the 20px body copy, #64748b for the trust microcopy) keeps the reading order calm, while a single saturated red carries the eyebrow, the primary CTA, and the soft red glow behind both the button and the product image. That means the eye lands on the headline first, tracks down to the red button, and finishes on the image without ever bouncing to a second accent color. Body copy is capped at a 560px max-width so lines break naturally instead of stretching across the column.

The CTA is a fully-styled Divi button — 18/32px padding, 12px radius, and an rgba(220,38,38,0.35) shadow that deepens on hover — with a trust line directly beneath it covering the three objections that typically kill SaaS trial signups. The image module ships with a 24px radius, a 1px slate border, and the same red glow, animated with a slide-in-from-right on load; the button gets a matching fade-in-from-top so the two halves resolve in sequence. On phones the row flips to flex-direction: column, the image stacks beneath the copy, and every type size steps down cleanly.

What’s inside

Two-column flex row (1240px max, 64px column gap, 48px row gap) that stacks to a single column on phone via `flex-direction: column`
Uppercase red eyebrow heading in Inter 14px with 2px letter-spacing as a segment marker above the headline
Responsive H1 in Inter 800 that scales 64px → 48px → 36px across desktop, tablet, and phone with -1.5px tracking
20px Inter body paragraph capped at a 560px reading width, dropping to 17px on phone
Primary CTA with red (#dc2626) fill, 12px radius, red-glow box-shadow, and a darker-red hover state (#b91c1c)
Trust microcopy row (14px, #64748b) directly under the CTA for objection handling
Product image module at 1280×960 with 24px rounded corners, a 1px slate border, and a matching red-glow shadow
Choreographed load: button fades in from the top (600ms), image slides in from the right (800ms)

Who it’s for

SaaS companies pitching a data-heavy product where the story needs a headline promise, a proof paragraph, and a screenshot on the fold. Best fit: revenue intelligence, analytics, CDPs, forecasting, billing, and growth tooling — anything where a dashboard or product UI is the hero asset. It also works for developer platforms, B2B AI tools, and vertical SaaS (fintech, health tech, ops software) that want a bold, confident opener without a video. The high-contrast red-on-white treatment leans series-B startup more than enterprise navy, so if your brand is muted corporate blue, this template's palette will need reworking before it feels right.

Customization tips

Swap the red accent by editing the eyebrow color (#dc2626), the button background and its hover (#b91c1c), and the two red rgba shadow values on the button and image — four fields drop your brand color in everywhere it lands. Keep the H1 under about 55 characters so the 64px desktop size doesn't wrap awkwardly against the 560px reading cap; the eyebrow reads best at 3–5 words. The right-column image ships at 1280×960 (roughly 4:3), so screenshots or product mockups exported near that ratio slot in without re-cropping — the 24px radius will clip any hard-edged UI slightly, so add safe padding inside your export. If you need a three-line trust caption, nudge the section bottom padding from 120px up to 140px to keep the fold breathing.

How to install this layout

Download the layout JSON file from this page.
Open the target page in the Divi 5 builder.
Open the portability panel (up/down arrows icon) and choose the Import tab.
Upload the JSON. Tick “replace existing content” only for full-page imports.
Check the page at desktop and mobile widths, then swap in your copy and images.

Full walkthrough with troubleshooting: How to Import a Divi 5 Layout.

Questions about Bold SaaS Revenue Forecasting Hero — Divi 5 Layout

What image size should I use to replace the hero screenshot?

The module ships at 1280×960 (roughly 4:3). Anything close to that ratio drops in without re-cropping. If you swap in a taller portrait image, the 24px rounded corners still work but the column will grow and push the button off the fold on 13" laptops — worth checking before you publish.

How does the layout behave on mobile?

The flex row flips to `flex-direction: column` on phone, so the image stacks under the copy. Section padding drops to 64px top/bottom with 20px side padding, the H1 scales from 64px → 36px, and body copy from 20px → 17px. The button, eyebrow, and trust line keep their desktop sizes.

What Divi 5 modules does this use?

One Section, one Row (two 1/2 columns), two Heading modules (eyebrow + H1), two Text modules (body paragraph + trust line), one Button, and one Image. No premium modules, no shortcodes, no custom code — everything is native Divi 5.

What should I edit first?

The eyebrow label (the positioning line), the H1 (the core promise), and the CTA text. Those three drive the conversion. The image is second, because the whole right column is built around it — leave that swap until you have your final product screenshot exported at the right ratio.

Can I remove the red glow behind the button and image?

Yes. Both glows are box-shadow values on the module — clearing them flattens the look considerably, which suits a more conservative brand. If you want depth without the color, switch the shadow rgba from red to a neutral like `rgba(15,23,42,0.15)` on both modules.

Which Divi version does this layout need?

Divi 5. The layout is generated natively for Divi 5 and validated against its real module structure before publication, so it imports clean into the current builder.

Can I use this layout on client websites?

Yes. Every download includes a commercial license covering unlimited sites you own or build for clients. Only reselling or redistributing the layout file itself is prohibited.