Playful Coaching Hero Section for Divi 5 — Image Right Layout

Hero Coaching Playful

A warm, playful Divi 5 hero section for life and performance coaches. Split layout with headline, intro, rounded CTA button, and image right — ready to customize.

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 pairs a compact copy stack on the left with a portrait image on the right, laid out in a two-column flex row with a 64px column gap and 48px row gap. The stack follows a clean four-step hierarchy: a small uppercase eyebrow ("Coaching Cohort · Now Enrolling"), an 800-weight display headline, a paragraph of introductory copy, and a pill-shaped call-to-action with a reassurance micro-line beneath it. Section padding of 140px top and bottom on desktop gives the hero the airy first impression a coaching page needs — no cramped edges, plenty of room for the eye to settle before the CTA.

The palette leans warm and welcoming: a #FFF4EC cream background, a rose-pink accent (#E86A92) on the eyebrow, button, and button shadow, a deep plum (#2A2140) headline paired with softer plum body text (#4A4463), and muted violet (#8A7FA6) micro-copy. Typography pairs Outfit for the headline, eyebrow, and button with Nunito for body copy — a display/humanist combo that reads playful without slipping into cartoonish. The 58px headline carries the visual weight, while the pill button's layered rose glow (0px 12px 28px at 35% opacity) draws attention without shouting.

On mobile the row flips to flex-direction: column, so the copy stack lands above the image, section padding steps down to 96px (tablet) then 72px (phone), the headline resizes from 58px to 44px to 36px, and the column and row gaps collapse to 32px. The image itself carries a 32px border radius and an 800ms fade-in from the top, seated inside a soft 24px vertical shadow that keeps the composition grounded even on the smaller cream field.

What’s inside

Two-column flex row (1/2 + 1/2) with a 64px column gap that wraps to a single stacked column on phone
Uppercase Outfit eyebrow at 14px with 3px letter-spacing in rose #E86A92
Display headline at 58 / 44 / 36px in Outfit 800 with -1px letter-spacing across desktop, tablet, and phone
Nunito body paragraph at 19px with a generous 1.75em line-height for scannable intro copy
Pill Button module (999px radius) with a hover color shift and a layered rose box-shadow that deepens on hover
Micro reassurance Text module beneath the CTA in italic Nunito for logistics or social proof
Portrait Image module (900×1000 source) with 32px rounded corners and an 800ms fade-from-top animation
Warm cream section background (#FFF4EC) with responsive vertical padding of 140 / 96 / 72px

Who it’s for

Life, career, executive, and wellness coaches whose brand voice is warm and personable rather than corporate. It suits fitness coaches launching a small cohort, nutritionists opening enrollment, therapists advertising a discovery call, business mentors selling a 1:1 program, and course creators previewing an upcoming intake. The 60-minute clarity-call copy pattern is written for lead-gen coaches who convert on a free intro conversation, but the same structure fits anyone selling a signature program or waitlist. Solo studios with a single founder-coach get the most out of it — the portrait image slot is sized for a headshot or on-brand lifestyle photo, not a product shot or a team photo. Skip it if your brand is austere, ultra-minimal, or luxury B2B: the warm cream and pill button sit closer to friendly boutique than enterprise polish.

Customization tips

Swap the palette by editing six colors in one pass: background #FFF4EC, accent #E86A92 (used on eyebrow, button, and button shadow), headline #2A2140, body #4A4463, micro #8A7FA6, and button hover #D14E7A. A sage-and-terracotta or cream-and-navy remix works well without touching structure. Keep the headline under about 60 characters so it doesn't wrap past two lines at 58px on desktop — anything longer and the image column starts fighting it for balance. The body paragraph holds up around 3–5 short sentences; much more and the CTA sinks below the fold on shorter viewports. The image slot is designed for a roughly 9:10 portrait crop (source is 900×1000) — headshots, styled workspace shots, or lifestyle portraits work; avoid landscape photos or text-heavy screenshots. To flip the image to the left, swap the two column contents and leave the row settings alone.

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 Playful Coaching Hero Section for Divi 5 — Image Right Layout

Does the image stay on the right on mobile?

No. The row's `flex-direction` switches to `column` on phone, so the copy stack sits on top and the image drops below it. Desktop reading order is preserved rather than reversed.

Which Divi 5 modules make up this section?

Six native modules: two Heading modules (the small eyebrow and the H1), a Text module for the paragraph, a Button module for the CTA, a second Text module for the reassurance micro-line, and an Image module. No code, no third-party blocks.

What piece of copy should I rewrite first?

The H1. "Finally chase the goal you keep pushing to next Monday." is written for a productivity-adjacent coach and sets the whole voice. Rewrite it to your niche's core promise, then adjust the eyebrow (which functions as a status tag like "Now Enrolling") and the paragraph.

What image ratio does the right column expect?

The source is 900×1000, so about a 9:10 portrait. A headshot or lifestyle portrait works best; a landscape photo will either crop hard or leave awkward space next to the copy column.

Can I remove the small text under the button?

Yes — it's a separate Text module, not part of the Button. Delete it, or replace it with a testimonial snippet, a small guarantee, or a "next cohort starts…" date. The button carries its own bottom spacing, so nothing else needs adjusting.

How is the button styled to feel playful without looking cheap?

Three things do the work: a fully rounded 999px pill radius, a rose hover state that darkens from #E86A92 to #D14E7A, and a soft box-shadow (0px 12px 28px, ~35% opacity) that deepens on hover. Flatten the shadow or square the corners and it becomes a standard CTA.

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.