Bold Fitness Hero Section for Divi 5 — Free Trial CTA

Hero Fitness Bold

High-impact Divi 5 hero section for gyms and fitness studios. Dark green gradient, bold typography, coach-led messaging, and a standout free-trial CTA button.

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 hero opens with a full-bleed dark image (a gym scene) sitting behind a deep-forest gradient overlay that runs from rgba(13,31,20,0.85) at the top to rgba(6,15,10,0.95) at the bottom. That vertical fade keeps the athlete visible up top while the copy at the bottom stays sharply legible — you don't need to touch the photo to get contrast, the section does it for you. Vertical padding is heavy on purpose: 140px top/bottom on desktop, 100px on tablet, 80px on phone, so the hero always feels like a full frame rather than a strip.

Structure is a single centered column capped at 960px with everything flex-aligned to the middle. The stack reads top-to-bottom in five clear beats: a mint eyebrow tag (Coached Since 2016, Outfit 600, 14px, 4px letter-spacing, uppercase), a 68px Outfit 800 headline in white with a tight -1px letter-spacing and a 1.05 line-height that lets a two-line title breathe without gaps, a 19px Inter subhead capped at 720px so lines break in the sweet spot for reading, a pill CTA button, and an uppercase reassurance line underneath.

The palette does the heavy lifting. Background is #0d1f14 (forest green), headline is pure white, body copy is #D6E9DC for softness, and the accent — #25E37E on the button, #7CFFB0 on the eyebrow and micro-copy — pops hard against the near-black backdrop. The CTA is a fully-rounded pill (999px radius) with a 0 12px 32px rgba(37,227,126,0.35) glow shadow, so it reads as the one thing to click without extra decoration around it.

Mobile behavior is handled inside the module presets rather than through a separate layout. Headline steps from 68px → 48px → 36px, body from 19px → 17px, and side padding tightens from 24px to 16px so nothing crowds the screen edge. The hero image below the CTA sits inside a 24px rounded frame with a soft mint border and a deep 60px blur shadow, giving it a lift off the background without a second section.

What’s inside

Full-bleed background image with a vertical dark-green gradient overlay (85%→95%) baked in for guaranteed text contrast
Single centered 960px column stack: eyebrow tag → headline → subhead → CTA → reassurance micro-copy → framed hero image
Responsive typography presets on the headline (68 / 48 / 36px) and body (19 / 17px) — no separate mobile layout needed
Pill-shaped CTA (999px radius) with a mint glow shadow and a lighter hover color state already configured
Uppercase mint eyebrow and reassurance line using tracked-out Outfit for a sportswear/athletic feel
Rounded 24px hero image module with a translucent mint border and deep 60px blur shadow beneath the CTA
Padding scales down at each breakpoint (140 / 100 / 80px vertical) so the section stays proportional on phones
Two-font system out of the box: Outfit for headings, tag, button; Inter for body copy and micro-copy

Who it’s for

Built for strength and conditioning gyms, CrossFit boxes, small-group personal training studios, HIIT and bootcamp brands, and online coaching programs that lead with a free trial, intro week, or discovery call. The dark palette and disciplined type read athletic without leaning into clichés, so it also fits combat-sports gyms (boxing, BJJ, muay thai), strength/powerlifting facilities, and men's-health or transformation coaches selling premium programs. Anyone whose primary hero job is one confident promise and one obvious button — trial signup, consultation booking, or challenge enrollment — can drop this in as page one. It is not the right pick for yoga studios, wellness spas, or lifestyle fitness brands that need a softer, brighter aesthetic.

Customization tips

Start with the two accent colors — #25E37E (button + glow) and #7CFFB0 (eyebrow + micro-copy) — since they carry the whole brand tone; a global find-and-replace across the JSON is enough to reskin (electric blue for a boxing gym, red-orange for a bootcamp). Swap the section background image for your own gym shot at roughly a 3:2 or 16:9 ratio, at least 1600px wide, and dark enough that the gradient overlay still reads; the hero image module below the CTA works best at the same ratio. Keep the headline to 7–10 words across two lines — anything longer and the 68px desktop size starts to wrap awkwardly on tablet. Body copy should stay around 2–3 sentences (under 300 characters) so it fits inside the 720px cap without pushing the CTA below the fold. The reassurance line is designed for three short pipe-separated items; four is possible on desktop but wraps on phone. If you don't want two images, delete the image module and the column will re-center automatically.

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 Fitness Hero Section for Divi 5 — Free Trial CTA

How does this hero behave on mobile?

The headline drops from 68px on desktop to 48px on tablet and 36px on phone, body copy drops from 19px to 17px, and section padding tightens from 140px to 100px to 80px vertically. Everything stays in a single centered column, so no re-stacking or repositioning is required.

Which Divi 5 modules make up this section?

One Section, one Row, one Column, two Heading modules (eyebrow tag + main title), two Text modules (subhead + reassurance line), one Button module, and one Image module. That's it — no code modules, no third-party blocks.

Do I have to use the fitness photos, or can I replace them?

Replace both. The background is a Pexels stock image acting as an atmospheric backdrop, and the framed image below the CTA is a second Pexels shot. Swap them for your own gym floor, coach portrait, or client transformation photo — the gradient overlay does the color grading for you.

What should I edit first after importing?

Headline, subhead, and CTA text — in that order. Then update the two images, then the reassurance line under the button. Palette and typography are last since the presets are already dialed in to work together.

Can I use this as a full page instead of just a section?

Yes. It's built as a self-contained hero section, so you can drop pricing, testimonials, class schedule, or contact sections below it and the dark palette will carry through as long as those sections use compatible background colors.

Why is the button styled as a full pill?

The 999px border-radius and uppercase Outfit label are meant to read as a clear, athletic call-to-action against the dark background. The mint glow shadow (`0 12px 32px rgba(37,227,126,0.35)`) makes it the highest-contrast element on the screen without needing an animation.

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.