Four-Phase Coaching Process Cards — Elegant Divi 5 Layout

Cards Coaching Elegant

An elegant Divi 5 cards section presenting a four-phase coaching journey — clarify, design, build, sustain — in soft cream tones with refined serif typography.

Variations

Columns2 columns3 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 on a warm cream field (#F8F5F0) with 110px of breathing room top and bottom, letting a centered Playfair Display heading in deep teal (#1F4954, 46px, tightened -0.5px letter-spacing) carry the promise of the process. A Lato 19px subtitle in muted grey sits beneath it, capped at 640px so the line length stays readable, while the heading itself is capped at 780px — that intentional width difference holds the eye on the primary line before you drop into the grid.

Below the intro, four numbered cards land in a two-row, two-column grid (each row built with a 1_2, 1_2 column structure). Every card is a clean white rectangle with a 20px radius, 44/40px vertical padding and 36px side padding, and a soft teal-tinted preset3 shadow that deepens on hover as the card lifts six pixels via a translateY. A 68px circular badge sits at the top of each card — filled with the same #1F4954 teal, holding a Playfair numeral in white, and glowing with its own drop shadow so the phase number reads at a glance.

Each phase pairs a 26px Playfair heading in teal with a Lato paragraph (16px, #4A4A4A, 1.7em line-height, centered) — enough copy to explain the phase without crowding the badge above it. Rows use alignItems: stretch and a 36px column/row gap, so cards stay the same height even when body copy varies, and they never fuse into a single block.

On mobile the grid collapses into a single stacked column (row flexDirection switches to column on phone), and the intro heading scales from 46px down to 32px so it never breaks awkwardly on a narrow screen.

What’s inside

Four numbered process cards laid out in a 2×2 grid (two rows of 1_2, 1_2 columns)
68px circular numeral badges in deep teal (#1F4954) with a soft shadow glow
Centered intro block: 46px Playfair heading (max 780px) paired with a 19px Lato subtitle (max 640px)
White cards on a warm cream (#F8F5F0) section — 20px corner radius, 36px side padding
Hover interaction: card lifts -6px with a deepened teal-tinted preset3 shadow
alignItems: stretch on the rows so uneven copy still produces equal card heights
36px column and row gap between cards; 110px section padding top and bottom
Native Divi 5 blocks only — Section, Row, Column, Heading, Text (no external plugins)

Who it’s for

Built for anyone who sells a multi-stage engagement and needs to make the process visible before someone commits. Life, business, and executive coaches with a 90-day or six-month arc are the sweet spot, but the four-step frame slots naturally into therapists and wellness practitioners, nutritionists running structured resets, financial planners walking clients through onboarding, and career or leadership coaches with a defined journey. It also fits agencies documenting their engagement lifecycle, course creators mapping a curriculum arc, and consultants selling packaged retainers. The elegant serif-and-cream palette leans premium, so it suits practitioners charging four figures and up rather than volume-priced offers.

Customization tips

The whole aesthetic hinges on one accent color — #1F4954 — which appears in the intro heading, every numeral circle, every card heading, and the shadow tints. Swap it globally and the mood changes: a warm gold on charcoal reads luxury coaching, a sage or dusty rose reads wellness. The cream section background (#F8F5F0) and white card fill are the other two palette dials. Keep phase headings to two or three words — at 26px they wrap awkwardly beyond that. Body copy sits best at 30–45 words per card; rows already stretch to match heights, but visual rhythm improves when lengths are close. To go from four phases to three, delete one card and switch the second row to a 1_1 column structure — or fold everything into a single row of three columns (1_3, 1_3, 1_3). No imagery is used anywhere, so there are no aspect ratios to manage.

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 Four-Phase Coaching Process Cards — Elegant Divi 5 Layout

What if my process has three or five phases instead of four?

For three, delete one card and change that row's column structure to full-width, or reshape both rows into a single 3-column row (1_3, 1_3, 1_3). For five, add a third row of 1_2, 1_2 with a solo centered card, or shift to a 3-column layout across two rows. The badge, heading, and text pattern inside each card copies cleanly.

Do the cards stay the same height when descriptions are different lengths?

Yes — the rows are set with alignItems: stretch, so shorter cards grow to match the tallest one in the row. Keeping each description within about 35 words still gives the cleanest visual rhythm, since the numbered badge sits at a fixed distance from the top.

How does the layout behave on mobile?

The 2×2 grid collapses into a single stacked column (row flexDirection is set to column on phone), the intro heading scales from 46px down to 32px, and cards keep their full 36px side padding and 20px rounded corners. The hover-lift is inactive on touch devices, as expected.

Which fonts are wired in, and do I need to install anything?

Playfair Display (700) for the intro heading, each phase heading, and the numeric badges; Lato for the intro subtitle and card body copy. Both are Google Fonts available in Divi 5's font picker with no extra setup — swap them from the module settings if you prefer your brand typeface.

What should I edit first after importing?

Rewrite the four phase headings and paragraphs to match your actual process — the numbered circles keep counting 1 through 4 automatically since they're just Heading modules. Then update the intro heading and subtitle to name your program, and finally recolor the teal accent (#1F4954) if you want a different mood.

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.