Dark Agency CTA Section with Strategy Call Booking & Proof Stats — Divi 5 Layout

CTA Agency Dark

High-contrast dark CTA section for agencies built in Divi 5. Bold headline, free strategy call button with glowing orange accent, and three proof-stat cards to boost conversions.

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

This layout is a single Divi 5 section built as two stacked rows — a centered headline block sitting above a three-column proof-stat strip — resting on a near-black #0a0a0a base with a Pexels image dimmed by a 93 → 99% opacity gradient overlay (overlaysImage: on). The composition does one job well: it moves a warm visitor from interesting to on the calendar. An orange #ff4d00 uppercase eyebrow anchors the top, a 64px Outfit headline delivers the pointed hook, and a 640px-max subhead sells the specific offer — a free 30-minute strategy call with a takeaway roadmap even if the buyer never hires you.

The primary action is a pill-shaped button (100px border-radius) with a soft orange glow box-shadow (preset3) that deepens on hover, followed by a low-contrast mailto link so visitors who dislike calendars still have a path in. Below, three glass-effect cards use rgba(255,255,255,0.04) fills, a 1px translucent white border, 16px corner radius, and a black drop-shadow to present numeric proof — 120+ brands, 3.4× conversion lift, 14 days to first demo. Each card lifts its border to rgba(255,77,0,0.55) on hover, signaling interactivity without any custom JavaScript.

Spacing is deliberate: 128px top and bottom padding on desktop, stepping down to 88px on tablet and 64px on phone. The heading scales 64 → 46 → 34px across the same three breakpoints, so it never breaks awkwardly at 375px. On mobile the three-stat row collapses to a single column with a tight 16px row gap while each card holds its 36×28px inner padding. The whole composition is bounded by a 780px content max-width auto-centered inside the section, so it drops cleanly into any page width without a redesign.

What’s inside

Full-bleed dark section with a layered dark-to-darker gradient sitting over a Pexels background image — swap the image and the overlay keeps working
Centered headline row capped at 780px: orange uppercase eyebrow (13px, 4px letter-spacing), 64px Outfit H1, and an 18px subhead constrained to a 640px column
Pill CTA button (100px radius, Outfit 14px uppercase) with an orange box-shadow glow that intensifies on hover, plus a mailto fallback link underneath
Three-column proof-stat strip (1_3, 1_3, 1_3) using glass-panel columns: translucent white fill, 1px border, 16px radius, black preset3 drop-shadow
Hoverable stat cards that shift their border to orange `rgba(255,77,0,0.55)` — pure CSS, no custom JS or child modules
Responsive typography scale: heading steps 64 → 46 → 34px across desktop, tablet, and phone
Adaptive section padding: 128 / 88 / 64px vertical rhythm across desktop, tablet, and phone breakpoints
Built entirely from native Divi 5 modules — Section, Row, Column, Text, Heading, and Button — no third-party plugins or child themes required

Who it’s for

Web design shops, branding studios, growth agencies, and independent consultants who sell a discovery or strategy call as the first paid touchpoint. It also fits SaaS implementation partners, B2B service firms, and marketing agencies whose funnel depends on booking a real conversation rather than a self-serve trial. Because the proof stats are numeric and short, it works especially well for teams that can quantify years in business, average conversion lift, or delivery timelines. Drop it near the bottom of a services page, at the end of a case study, or as the closing block of a full landing page — anywhere you've earned enough trust to ask for a call and just need one last shove.

Customization tips

To repalette, change the accent (#ff4d00) once in Site Styles and it cascades through the eyebrow, button background, button glow, and stat-card hover border. The dark base (#0a0a0a) can move to any brand-dark without touching the gradient stops — the overlay is defined in relative rgba, so it darkens whatever image you put behind it. Swap the Pexels background for anything around 1600×1000 or larger; because the overlay sits at 93–99% opacity, texture and mood matter more than subject clarity. Keep the headline under 12 words so it lands cleanly on phone at 34px. The subhead column is capped at 640px, so aim for 35–45 words. On the stats row, hold each number to about four characters (like 120+, 3.4×, 14 days) and the label to three or four uppercase words — anything longer will crowd the 28px card padding. Everything else is stock Divi 5 module settings, so no custom CSS is required.

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 Dark Agency CTA Section with Strategy Call Booking & Proof Stats — Divi 5 Layout

Where on my site is this section meant to sit?

It's designed as a final-push CTA — above the footer on a services page, at the end of a case study, or as the closing block of a full landing page. It assumes the visitor has already seen pricing, portfolio, or testimonial content earlier, so the copy skips introductions and goes straight to the ask.

How does the three-stat row behave on phones?

The `1_3, 1_3, 1_3` row switches to a single-column stack with a 16px row gap. Each card keeps its 36px vertical / 28px horizontal padding and its 16px border radius, and the 40px stat number stays centered — so `120+`, `3.4×`, and `14 days` still read as strong focal points on a 375px screen.

Can I remove the stats row without breaking the layout?

Yes. Delete the second row (the one with three 1_3 columns) and the headline row stays perfectly framed inside the 780px max-width. The 72px top margin lives on the stats row itself, so removing it also removes that gap cleanly — no leftover whitespace to chase.

Where do I wire up the button link?

The button ships without a URL by default. Open the Button module and paste your Calendly, SavvyCal, HubSpot Meetings, or contact-page URL into the Link field. While you're there, replace the placeholder `hello@forgeandpixel.com` mailto in the text module below with your real inbox.

What should I edit first?

Start with the H1 headline, the button label, the mailto fallback, and the three stat numbers plus their small-caps labels. Then swap the Pexels background via Section → Background → Image. Palette tweaks come last — the accent color is best changed globally in Site Styles so every hover state moves with it.

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.