Elegant 4-Step Coaching Process Cards — Divi 5 Layout

Cards Coaching Elegant

An elegant Divi 5 cards section for coaches: a four-step process from discovery call to lasting transformation, with refined serif typography and warm neutral tones.

Variations

Columns2 columns3 columns 4 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

This section frames a four-step coaching methodology as a calm, considered journey rather than a hard sell. The layout opens with a centered intro block — a small #8b6f47 uppercase eyebrow ('THE COACHING PROCESS'), a 48px Playfair Display H2 in deep forest #1f2d26, and an 18px Inter subhead at 1.75em line-height — sitting inside a 720px column that keeps the reading measure comfortable on wide screens. Below it, four numbered process cards are arranged in a 2×2 grid with 32px column and row gaps, each card padded 36px on all sides on a soft cream #f5f1ea section background.

Each card is built from a nested row using a 1_4 / 3_4 column split: a 54px forest-green circular badge (#3d5b4a with a soft drop shadow, containing a Playfair numeral) sits vertically centered next to a 26px Playfair step title. Below that pairing, a 16px Inter body paragraph explains the step, and a small bronze inline link (#8b6f47, hovering to #1f2d26) closes each card with a specific next action — 'Book a discovery call', 'See the framework', 'Read client stories', 'Begin your path'. The alignment is deliberate: numerals, titles, and body copy share a strong left edge, so the eye reads down each card without friction.

Motion is understated but present. Each card carries a translateY(-6px) hover with a 420ms cubic-bezier transition and a shadow that deepens from rgba(31,45,38,0.08) to rgba(31,45,38,0.18) — a quiet lift that reinforces the elegant, considered tone rather than shouting for attention. On phones the section padding drops to 72px vertical, the H2 scales to 34px, and the row's flex-direction flips to column, so each card stacks full-width while the badge and title inside each card also collapse into a vertical stack — no cramped horizontal reads on narrow screens.

What’s inside

Full Divi 5 section with a curated palette: cream `#f5f1ea` background, forest `#3d5b4a` accent, deep `#1f2d26` headings, bronze `#8b6f47` eyebrow and links
Centered intro block using a 720px capped column with Divi Text (uppercase eyebrow), Heading (H2 Playfair 48px), and Text (18px Inter subhead)
Four process cards in a 2×2 grid (`1_2, 1_2` on desktop, stacked on phone) with 32px gaps and stretched equal-height columns
Per-card structure: white background, 20px rounded corners, 36px padding, subtle preset3 shadow, hover translate-Y and shadow deepen via freeform CSS
Nested `1_4 / 3_4` header row per card: 54px circular numbered badge (freeform CSS for perfect centering) paired with a Playfair step title
Native Divi Heading modules for step titles (H3 Playfair 26px) and body copy in Divi Text modules (Inter 16px, 1.75em line-height)
Inline link module per card with distinct hover color state — ready to point at a booking form, framework page, testimonials, or intake
Responsive spacing tokens: 110px section padding on desktop drops to 72px on phone; H2 scales 48px → 34px; card row flips to vertical stack on phone

Who it’s for

Built for life, mindset, executive, health, and business coaches who want to present a signature methodology on their homepage or services page without resorting to icon-and-checkmark clichés. It also fits therapists, wellness practitioners, consultants selling productized engagements, boutique agencies explaining an onboarding flow, and studio-scale professional services (financial advisors, private wealth, luxury real estate consultants). Because the four cards are self-contained and evenly weighted, it works equally well as a 'how we work' section, an onboarding roadmap, a program curriculum overview, or a considered four-tier service ladder. The elegant, unhurried tone especially suits premium price points where trust and depth of thought matter more than urgency or scarcity messaging.

Customization tips

Change the palette at the section level first: swap the cream section background (#f5f1ea), then the forest badge/text accent (#3d5b4a / #1f2d26) and the bronze eyebrow/link color (#8b6f47). Card interiors are pure white — recolor them together for a darker variant. Keep step titles to about 3–5 words so the card header row stays balanced next to the 54px badge; body copy reads best at 2–3 short sentences (roughly 180–260 characters) so all four cards keep matching heights. To use three or five steps, delete or duplicate a whole card column and switch the parent row's structure to 1_3, 1_3, 1_3 or a stacked pair of rows. No images are used, so there are no aspect ratios to manage — but if you want an icon in place of each numeral, drop a Divi Icon module inside the badge column instead of the H4 heading and keep it under 24px so it sits inside the 54px circle. Point each 'link →' at a real booking calendar, framework page, testimonials section, or intake form before publishing.

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

How does the 2×2 card grid behave on tablets and phones?

On desktop the four cards sit in two rows of two with 32px gaps and equal-height columns (`alignItems: stretch`). On phones the parent rows flip to `flexDirection: column`, so each card stacks full-width in reading order, and inside each card the badge-and-title row also stacks vertically instead of sitting side by side.

Which Divi 5 modules is the layout actually built from?

Only four native module types: Divi Section, Row, Column, Heading, and Text. The numbered circles are Heading modules styled with freeform CSS for the circle shape and centering; the small 'Book a call →' links are Text modules with a link color state. No third-party modules or child themes are required.

There are no photos — is that intentional?

Yes. The design leans on typography, the numbered forest-green badges, and generous whitespace instead of imagery. That's what makes it feel considered rather than stocky. If you want photos, you can add a Divi Image module above each step title, but the 2×2 rhythm is tighter without them.

What should I edit first after importing?

Rewrite the four step titles and body paragraphs to match your actual methodology, then update the four inline links so each one points to a real destination — a discovery-call scheduler, a framework page, a case-studies section, and an intake or contact form. After that, tune the palette to your brand.

Can I turn this into 3 or 5 steps instead of 4?

Yes — the cards are independent column blocks inside two rows. For three steps, use a single row with a `1_3, 1_3, 1_3` structure. For five or six, add a second row or switch to a 3-column grid across two rows. Renumber the badge Heading module in each card to match.

Do the hover lift and shadow work on touch devices?

The `translateY(-6px)` and deepened shadow are triggered by the `:hover` state, so on touch devices they only fire briefly on tap. That's fine — the cards were designed to read cleanly in their resting state, with the hover as a subtle desktop cue rather than a required interaction.

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.