Divi5Lab

Ironhaus Strength Club — Bold Fitness Landing Page | Divi 5 Layout

A bold, high-contrast Divi 5 fitness landing page for coached barbell gyms and strength studios. Hero, benefits, testimonials, FAQ, and CTA sections included.

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 layout runs on a single conviction: dark, generous, and orange when it matters. Every section sits on the same #0A0A0A canvas, so the whole page reads as one continuous room instead of a stack of unrelated blocks. Section padding steps down from 140px on desktop to 96px on tablet and 72px on phone — enough breathing room to keep the density readable, tight enough that the hero lands above the fold on a normal laptop.

The hero splits 3/5 · 2/5. A 64px Outfit headline at 800 weight, letter-spacing −1.5px, drops to 48/38px on tablet/phone; above it sits a small uppercase eyebrow in the #F04E23 accent color, so a category or location leads before the H1 hits. Body copy under the headline uses rgba(255,255,255,0.78) — deliberately softer than pure white — so the H1 stays the strongest voice on the page. On the right, a portrait Pexels image with a 16px radius and a deep drop-shadow (0/40/80 at rgba(0,0,0,0.55)) anchors the composition and pulls the eye to the CTA button.

Below the hero, the polarity flips: three white benefit cards (#FFFFFF, 20px radius) sit on the same black canvas, each with a 56px orange icon and a hover state that lifts the card 6px and paints an orange-tinted shadow. That single flip is the reason the page feels loud instead of monotone. A six-card '01–06' feature grid picks up next, but this time the cards are #141414 with a hairline rgba(255,255,255,0.08) border and 40px orange numerals doing the visual counting — a second polarity swap that gives the middle of the page rhythm. Testimonials use three native Divi Testimonial modules with pravatar placeholder portraits, and the company slot is repurposed as a stat line ('Deadlift +95 lbs', 'First 300 lb squat') so the number lands right under the name. The FAQ closes on a two-column grid with FontAwesome question-circle icons in the accent color. Every row uses flexDirection: column on phone, so the whole page single-stacks without a media-query rewrite.

What’s inside

  • Split hero (3/5 · 2/5) with an 800-weight Outfit headline that cascades 64px → 48px → 38px, an uppercase orange eyebrow, softened body copy, and a right-side portrait image with 16px radius plus a deep drop-shadow
  • Reverse-polarity benefits row: three white cards on the black canvas, 56px orange icons (2× FontAwesome, 1× Divi Icons), 6px hover lift with an orange-tinted `preset3` shadow
  • Six-card '01–06' feature grid on `#141414` cards with hairline white borders, 40px orange numerals, h3 titles at 24px, and matching hover shadows
  • Three native Divi Testimonial modules with pravatar portraits, a job-title line, and the company slot repurposed as a stat ('Deadlift +95 lbs', 'First 300 lb squat', '225 lb deadlift x3')
  • Two-column FAQ block using FontAwesome question-circle icons in the accent color, with h3 questions and paragraph answers styled through the Text module
  • Two Divi Button modules wired to `#F04E23`: a squared-6px CTA in the hero, and a pill-radius (`999px`) closer above the FAQ, both with layered orange box-shadows
  • Responsive system baked in end-to-end: section padding steps 140 → 96 → 72px, every multi-column row switches to `flexDirection: column` on phone, and headline sizes drop cleanly at each breakpoint

Who it’s for

Independent gyms, CrossFit and strength boxes, boxing and martial-arts studios, boot camps, and personal-training brands that want to look like they mean business — the black/orange/white palette signals intensity without going neon-arcade. It also lands well for adjacent 'no-nonsense' service brands: barbershops, tattoo studios, motorcycle shops, auto-detailing garages, whiskey and craft-beer taprooms, or a construction/contracting firm that wants a tougher web presence than the usual corporate blue. Anywhere a founder wants copy-forward proof — stats, member counts, coach credentials, real numbers — over stock hero imagery, this structure carries the message. It is not the right pick for wellness, luxury, or feminine-leaning brands; the palette and typography lean masculine and industrial.

Customization tips

Rebranding is fast: every accent — eyebrow, buttons, icons, section numerals, hover shadows — reads from the same #F04E23 hex. A single find-and-replace in the exported Divi 5 JSON re-tints the entire page in under a minute. Keep the canvas at #0A0A0A or nudge it toward #111 for a softer black; the white benefit cards need the contrast to keep working.

Copy limits: the hero headline holds up to about 55 characters before the 64px size wraps awkwardly on desktop — aim for 6–9 words. Eyebrow copy should stay ≤ 40 characters given the 3px letter-spacing. Feature-card titles look best at 8–14 words; body copy at 30–55 words per card. Testimonial quotes read cleanly at 25–45 words. The hero image is portrait 1000×1200 (5:6) — substitute anything close to that ratio to keep the composition balanced. Testimonial portraits work at 240×240 minimum; the pravatar placeholders swap directly for real headshots. Icons in the benefit row and FAQ can be replaced with any FontAwesome or Divi Icons glyph without touching CSS.

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 Ironhaus Strength Club — Bold Fitness Landing Page | Divi 5 Layout

Which Divi 5 modules does this layout actually use?

Only native Divi 5 modules — Heading, Text, Button, Image, Blurb (the white benefit cards), Testimonial, and Icon. No third-party plugins, no custom code modules, no shortcodes wrapped around foreign markup. Everything sits inside the standard Section → Row → Column structure.

Does it hold up on phones?

Yes. The hero row flips to a stacked column on phone, the headline cascades 64 → 48 → 38px, both the three-card benefits row and the six-card feature grid drop to a single column via `flexDirection: column`, and section padding steps down from 140 → 96 → 72px so nothing feels cramped on a small screen.

The stock photo and testimonial portraits — do I need to replace them?

For a live launch, yes. The hero uses a Pexels barbell photo and the three testimonial portraits use `pravatar.cc` placeholders — perfect for previewing the design, but replace them with real member photos or licensed stock before pushing public. Every image is a native Divi Image or Testimonial portrait, so drag-and-drop replacement takes seconds each.

What should I edit first to make it mine?

In order: the hero eyebrow (city + category), the H1 (state your promise in 6–9 words), the CTA button label, then the three benefit-card blurbs (name the three things members actually get). Next, the six numbered feature cards — those are where you sell the specifics. Testimonials and FAQ can be filled in last; the top of the page is what converts.

Can I use it without the orange accent?

Yes. Every orange element (`#F04E23`) — eyebrow, buttons, icons, section numerals, hover shadows — reads from that single hex value, so a find-and-replace in the JSON re-brands the whole page in under a minute. Just keep the accent's contrast against the dark canvas high (WCAG AA) if you switch to a lighter color.

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.

More full landing pages

Browse all full landing pages