Divi5Lab

Bold Fitness Testimonials Section for Divi 5 — Gym & Barbell Club

High-impact dark testimonials layout for fitness brands: three member story cards, bold orange accents, and Divi 5 responsive columns ready to drop into any gym site.

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 pure black #0a0a0a stage with 120px of vertical padding on desktop (80px on phone), giving the testimonial cards room to breathe against a stark backdrop. A centered header row leads: a small orange #ff4d00 eyebrow reading MEMBER STORIES in uppercase Outfit with 4px letter-spacing, an 800-weight display H2 at 56px on desktop that scales to 44px on tablet and 34px on phone, then a muted #b8b8b8 19px intro paragraph capped at 680px so it never sprawls across wide screens.

Below the header sit three native divi/testimonial modules laid out as a single 1_3, 1_3, 1_3 row with a 1240px max width and a 32px gap on both axes. Each card carries a #141414 background, an 18px border radius, a 1px #262626 outline that swaps to the brand orange on hover, and a preset-2 drop shadow (0 / 12px / 32px, black at 35%). Inside each card you get everything Divi's testimonial module ships with — square portrait, author name, job-title line used for the athlete's PR or milestone, company, and body quote — so you're not wiring up a custom pattern to display five pieces of content per person.

On phone, the row's flexDirection flips to column and the three cards stack full-width in author order. The header row already stacks by default because it's a single column above the grid. Typography stays Outfit across headings and body with -1.5px letter-spacing on the display H2, and the whole block holds together as one self-contained section you can drop into any dark landing page without touching the surrounding chrome.

What’s inside

  • Full-width section on pure black (`#0a0a0a`) with 120px / 80px top-and-bottom padding for desktop and phone
  • Centered header row: orange uppercase eyebrow, 800-weight Outfit H2 (56 / 44 / 34px), and a 680px-capped muted intro paragraph
  • Three native Divi 5 `testimonial` modules — author name, achievement job-title line, company, square portrait, quote body
  • Three-column grid at `1_3, 1_3, 1_3` inside a 1240px max-width row with a 32px column and row gap
  • Dark `#141414` cards with 18px border-radius, a 1px `#262626` border, and a preset-2 drop shadow
  • Orange (`#ff4d00`) hover border on each card, matching the eyebrow accent above
  • Mobile behavior: the row's `flexDirection` switches to `column` so cards collapse into a single stacked list
  • Outfit type family throughout, with tuned letter-spacing (-1.5px on the display H2, 4px on the eyebrow)

Who it’s for

Built for strength gyms, barbell clubs, powerlifting and CrossFit affiliates — anywhere the credibility argument is real athletes hitting real numbers. The achievement-forward job-title line (deadlift PR, meet total, injury rehabbed) is what makes it work for fitness specifically; you can point to a measurable outcome under each name instead of a generic 'happy customer' quote. It also translates cleanly to physical therapy and rehab clinics, personal-training studios, martial arts and combat-sports gyms, and coaching or nutrition programs where before/after evidence carries the pitch. The dark palette and heavy display type push it toward brands with an intense, no-nonsense voice — less appropriate for pastel wellness studios or spa-style boutiques, where you'd want a lighter treatment.

Customization tips

Swap the orange to your brand color by search-replacing #ff4d00 in the eyebrow color and the card hover border — those are the two spots the accent lives. To go light-mode, change the section background from #0a0a0a to white, the cards from #141414 to a soft off-white like #f5f5f5, the H2 color from white to near-black, and the intro text from #b8b8b8 to a mid-gray. Keep quotes to roughly 30–55 words each — much longer and the three cards stop feeling equal-height on desktop; much shorter and they read thin. Treat the job-title line as a stat, not a sentence (e.g. 'Deadlift PR: 425 lb · Member since 2022') — that's the credibility hook. Portraits render as a square crop, so upload at 300×300 or larger (500×500 is safe); the placeholder i.pravatar.cc URLs need to be replaced with real member photos before you ship.

How to install this layout

  1. Download the layout JSON file from this page.
  2. Open the target page in the Divi 5 builder.
  3. Open the portability panel (up/down arrows icon) and choose the Import tab.
  4. Upload the JSON. Tick “replace existing content” only for full-page imports.
  5. 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 for Divi 5 — Gym & Barbell Club

Are these real Divi testimonial modules or custom-built cards?

They're three native `divi/testimonial` modules — you edit the built-in author, job title, company, portrait, and content fields directly in the builder, so there's no custom pattern, ACF, or repeater to wire up.

How does the three-column grid behave on mobile?

The row's `flexDirection` switches to `column` on phone, so the cards stack full-width in the order Riley → Jordan → Sam. Section padding also drops from 120px to 80px top and bottom to tighten the vertical rhythm.

What image size should I use for the portraits?

The testimonial module renders the portrait as a square crop, so upload at 300×300 or larger — 500×500 is a safe minimum. The placeholder URLs point to `i.pravatar.cc`; swap them for real member photos before you launch.

What should I edit first when I open this in the builder?

The three testimonials themselves. Swap the author names, rewrite each job-title line as a concrete achievement (a lift number, meet total, or rehab milestone works best), replace the portraits, and update the quote body. Header copy is the last thing to touch.

Can I add a fourth testimonial?

Yes — either change the row's column structure from `1_3, 1_3, 1_3` to a four-up layout (the cards get narrower and copy has to shorten), or leave it at three per row and duplicate the row below for a second set of three.

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.