Bold Green Fitness Hero Section for Divi 5 — Strength Coaching Landing

Hero Fitness Bold

High-impact Divi 5 hero layout for personal trainers and gyms. Bold green gradient, centered headline, CTA button, and hero image for strength coaching sites.

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 single-column hero built for high-conviction fitness brands. The section stacks a deep forest-green base (#0b3d2e) under a top-to-bottom gradient overlay, then blends that over a training-gym background image so the copy stays legible while the environment still reads. Everything sits inside a 960px row with a 680px text column, which keeps the line length comfortable even on ultra-wide displays.

The hierarchy is intentionally strict: a mint-green eyebrow in Inter (14px, 4px letter-spacing, uppercase) establishes credibility, a 64px Outfit headline in 800 weight carries the promise, a 20px Inter subhead does the explaining, and a pill-shaped CTA closes the loop. A rounded hero image sits underneath the CTA with a slide-up entrance animation and a soft drop shadow, giving the section a photo-anchored finish rather than ending on a button.

Spacing scales with viewport: section padding drops from 140px vertical on desktop to 100px on tablet and 80px on phone, while horizontal padding uses vw units so the gutters breathe on any width. Typography follows the same curve — the headline steps down 64 → 48 → 36px and the body text softens to 17px on phones — so nothing feels cramped or oversized on mobile. The row also flips to a stacked column layout on phone through the flexDirection setting, keeping the image and CTA in a clean vertical read.

What’s inside

Native Divi 5 section → row → column structure with a 960px max-width row and 680px text column
Layered background: solid forest green, top-to-bottom gradient overlay, and a full-cover Pexels-ready image slot
Mint-green eyebrow (14px Inter, uppercase, 4px letter-spacing) over an 800-weight 64px Outfit headline
Pill-shaped CTA button (999px radius) with a green glow box-shadow and darker hover state (`#22C55E` → `#16A34A`)
Rounded hero image module (20px radius, 900px max) with slide-from-bottom animation and 30px/80px drop shadow
Responsive typography scale: 64 / 48 / 36px headline and 20 / 17px body across desktop, tablet, phone
Progressive section padding (140 / 100 / 80px) and vw-based horizontal gutters that adapt to any screen

Who it’s for

Strength coaches, personal trainers, and small-group gyms selling structured programs rather than casual class drop-ins. The confident tone and dark-green palette suit CrossFit boxes, powerlifting and hybrid athlete gyms, online coaching businesses, and recovery-focused studios that blend strength work with mobility or physio. It also translates cleanly to nutrition coaches and body-recomposition programs where the pitch centers on a measurable 8–12 week outcome. If your offer relies on trust, a bold before/after promise, and a lead-magnet CTA (free assessment, intro call, program preview), the hierarchy already routes visitors toward that single next step.

Customization tips

Swap the palette in one place by editing the section background color and gradient stops, then the eyebrow color and the button's background/hover/shadow — keep them related so the glow still reads. Copy length is the biggest constraint: the eyebrow works up to ~30 characters before it wraps at 4px letter-spacing, the headline lands best at 5–9 words (it hits 64px on desktop), and the subhead should stay one to two sentences so the text column doesn't overrun the 680px max-width. Replace the two Pexels images with your own at roughly 1200×750 (3:2) — the section background wants a wide gym or training environment, the foreground image wants a crisp product/athlete shot that survives the 20px corner radius. If you don't want the animated entrance, remove the slide animation on the image module; if the CTA feels too soft, drop the border-radius to 8px for a rectangular button without touching anything else.

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 Green Fitness Hero Section for Divi 5 — Strength Coaching Landing

How does the headline behave on mobile?

It scales down from 64px on desktop to 48px on tablet and 36px on phone, and the body text drops from 20px to 17px, so the hierarchy stays intact without overflowing narrow screens.

What image sizes should I use?

The foreground hero image is set to 1200×750 (3:2) and capped at a 900px display width with a 20px border radius. The section background image uses `size: cover` at `center center`, so anything landscape and roughly 1600–2000px wide will work.

Can I remove the background photo and keep just the green gradient?

Yes — delete the image URL inside the section's background settings. The gradient (`rgba(11,61,46,0.85)` → `rgba(4,26,20,0.95)`) is already set to display on its own and will still give the section depth.

Which fonts does the layout use, and can I switch them?

The headline is Outfit at 800 weight; the eyebrow, body text, and button use Inter. Both are Google Fonts, so you can swap either family in the module font settings without breaking the spacing.

What should I edit first after importing?

Replace the two Pexels image URLs with your own assets, then rewrite the eyebrow, headline, subhead, and button text. The CTA link is empty by default, so point it at your booking or lead-capture URL before publishing.

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.