Kettlepace Hero — Bold Fitness App Landing Section for Divi 5

Hero Fitness Bold

Bold, high-conviction fitness hero for Divi 5. Dark green backdrop, oversized headline, glowing CTA, and coach-credibility eyebrow — built for strength app launches.

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 composition is a single centered column, capped at a 1040px row width, that stacks four deliberate moves from top to bottom: a lime-green eyebrow tag, a heavy display headline, a muted supporting paragraph, and a pill CTA that sits above a rounded product screenshot. The vertical rhythm is intentional — 20px between the eyebrow and headline, 24px to the subhead, 44px to the button, and 72px between the button and the image — so each element gets breathing room without losing the through-line down the page.

The palette does the heavy lifting for the training-app energy. The section sits on a deep forest ground (#0d2818), the eyebrow and image glow pick up a bright lime (#4ade80), the CTA jumps in a saturated green (#22c55e) with a near-black label (#052e16) for readable contrast, and body copy softens to a mint-gray (#c7d9cc) at 20px with a generous 1.65 line-height. The button carries a preset3 box-shadow tinted with 40% green, which lifts the pill off the background and telegraphs 'tap me' without needing an underline or arrow icon.

Typography scales down cleanly on smaller screens. The 68px display headline drops to 48px on tablet and 36px on phone, keeping the -2px letter-spacing and 1.05 line-height so wrap points stay tight and confident. Section padding trims from 140/32px on desktop to 96/24px on tablet and 72/20px on phone, and the row switches to a column flex direction on phone so the centered stack keeps its balance. The image caps at 880px with 24px rounded corners and a subtle lime border, so it reads like a framed product shot even without a device mockup wrapping it.

What’s inside

Single centered column inside a 1040px max-width row, stacked with hand-tuned 20/24/44/72px vertical gaps
Uppercase lime eyebrow Heading (#4ade80, 13px, 4px letter-spacing) for a proof-point or category tag
Bold display Heading module scaling 68 → 48 → 36px across desktop, tablet, and phone with -2px letter-spacing
Supporting Text module capped at 660px in mint-gray (#c7d9cc) at 20px / 1.65 line-height
Pill-shape Button module (999px radius) with a green-tinted preset3 box-shadow that intensifies on hover
Full-bleed Image module up to 880px wide, 24px rounded corners, 1px lime border, and a 48px offset green glow
Deep forest section background (#0d2818) with breakpoint-aware padding (140/96/72px vertical)
Row set to flex-direction: column on phone so the centered stack collapses cleanly without side-scroll

Who it’s for

This hero is tuned for fitness and wellness brands that need to open a landing page with confidence. It fits strength-training apps, home-workout platforms, coaching services, recovery and mobility products, macro-tracking or meal-plan apps, gym memberships, personal-trainer sites, and sports-nutrition storefronts. The centered, image-anchored composition also carries over to adjacent niches that want a bold, product-forward first screen — habit trackers, sleep apps, running platforms, or hydration brands. Because the copy pattern pairs a specific promise ('20% stronger in 12 weeks') with a low-friction CTA ('14-day free trial'), it's especially strong for subscription apps that convert on a trial rather than a hard sale.

Customization tips

Start in Divi's design presets and remap the four greens: #0d2818 for the section background, #4ade80 for the eyebrow and image glow, #22c55e for the CTA, and #c7d9cc for body copy. Any dark base plus one saturated accent will hold the same rhythm, so a navy/orange or charcoal/electric-blue variant works without touching layout. Keep the headline under about 60 characters so it wraps into three lines at 68px on desktop; longer strings will overflow the 880px cap on tablet. The eyebrow reads best under about 40 characters — beyond that the uppercase letter-spacing starts to break. Swap the Pexels image with a landscape asset around 940×650 (roughly 1.45:1); portrait crops will fight the centered stack and add awkward whitespace. Button text tolerates about 28 characters before the pill grows past a comfortable tap width. Need a secondary CTA like 'Watch demo'? Duplicate the Button module, drop the background to transparent, and keep a lime border for a matched ghost variant.

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 Kettlepace Hero — Bold Fitness App Landing Section for Divi 5

What's the tallest headline this hero can handle?

The Heading module is capped at 880px wide and uses -2px letter-spacing with a 1.05 line-height, so a three-line, roughly 60-character headline sits cleanly at 68px on desktop. Push past that and lines start to feel cramped — either shorten the copy or drop the desktop size to about 60px so the wrap points stay natural.

Can I replace the hero image with a phone mockup or a video?

Yes. The Image module lives at the bottom of the column and is capped at 880px, so a landscape phone-in-hand or product-in-context shot slots in without reflow. For video, swap in Divi's Video module and match the 24px border-radius; keep the file under about 4MB so the hero still paints fast above the fold on mobile.

Does the section stack correctly on phones?

Yes. The row is set to flex-direction column at the phone breakpoint and the section padding steps down from 140px to 72px vertical and 32px to 20px horizontal, so the centered stack keeps its rhythm without side-scroll. The display headline also drops from 68px to 48px on tablet and 36px on phone via the module's built-in responsive font sizes.

What should I edit first before shipping this hero?

The eyebrow and the headline, in that order. The eyebrow ('Backed by Olympic strength coaches') is doing the credibility work, so replace it with a real proof point of your own before touching anything else. Then rewrite the headline to a measurable promise — the specific-number + timeframe pattern ('20% stronger in 12 weeks. Twenty minutes a day.') is what makes the heavy type feel earned.

How do I keep the CTA visible if I recolor the section to a lighter background?

The button relies on a green-tinted preset3 box-shadow (rgba(34,197,94,0.4)) to lift off the dark ground. On a lighter section, either deepen the shadow to something like rgba(0,0,0,0.25) or add a 1px inner border in #16a34a so the pill doesn't dissolve into the background. Bumping the button text weight from 700 to 800 also helps.

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.