Bold Fitness Testimonials Section — Divi 5 Gym Member Stories Layout

Testimonials Fitness Bold

Bold, dark Divi 5 testimonials section for gyms and strength coaches. Three member story cards with portraits, PR stats, and hover accents on a black backdrop.

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

The section sits on a near-black canvas (#0a0a0a) with 120px of vertical padding on desktop that tapers to 96px on tablet and 80px on mobile, giving the block breathing room without swallowing viewport height on smaller screens. The intro row leads with a compressed orange eyebrow ("Member Stories" — Outfit 700, 14px, 3px letter-spacing) that pins the section to a category, then hands off to an 800-weight H2 that scales from 56px on desktop to 44px on tablet and 34px on phone. A muted gray subhead (#a3a3a3, 18px, 1.7 line-height) sits under it at a 700px max width so the copy never widens into an unreadable line.

Below the intro, a single row hosts a flex container that arranges three Divi Testimonial modules in a 1/3 × 3 grid on desktop with a 28px gap, then collapses to a single stacked column on phone with a 20px gap. Each card carries a #131313 background with a hairline 1px #262626 border, 20px rounded corners, 36px of vertical padding, and a preset-2 drop shadow — so the trio reads as physical objects on the dark ground rather than flat panels. The orange accent (#ff4d00) recurs as the hover border color and shadow glow, tying the eyebrow, the role tags, and the hover state into one visual language.

The testimonial modules do the heavy lifting: portrait, author name in white, an orange uppercase role line (e.g. "Powerlifting Program · Age 38"), a repurposed "company" slot used as a stat line for the tangible number ("455 lb Deadlift · 14 months"), and the quote itself in soft gray at 17px / 1.65 line-height. The pattern is deliberately built around specifics — programs, PRs, elapsed months — instead of a five-star sticker, because the layout is meant for gyms that sell results, not vibes.

What’s inside

Three native Divi Testimonial modules pre-styled as dark cards with portrait, author, role tag, stat line, and quote fields
Intro block combining an uppercase orange eyebrow Heading, an 800-weight H2, and a centered supporting Text paragraph capped at 700px
Flexbox layout that renders as a three-across grid on desktop with a 28px gap and collapses to a single stacked column on phone
Hover state on every card: border color animates to #ff4d00 and the preset-2 shadow blooms into a translucent orange glow
Responsive typography — H2 scales 56/44/34px and section padding tapers 120/96/80px across desktop, tablet, and phone
Outfit font family applied consistently across the eyebrow, headline, body copy, author names, role tags, and quotes
Dark palette locked in: #0a0a0a section canvas, #131313 card fill, #262626 hairline border, orange #ff4d00 accent

Who it’s for

Built for strength gyms, powerlifting clubs, CrossFit boxes, personal-training studios, and online coaching businesses that sell measurable progress rather than lifestyle imagery. The stat-line pattern — a numeric PR next to the athlete's name and program — also fits nutrition programs, physique-transformation offers, and combat-sports gyms where the proof is in the number. The bold orange-on-black palette skews industrial and masculine, so it's a natural fit for hardcore-lifting brands, garage gyms, and no-frills training facilities. Softer wellness studios (yoga, Pilates, boutique group fitness) can still use the structure, but they'll want to swap the palette to something warmer before it feels on-brand.

Customization tips

The orange (#ff4d00) appears in exactly four places — the eyebrow, each testimonial's role tag, the card hover border, and the hover glow shadow. Change it once in each spot and the section re-skins to any brand color; a green or electric-blue swap takes about five clicks. The dark canvas (#0a0a0a) and card fill (#131313) work as a preset pair — if you want a light theme, flip them to something like #f5f5f5 and #ffffff and re-tint the muted paragraph text. Portraits are square avatars rendered at 240px — replace with your own 240×240 (or larger) headshots for the best result; anything smaller looks blurry on retina displays. Keep quotes to roughly 250–320 characters so the three cards stay height-matched under the stretch alignment; longer copy in one card will leave the row noticeably lopsided. Author names read best under 20 characters, and the "company" stat line is designed for 30–35 characters — enough for one number and one context clue.

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 Testimonials Section — Divi 5 Gym Member Stories Layout

How does the three-across card grid behave on mobile?

The flex row switches from a three-column grid to a single stacked column at the phone breakpoint. The gap tightens from 28px to 20px and the section padding drops from 120px to 80px so the cards don't feel cramped on a small screen.

Which Divi modules is this section actually built from?

Three module types — Heading (for the eyebrow and the H2), Text (for the intro paragraph), and the native Testimonial module for each of the three cards. The Testimonial module handles portrait, author, job title, "company" line, and quote body in a single block, so there is no custom HTML to maintain.

Where does the orange hover glow come from?

Each card ships with a preset-2 box shadow that shifts on hover — the 1px border animates to #ff4d00 and the shadow expands to 22px vertical / 48px blur in a translucent orange. It's all module-level design settings, no custom CSS needed.

The "company" field says something like "455 lb Deadlift · 14 months" — is that intended?

Yes. The Testimonial module's company slot is repurposed as a numeric stat line so each card leads with a concrete proof point instead of a company name. Replace it with your own PR, transformation timeline, or benchmark number.

What should I edit first when I drop this into my page?

Start with the three testimonials — portrait, author, role tag, stat line, and quote — then rewrite the H2 and eyebrow to match your brand voice. The palette swap (orange accent, canvas, card fill) is a five-minute job once the copy is in.

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.