Coaching Process — 4-Step Engagement Cards Layout for Divi 5

Cards Coaching Elegant

Elegant 4-step coaching process cards in Divi 5. Cormorant Garamond serif type, soft cream backdrop, and lift-on-hover white cards for premium coaches.

Variations

Columns2 columns 3 columns4 columns

IconsIcon on topIcon on left

StyleCircle badge Plain iconNumbered

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 section opens with a centered header row capped at 760px so the eye lands on a tight, unhurried column of three elements: a copper eyebrow ("The Engagement" in #A47551, 13px, 3px letter-spacing, uppercase), a 52px Cormorant Garamond heading in deep navy #1A2530, and an 18px lead paragraph in warm gray #5A5550 constrained to 620px. That vertical hierarchy — accent, statement, promise — sets the editorial tone before the cards arrive.

Beneath it, four identical cards sit in a 1_4,1_4,1_4,1_4 row (1280px max, 28px column gap) with align-items: stretch so every card matches the tallest sibling. Each card is a white column with 36px vertical / 32px horizontal padding, a 20px corner radius, a hairline #1A2530/0.06 border, and a preset‑3 drop shadow. Inside the card, a nested 1_4,3_4 row pairs a 48×48px teal (#1F4E5F) circular number badge — white Inter numerals at 48px line‑height — with a 26px serif step title (Discovery Call, Vision & Strategy, Bi‑Weekly Sessions, Integration). A single 15px Text module at 1.75em line‑height carries the description below.

The palette does the emotional work: warm cream section background (#F5F1EA), white card surfaces, deep navy text, copper eyebrow, teal accents. It reads as considered and premium rather than corporate — the kind of quiet composition coaches use to signal thoughtfulness before the sales pitch even starts. A subtle hover interaction (-6px translate plus a deeper shadow preset) lifts each card on desktop; mobile users never see it.

On tablet the four cards wrap to a two‑up grid with a 24px row gap; on phone they stack full‑width with 20px between them, and the inner badge/title row switches to column direction so the number sits above each title. Section padding stays at a generous 110px top and bottom on desktop, and the whole thing is built from native Divi 5 Section, Row, Column, Heading, and Text modules — no custom CSS, no icon fonts, no third‑party dependencies.

What’s inside

Centered header row (760px max) with a copper eyebrow, a 52px Cormorant Garamond heading, and an 18px lead paragraph capped at 620px
Four‑column cards row (1280px max, 28px column gap) with equal‑height cards via flex stretch alignment
White cards with 20px radius, hairline navy border at 6% opacity, and a preset‑3 drop shadow that deepens on hover
48×48px circular number badges in teal #1F4E5F with white Inter numerals at 48px line‑height
Serif step titles (Cormorant Garamond, 500 weight, 26px) paired with 15px body copy at 1.75em line‑height
Subtle -6px hover lift on desktop; badge stacks above the title on phone for cleaner mobile reading
Fluid grid: 4‑up desktop → 2‑up tablet wrap → single‑column stack on phone, all handled by native Divi 5 flex controls
Built entirely from Section, Row, Column, Heading, and Text modules — no blurbs, icon libraries, or plugins required

Who it’s for

Coaches selling process‑driven engagements — executive, leadership, life, ADHD, career, and business coaches who need to explain how a client engagement actually flows. It also fits therapists and counsellors publishing a program outline, consultants describing a scoped delivery, course creators mapping a cohort journey, agencies showing an onboarding sequence, real‑estate advisors laying out a buyer path, and wellness practitioners describing a treatment plan. Anything that benefits from a clear four‑step "here's what happens when we work together" narrative will land well here. The tone is warm and considered rather than transactional, so it reads especially well for premium, relationship‑led services where the buying decision hinges on trust and clarity about the road ahead.

Customization tips

Three finds‑and‑replaces cover the whole vibe: the section background (#F5F1EA), the number badge fill (#1F4E5F), and the eyebrow color (#A47551). Card copy holds up cleanly between 24 and 42 words per step — longer and the cards stay aligned (the row uses stretch) but the shortest card grows dead space at the bottom. Keep step titles to two or three words for balance. If you swap Cormorant Garamond for another serif, keep the 52px hero and 26px card titles roughly proportional so the hierarchy still reads. The section carries no images, so there's no aspect ratio to worry about; if you want a visual anchor above the cards, drop an Image module inside the header row at 620–760px max width. To grow to five or six steps, duplicate a card column and change the row structure from 1_4,1_4,1_4,1_4 to 1_5s or 1_6s — the card internals need no changes.

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 Coaching Process — 4-Step Engagement Cards Layout for Divi 5

Does the row stay four‑across on tablet, or does it wrap?

It wraps to a two‑up grid on tablet with a 24px row gap, then stacks to a single column on phone with 20px between cards. The inner badge/title row also switches direction on phone so the number sits above the step title instead of beside it, which keeps small‑screen reading comfortable.

Which Divi 5 modules make up each card?

Each card is a Column containing a nested Row (with the number badge and step title as two child columns) plus a Text module for the description. Only Section, Row, Column, Heading, and Text modules are used — no Blurb, no icon library dependency, no third‑party plugins.

Can I add more steps or drop one?

Yes. To go to three steps, delete one column and change the row structure from 1_4,1_4,1_4,1_4 to 1_3,1_3,1_3. For five, duplicate a column and use 1_5s. Copy edits happen directly in the Heading and Text modules — no template rebuild needed.

What should I edit first after importing?

Start with the four step titles (Discovery Call, Vision & Strategy, Bi‑Weekly Sessions, Integration) and their descriptions, then the "The Engagement" eyebrow and the "How We Work Together" heading. Palette tweaks come last — the copper eyebrow, teal number badges, and cream background each live in one place.

Is the hover lift essential, or can I turn it off?

It's cosmetic. The -6px translate and deeper shadow only fire on desktop hover; mobile users never see it. If you prefer the cards to sit flat, remove the transform hover value on each column and drop the second shadow preset — the layout works either way.

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.