Bold Fitness Hero Section — Divi 5 Layout | Divi5Lab

Hero Fitness Bold

Dark, high-impact Divi 5 hero section for gyms and fitness studios. Full-bleed training photo, bold orange CTAs, social-proof bar, and responsive typography — download the JSON and import in one click.

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 is a single-column, dead-center layout stacked over a dark photographic backdrop. The section pulls a fitness photo from Pexels as the background image and drops a near-black gradient over it (from 78% opacity at the top down to 95% at the bottom, on a #0a0a0a base), so the imagery reads as texture and mood rather than the primary subject — the words always win. Vertical padding is generous: 150px top and bottom on desktop, 110px on tablet, 80px on phone, which keeps the block breathing on large screens without wasting real estate on mobile.

The content column is capped at 860px and centered with auto margins, and inside it every module is aligned to center with a 24px row gap. Hierarchy runs top-to-bottom in five distinct steps: an orange (#ff4d00) uppercase eyebrow in Outfit 700 with 4px tracking, a display headline in Outfit 800 that steps down through 72px → 52px → 38px at desktop/tablet/phone with a subtle text shadow for lift, a 19px body paragraph clamped to 640px so the line length stays readable, a dual-button CTA row, and a small trust microcopy line with rating, hours, and a no-contract note.

The two buttons carry the whole visual weight of the accent color. The primary — Start Your Free Week — is solid #ff4d00 with a soft orange glow shadow that expands on hover. The secondary — View Membership Plans — is transparent with a 2px white border at 40% opacity that flips to the orange accent on hover, so it never competes with the primary but stays inviting. On phone the column stacks naturally (column flexDirection switches to column), the buttons drop below the copy at full width of the centered stack, and the headline's 38px size prevents the classic three-word-per-line hero collapse.

What’s inside

Full-bleed dark hero section with a Pexels-sourced background image sitting under a 78% → 95% `#0a0a0a` gradient overlay for guaranteed text contrast
Single centered column capped at 860px, with body copy further clamped to 640px for a comfortable measure
Uppercase orange eyebrow heading in Outfit 700 with 15px size and 4px letter-spacing as a pre-headline signal
Display headline in Outfit 800 that scales 72px / 52px / 38px across desktop / tablet / phone, with tight -1px letter-spacing and a preset text shadow
Dual CTAs: a solid `#ff4d00` primary button with a soft orange glow shadow, plus a transparent secondary button whose white border shifts to orange on hover
Trust microcopy line (star rating, 24/7 hours, no-contract note) sitting 16px below the buttons
Responsive section padding that steps down 150px → 110px → 80px vertically
Built entirely from native Divi 5 modules — Section, Row, Column, Heading, Text, and Button — no third-party dependencies

Who it’s for

Built for gyms, strength studios, CrossFit boxes, and personal trainers where the top of the page needs to feel loud, physical, and confident. It also fits boot-camp coaches, martial-arts and combat-sports schools, HIIT and cycling studios, and hybrid athletic clubs that want the free-trial CTA above the fold. The dark palette with a single ignited accent color reads equally well for online coaching programs, nutrition-and-training brands, and fitness apps whose landing page needs to convert cold traffic. Anywhere the offer is come train with us this week and the proof is rating + numbers + no-contract flexibility, this hero carries the message without extra scaffolding.

Customization tips

Start with the accent color: #ff4d00 appears in four places — the eyebrow heading color, the primary button background, the primary button's glow shadow (rgba(255,77,0,0.45) / .65 on hover), and the secondary button's hover border. Change all four together to swap the palette (electric yellow, blood red, and neon cyan all work over the same near-black base). Replace the background image with your own gym photo at 1600–1920px wide, landscape-oriented, with a strong dark or high-contrast subject so the gradient overlay still keeps text legible. Keep copy inside these ranges to preserve the composition: eyebrow ~30 characters, headline ~50 characters over 1–2 lines, body copy 2 short sentences (roughly 220 characters), button labels 2–4 words. If you only need one CTA, delete the secondary button module rather than hiding it — the column's 24px row gap will re-center everything for you.

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 — Divi 5 Layout | Divi5Lab

Does the 72px headline still fit on phones?

Yes. The heading module has a phone-specific size of 38px with a 1.05em line height, which keeps a 6–8 word headline to two or three balanced lines on a typical 375px viewport. If you push past ~55 characters, add a manual line break where you want it to wrap.

Can I use my own background image instead of the Pexels one?

Yes — open the Section's background settings and swap the image URL. The gradient overlay is on top of the image (overlaysImage is on) at 78%→95% opacity, so almost any landscape photo will keep the white and orange text readable without extra editing.

What modules make up this hero?

Six native Divi 5 modules inside one Section → Row → Column: an eyebrow Heading, a main Heading, a Text module for the body paragraph, two Button modules stacked, and a second Text module for the trust line under the buttons.

How do I change the buttons if I only want one CTA?

Delete the second Button module (the outlined *View Membership Plans* one). The column uses a 24px flex row-gap, so the remaining button will re-space itself automatically. You can also flip which one is primary by copying the solid-orange background/shadow styles onto the other button.

What should I edit first when I drop this in?

Work top-down: eyebrow line (your positioning tagline), the main headline, the 640px body paragraph (keep it to two sentences and end with your specific offer), then the two button labels, and finally the trust microcopy — rating, hours, and one differentiator.

The section feels tall on desktop — can I shrink it?

The vertical padding is set to 150px top and bottom on desktop, 110px on tablet, 80px on phone. Reduce the desktop value in the Section's spacing settings to tighten the block; anything between 100px and 140px still gives the hero enough air without dominating the fold.

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.