Playful Coaching Hero Section for Divi 5 — Sparkbright

Hero Coaching Playful

A warm, playful Divi 5 hero section built for coaches and career-changers. Two-column layout with eyebrow tag, bold headline, story-driven copy, rounded CTA button, and lifestyle image. Cream background with coral accents.

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

Sparkbright opens on a warm cream canvas (#FFF6EC) and a lopsided 3/5 + 2/5 Row that tips visual weight toward the message. A coral, all-caps eyebrow — "For first-time founders & bold career-changers" — anchors the audience at 14px with 2px letter-spacing, then an Outfit 800 headline drops in at 56px desktop, sized down to 44px on tablet and 34px on phone. The plum-black title (#2E2A47) sits directly over an 18px body paragraph with a generous 1.7 line-height, so the whole left column reads more like a personal note than a sales pitch. A tight 18-32px vertical rhythm between eyebrow, headline, paragraph, button, and italic follow-up keeps the eye moving without crowding.

The right column is a single Image module with 36px rounded corners and a soft plum-tinted drop shadow (preset3, 28px vertical / 56px blur), which lifts the photo off the cream without adding a hard border. Row-level alignItems: center and a 56px column-gap let the photo breathe next to the copy. The CTA is a fully rounded coral pill (999px radius) with a matching coral glow shadow that deepens on hover — the same accent as the eyebrow, so the palette closes a loop.

On phone the Row flips to flexDirection: column, both columns snap to full width, and the section padding steps from 120px → 80px → 64px so the fold still fits above the keyboard. The Row's 48px rowGap becomes the vertical breathing room between the stacked headline block and the image, and the italic follow-up sits directly under the button so the microcopy doesn't get lost when the layout goes single-column.

What’s inside

Two-column Divi 5 Row with a 3/5 text + 2/5 image split, 56px column-gap, and vertical center alignment
Uppercase eyebrow Heading in coral (`#EF6C7A`) at 14px / 700 / 2px letter-spacing for niche framing
H1 Heading module set in Outfit 800 at 56px desktop, 44px tablet, 34px phone, with a 1.08em line-height
Body Text module at 18px with a 1.7em line-height on `#4A4761` for calm, readable long-form copy
Fully rounded pill Button (999px radius) with coral fill, hover state (`#D8556A`), and a soft coral glow shadow
Italic fine-print Text module for the low-pressure follow-up under the CTA
Image module with 36px rounded corners and a layered plum-tinted box shadow (preset3, 56px blur)
Responsive section padding that scales 120px → 80px → 64px across desktop, tablet, and phone

Who it’s for

Built for coaches whose brand voice is warm, personable, and slightly playful — life coaches, career-change and business coaches, women-in-business mentors, mindset and creativity coaches, and first-time-founder specialists. The soft cream + coral palette and the "chemistry call" microcopy make it a natural fit for one-on-one service work where the sale hinges on trust, not urgency. It also transfers cleanly to adjacent service niches with the same tone: therapists and counselors, wellness practitioners, doulas, small-studio yoga or pilates instructors, nutrition consultants, and independent creative consultants who want an above-the-fold that reads like a friendly hello and books a discovery call rather than pushing a hard offer.

Customization tips

Palette-first: three colors do the work — coral #EF6C7A (eyebrow, button, button glow), cream #FFF6EC (section background), and plum #2E2A47 (headline). Swap all three from Divi's global colors and the section stays coherent. Keep the eyebrow to about 40 characters or the 2px uppercase tracking will wrap awkwardly. The headline reads best at 8–12 words; longer copy pushes the CTA below the fold on smaller desktops. Body copy has room for two short paragraphs before the button starts to drift on tablet. The image slot is roughly 3:2 (source is 940×650) — squarer crops unbalance the 3/5 + 2/5 row weighting, and portraits work better than group shots because the 36px corner radius clips edges softly. Change the button label to a single verb + object ("Book my call") to keep the pill from stretching. If you'd rather ditch the glow, switch the button box-shadow to preset2 for a flatter, more corporate feel.

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 — Sparkbright

How does this hero stack on mobile?

The Row switches to `flexDirection: column` on phone, both columns become full-width, and the image drops below the text block. Section padding scales from 120px down to 64px, and the headline steps from 56px → 44px → 34px so it stays comfortable on a 375px viewport.

Which Divi 5 modules make up the layout?

One Section, one Row (3/5 + 2/5), two Columns, two Heading modules (eyebrow + H1), two Text modules (paragraph + italic follow-up), one Button, and one Image. Everything is a native Divi 5 module — no code blocks or shortcodes.

What font does the headline use, and can I change it?

Outfit at 800 weight. Poppins, Manrope, or Inter at 700–800 all substitute cleanly; just keep the 1.08em desktop line-height so the two-line wrap doesn't lose its rhythm.

Can I remove the photo and run this text-only?

Yes. Delete the right Column, change the Row's column structure to a single column, and center-align the eyebrow, headline, paragraph, and button. The coral pill still carries the section on its own.

What kind of image works best in the photo slot?

A slightly portrait 3:2 crop (source is 940×650), warm daylight, and a clean background. The 36px corner radius softens edges, so avoid busy compositions that need their corners to read.

What should I edit first after importing?

Swap the eyebrow to your own audience callout, rewrite the headline to your outcome promise, replace the Pexels image with your own portrait, and update the button link + email address in the italic follow-up under the 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.