Elegant Coaching Approach Cards Section for Divi 5

Cards Coaching Elegant

Refined three-column cards layout for coaching websites. Playfair Display headings, warm cream background, and soft-shadow cards introduce your signature approach with quiet authority.

Variations

Columns2 columns3 columns4 columns

IconsIcon on topIcon on left

StyleCircle badgePlain 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

A composed cards section for a coaching brand's How We Work Together moment — the space where a visitor decides whether the process feels considered enough to trust. The section sits on a warm cream field (#f8f5f0) with generous 100px vertical padding, which gives the three white cards room to breathe and keeps the palette firmly in the calm, editorial register that coaching audiences respond to.

Hierarchy is set by a single centered intro block: a 42px Playfair Display H2 ("How We Work Together") in deep navy #1a2332, followed by a 640px-capped supporting paragraph in a softer 18px slate. Below it, a three-column row of equal 1/3 cards uses a 32px column gap on desktop. Each card is white, 20px-rounded, padded 36px on all sides, and stacks a 32px bronze accent icon (#8b6f47), a 22px Playfair title, and a 16px body paragraph at line-height 1.7 — a rhythm that reads as measured rather than busy.

Interaction is deliberately quiet. On hover, cards lift 6px with a deeper shadow preset (from 8/24 blur to 18/42 blur, both tinted with the same navy at higher opacity) — a single motion cue that signals "clickable" without ever feeling like a promotional bounce. Responsiveness is handled cleanly at the row level: tablet widths wrap the cards with a 32px row gap, and phone switches the flex direction to column so each card takes the full 24/24 width. Nothing overlaps, nothing shrinks below a usable padding, and the intro paragraph's centered max-width keeps line length readable on every breakpoint.

What’s inside

One Divi 5 Section on a cream #f8f5f0 background with 100px top/bottom padding and a 50px row gap between the intro and the cards
Intro Row using a single full-width Column with a 42px Playfair Display Heading (H2) and a centered Text module capped at 640px max-width for a comfortable line length
Three-Card Row structured as 1/3, 1/3, 1/3 Columns with a 32px column gap on desktop, wrapping on tablet and stacking to a single column on phone
Each card = a Divi Column with white background, 36px synced padding, 20px synced border radius, and a preset3 box shadow (0/8/24, -6 spread) with a deeper hover variant
Icon + Heading + Body pattern inside every card: a 32px left-aligned Icon module (bronze #8b6f47), a 22px Playfair title Text (#1a2332), and a 16px body Text at line-height 1.7 (#5a6573)
Hover interaction on cards: a subtle -6px vertical translate paired with a stronger shadow blur, giving quiet lift without cartoon motion
Mixed icon sources already wired — one Divi-set glyph () and two Font Awesome solid glyphs (f518 leaf, f201 chart) — showing how to combine libraries inside the same row
Fully editorial coaching copy written to length: three benefit-led card titles and 2-sentence supporting paragraphs you can rewrite line-for-line without touching the layout

Who it’s for

Built for coaches, therapists, mentors, and consultants who sell a considered process rather than a hard-pitched offer — the kind of practitioner who wants a Method, Approach, or How We Work moment on their homepage or services page. The cream-and-bronze palette with Playfair Display type reads as calm and premium, which lands especially well for executive coaching, life coaching, leadership development, wellness practices, holistic health, and boutique consulting brands. It also transfers cleanly to adjacent editorial-feeling niches: legal advisors, financial planners, boutique agencies explaining their three-phase engagement, or interior designers walking clients through a discovery-to-delivery flow. Any service business that sells a three-step framework has a natural home here.

Customization tips

Start with the three card titles and paragraphs — they're the copy that will do the actual selling, and each paragraph is intentionally sized around 22–28 words to keep the three cards visually balanced. Push much longer and one card will grow taller than the others on desktop. Swap the accent color by editing #8b6f47 on the three Icon modules; a sage, deep teal, or muted terracotta all sit well against the #f8f5f0 cream. If you want a cooler palette, change the section background to a soft off-white (#f5f6f8) and drop the icon color to a slate blue. The Playfair Display headings are set to 42px and 22px — safe to nudge down 2–4px if you're localizing into a language with longer words. Icons are chosen from Divi's set and Font Awesome; both libraries are already loaded, so replacing any glyph is a single click in the Icon module. Card imagery isn't used here — this is a pure icon+text pattern — so there are no aspect ratios to worry about.

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 Coaching Approach Cards Section for Divi 5

How does the three-card row behave on tablet and phone?

On tablet widths the row flex-wraps with a 32px row gap, so the cards reflow into a 2+1 arrangement rather than shrinking. On phone the row switches to flex-direction: column and each Column takes a full 24/24 width, so the cards stack vertically with their 36px padding intact.

Which Divi 5 modules make up each card?

Three modules per card, in this order: an Icon module (32px, left-aligned), a Text module used as the card title (22px Playfair Display), and a second Text module for the body copy (16px, line-height 1.7). No Blurb module is used — everything is composed manually so you can restyle each element independently.

What should I edit first to make this feel like my brand?

Rewrite the three card titles and paragraphs, then change the icon color (#8b6f47) on all three Icon modules to your accent. Those two edits alone reframe the section. After that, consider swapping the Playfair Display heading font if your brand uses a different serif, and adjust the cream section background if it clashes with the page above.

Does the section include any images?

No — this is an icon-and-text card pattern with no Image modules, so you don't need to source photography, worry about crop ratios, or optimize hero assets. The visual weight comes entirely from typography, the bronze icon accent, and the soft card shadow.

Can I add a fourth card without breaking the layout?

Yes, but you'll want to change the column structure from 1/3, 1/3, 1/3 to 1/4, 1/4, 1/4, 1/4 in the Row settings — Divi 5 handles this in the row's structure control. The wrap behavior on tablet and the phone column-stack will continue to work because they're set at the row level, not tied to a fixed number of columns.

What's the hover behavior on the cards and can I turn it off?

Each card is set to translate -6px on the Y axis on hover, with the box shadow deepening from an 8px/24px blur to an 18px/42px blur. Both effects live in the Column's Transform and Box Shadow settings — remove the hover state on either and the card becomes fully static.

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.