Playful Coaching Hero — Bloom Coaching | Divi 5 Layout

Hero Coaching Playful

A warm, playful Divi 5 hero for life coaches: bold headline, discovery-call CTA, and a soft pink-and-cream palette designed to convert without the hustle-culture vibes.

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 hero opens on a soft cream (#FDF4EC) canvas with generous vertical breathing room — 140px top and bottom on desktop, easing down to 96px on tablet and 72px on mobile so the section always feels considered without dominating the fold. Inside, a two-column row (3_5 for the copy, 2_5 for the portrait) uses a 72px column gap and center alignment, letting a warm blush pink (#E58AA0) and deep aubergine (#2E2A47) do the heavy lifting for hierarchy without a single divider or icon in sight.

Type is unmistakably conversion-first. A tiny 14px pink eyebrow ("1:1 Life Coaching") in tracked-out uppercase primes the pitch, then a 68px display headline drops to 48px on tablet and 38px on phone, with a tight -1.5px letter-spacing and a 1.05em line height — big without shouting. Body copy sits at 20px (17px on phone) in a muted #5B5773 at 1.7em leading, capped at a 560px max-width so lines never sprawl into the image column. The block ends on a pill CTA ("Book a Free Discovery Call") with a 999px radius, a pink-glow drop shadow (preset3) and a subtle -3px hover lift that keeps it feeling tactile rather than corporate.

The right column carries a portrait 1000×1200 image wrapped in a 40px radius and a diffuse blue-tinted preset4 shadow (rgba(155,181,214,0.45)) that stops it from looking cut out against the cream. A center-origin 800ms fade animation loads it in, and an -8px hover translate gives it a small "come closer" moment. On phone the row switches to a stacked flexDirection column with a 56px rowGap, so the copy leads and the image follows — no horizontal scroll, no re-tuning. Every value here — spacing, palette, animation — lives on native Divi 5 module fields, so a preset-level palette swap propagates cleanly through the eyebrow, button, and shadows.

What’s inside

Two-column row (3_5 copy / 2_5 image) with a 72px column gap and centered vertical alignment
Uppercase pink eyebrow + 68px display headline with tablet (48px) and phone (38px) sizes baked in
Rounded 40px portrait image (1000×1200) with a blue-tinted preset4 shadow and 800ms fade-in
Pill CTA button with 999px radius, a pink-glow drop shadow, and a -3px hover lift
Mobile column-stack via flexDirection change plus tuned 72px phone padding — no side-scroll
Body text capped at a 560px max-width so line length stays readable next to the portrait
Cream / blush / aubergine palette wired through native Divi decoration fields for easy reskinning

Who it’s for

Life coaches, mindset coaches, career coaches, wellness practitioners, and softer-brand therapists who want something friendlier than a corporate SaaS hero. The playful pink and aubergine palette suits coaches whose voice leans on empathy, curiosity, and small wins over hustle language — holistic health, breathwork, ADHD coaching, motherhood coaches, mid-career pivots, self-worth work. The single-portrait format also works cleanly for solo practitioners who lead with their face rather than a stock scene: doulas, nutritionists, hypnotherapists, and creative mentors. Non-coaching uses land naturally too — a boutique yoga studio landing, a self-published author's about-hero, a podcast host's home page, or a Substack-style personal brand landing — anywhere the tone is human and the CTA is a low-pressure "book a call."

Customization tips

The palette is the fastest lever: swap #E58AA0 (eyebrow, button, glow) and #FDF4EC (background) in the module presets to reskin — a sage/cream or terracotta/ivory pair holds the same warmth. Keep the display headline to about eight words so the -1.5px letter-spacing stays elegant on tablet; the eyebrow reads best at three or four words. Body copy has a 560px max-width, so aim for two short sentences under ~360 characters before it starts pushing the image lower on desktop. Replace the portrait with a 1000×1200 (5:6) photo — landscape or square crops will fight the 40px radius and the fixed 2_5 column. Because the button glow uses a coloured shadow tied to the button colour, recolouring the CTA means also updating the box-shadow colour to match, otherwise the halo will look mismatched.

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 — Bloom Coaching | Divi 5 Layout

How does the layout behave on mobile?

The row switches flexDirection to column on phone, so the copy stacks on top of the portrait. Section padding drops from 140px to 72px, the headline goes from 68px to 38px, and body copy shrinks to 17px — no side-scrolling and nothing to rewire.

Which Divi 5 modules are actually used?

A Section wrapping a Row with two Columns. The left column holds two Heading modules (eyebrow + display), one Text module, and one Button module. The right column holds a single Image module. No third-party addons, no code modules.

What image ratio should I use for the portrait?

A 5:6 portrait around 1000×1200px keeps the 40px radius reading correctly inside the 2_5 column. Landscape or square crops will leave awkward whitespace and the blue-tinted shadow won't hug the subject the same way.

Can I swap the pink accent for another colour?

Yes — change #E58AA0 on the eyebrow heading, the button background, and the button's box-shadow colour. Also update the deeper hover shade #C86F86. Keep those four values tied together or the CTA glow will drift out of sync with the button.

What should I edit first after importing it?

Rewrite the eyebrow ("1:1 Life Coaching"), the headline, and the two-sentence intro, then swap the Pexels stock photo for your own headshot. Spacing, radii, and shadow are already tuned — you rarely need to touch them.

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.