Playful Coaching Hero for Overthinkers — Divi 5 Layout

Hero Coaching Playful

A warm, pastel Divi 5 hero section for coaches. Bold headline, friendly subhead, rounded CTA button, and image — built for coaching sites that want personality.

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 is built as a single Divi 5 section with generous 9vw vertical padding on desktop that collapses to a tighter 80px / 24px on phone — the whole panel breathes on a large screen and stays legible on a small one. Inside sits a two-column row locked to a 1200px max width with a 3/5 + 2/5 split, 64px column gap, and flex-wrap: wrap so the layout reflows to a single column on phone (the row's flexDirection explicitly switches to column at that breakpoint). The palette does real work here: #FFF1E6 peach cream sets the mood in the section background, #E76F62 coral drives the eyebrow and hover CTA, and #3B3055 deep plum grounds the headline so contrast never gets lost in the warmth.

The copy column follows a deliberate visual hierarchy: a tiny 13px uppercase eyebrow in coral with 3px letter-spacing, a 60px / 44px / 34px extrabold plum headline that steps down cleanly across desktop, tablet, and phone, a 19px supporting paragraph capped at 540px for a comfortable measure, and a rounded pill button with a soft coral drop-shadow that deepens on hover (14px → 20px blur bump). Spacing between those four modules — 20px, 26px, 36px — is a classic ascending rhythm that keeps the eye stepping downward toward the CTA. The image column is a portrait-oriented photo (1000×1100) with a 36px radius and a lavender-tinted preset3 shadow offset -12px / 22px, which is what makes the image feel like it's floating over the peach background rather than sitting on it. On phone the columns stack, the image lands below the CTA, and both take full width because each column's phone flexType is set to 24_24.

What’s inside

Divi 5 section with a peach cream background (`#FFF1E6`) and viewport-relative padding that scales from `9vw` on desktop to `80px` on phone
Two-column row with a 3/5 copy + 2/5 image split, `1200px` max width, `64px` column gap, and `56px` row gap when it wraps
Uppercase coral eyebrow Text module set at `13px / 700 / 3px letter-spacing` in `#E76F62`
Responsive Heading module that steps from `60px` desktop → `44px` tablet → `34px` phone, extrabold at `1.05em` line-height
Supporting paragraph Text module at `19px` with a `540px` max width for a readable measure
Rounded-pill Button module (`999px` radius) with a coral background, coral `preset2` drop-shadow, and a deeper hover shadow
Portrait Image module (`1000×1100`) with a `36px` radius and a lavender-tinted `preset3` box-shadow offset `-12px / 22px`
Phone layout drops to a single column (`flexDirection: column`) with each column set to `24_24` full width

Who it’s for

Made for one-on-one coaches, therapists, and small-practice service providers whose voice is warm and human rather than corporate. Life coaches, career coaches, ADHD and anxiety coaches, wellness and nutrition practitioners, creative mentors, and course creators will find the tone lands naturally — the eyebrow specifically nods to "humans who overthink," so anyone selling clarity, confidence, or accountability is on brand. It also transfers cleanly to boutique studios (yoga, pilates, sound baths), independent therapists taking new clients, and solo consultants who want to feel approachable instead of enterprise. The pastel peach and plum palette skews feminine-leaning but is not overtly gendered, so it suits any personal brand that wants softness without looking childish.

Customization tips

Swap the eyebrow, headline, and paragraph in the three text modules first — the headline sits at 60px desktop, so aim for six to nine words to keep two clean lines, and cap the supporting paragraph around 40 words so it stays within the 540px measure. The button's Book a free clarity call fits nicely in five to six words; longer labels will still work because the pill radius is 999px. To rebrand the palette, change three colors in tandem: the section background #FFF1E6, the eyebrow color #E76F62, and the button + shadow color #F4978E / rgba(231,111,98,0.35) — keep the plum headline #3B3055 for contrast, or swap it for any dark neutral. The image column expects a portrait aspect roughly 10:11 (1000×1100); use a similar ratio so the 36px radius reads evenly. If you flip to a landscape photo, widen the image column or reduce the 56px row gap so the composition stays balanced on tablet.

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 for Overthinkers — Divi 5 Layout

Does the hero stack on mobile?

Yes. The row's phone `flexDirection` is set to `column` and each column's phone `flexType` is `24_24`, so the copy block lands on top and the image drops full-width beneath it.

What modules make up this hero?

Five native Divi 5 modules inside a single row: a Text eyebrow, a Heading, a Text paragraph, a Button, and an Image — no code modules, no third-party dependencies.

Where does the photo come from and can I replace it?

The placeholder pulls from Pexels at `1000×1100`. Replace it with your own portrait shot at a similar 10:11 ratio so the `36px` corner radius and lavender drop-shadow keep their shape.

What should I edit first?

The three text modules (eyebrow, headline, paragraph) and the button label — those carry the offer. Then swap the image, then adjust the four color values if you're rebranding.

Will the headline break awkwardly if I write a longer one?

The heading has explicit `44px` tablet and `34px` phone sizes and a tight `1.05em` line-height, so two or three lines look clean. Past nine or ten words the desktop version can spill to three lines — trim or drop the desktop size to `52px` if that happens.

Can I flip the image to the left side?

Yes — either reorder the two columns in the Divi builder or set the row's `flexDirection` to `row-reverse` on desktop. The `3_5 / 2_5` split still works either direction.

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.