Elegant Coaching Cards Layout for Divi 5 — Four-Pillar Framework

Cards Coaching Elegant

Refined four-card Divi 5 layout for coaches. Warm cream backdrop, Playfair Display headings, gold icon badges, and elegant hover lift to showcase your method.

Variations

Columns2 columns 3 columns4 columns

IconsIcon on topIcon on left

StyleCircle badgePlain icon Numbered

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 leads with a centered introduction — a Playfair Display h2 at 44px (32px on phones) over a 17px sub-line capped at a 680px max-width — so the eye lands cleanly before the grid opens. Below it, four equal 1/4 columns sit on a warm cream backdrop (#FAF7F2) with 110px of vertical breathing room. Each column carries a 36px-padded white card, 20px rounded corners, and a soft dark-warm shadow (preset3, 6px vertical, 28px blur) that deepens and lifts 6px on hover. It is a quiet pattern: no gradients, no strokes, just paper cards floating on cream.

Inside every card the hierarchy is deliberate and repeats four times. A left-aligned circular icon badge (#D4B896 warm gold, 18px padding, 22px FontAwesome or Divi icon) leads the eye, followed by a 22px Playfair Display h3 in a rich brown (#2A2520), then a 15px body paragraph in #5C544A at 1.75 line-height. A 20px row-gap keeps the badge, title, and copy reading as three distinct beats rather than a wall of text. The four pillar titles — Clarity & direction, A strategy made for you, Accountability that holds, Mindset & confidence — are short on purpose so all four cards balance at the same height.

Responsive behavior is written into the JSON, not left to chance. Tablets wrap the row with 24px column and row gaps so the four cards flow to a comfortable 2×2. Phones switch the row to flex-direction: column and stretch each card to full width (24/24), and the intro heading downshifts to 32px. Nothing loses its interior spacing on the way down.

What’s inside

Four-column card grid (1_4,1_4,1_4,1_4) with a 28px desktop column gap, wrapping to 2×2 on tablet and stacking vertically on phone
Centered Playfair Display h2 intro (44px desktop / 32px phone) paired with a 680px-max supporting paragraph at 17px
Four identical card containers: white background, 36px inner padding on all sides, 20px border radius, preset3 soft shadow
Circular icon badges in warm gold (#D4B896) at 18px padding and 50% radius, holding a mix of native Divi and FontAwesome glyphs at 22px
Per-card Playfair Display h3 title over a 15px body paragraph at 1.75 line-height, separated by a 20px column row-gap
Built-in hover interaction: a 6px upward translate plus a deeper shadow, wired through Divi's transform and boxShadow hover states
Warm cream section background (#FAF7F2) with 110px of vertical padding for a generous editorial feel
Zero third-party modules — Section, Row, Column, Heading, Text, and Icon only

Who it’s for

Life and executive coaches, therapists, and mindset practitioners whose brand relies on warmth and restraint rather than high-energy neon. It slots in naturally as a "how we work" or "our approach" block for one-to-one coaches, wellness studios, doulas, holistic health practitioners, private members' clubs, luxury retreats, and boutique consultancies. The four-pillar framing also suits business coaches selling a signature method, financial advisors describing pillars of planning, or boutique real-estate teams walking clients through a service philosophy. Anywhere you need to break a proprietary approach into four digestible promises — and want the page to feel considered, adult, and quietly premium — this section fits without demanding a full brand overhaul.

Customization tips

Swap the palette in one place: recolor the section background (#FAF7F2), the icon badges (#D4B896), and the two typography tones (#2A2520 for headings and #5C544A for body). Any warm-earth or cool-neutral pairing works — try sage on ivory, or deep navy on bone. Copy limits are firm: pillar titles read best under 28 characters (two or three words), and each body paragraph should stay in the 25–35 word range so all four cards balance at desktop. If you drop to three pillars, change the column structure from 1_4,1_4,1_4,1_4 to 1_3,1_3,1_3 and the row will re-flow without touching CSS. The icons are native Divi and FontAwesome — pick replacements inside the Icon module. No photography is used, so there are no aspect ratios to police; if you want a hero image above the grid, add a new Row before this one rather than dropping images inside the cards, which would break the tight 20px inner rhythm.

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 Cards Layout for Divi 5 — Four-Pillar Framework

How does the four-card grid behave on smaller screens?

On tablet the row wraps with 24px gaps, typically settling into a 2×2. On phone the row switches to flex-direction: column and every card stretches to full width. The intro heading also drops from 44px to 32px so it stays proportional on a narrow viewport.

Which Divi 5 modules make up the section?

Six native modules only: Section, Row, Column, Heading, Text, and Icon. There are no third-party or premium modules, so it opens and edits inside a stock Divi 5 install without extensions.

Can I change the icons on each card?

Yes. Two badges use FontAwesome (a compass and a bullseye) and two use native Divi icons. Open any Icon module and pick a replacement from either library — the badge shape, size, and gold background stay intact.

Does the hover lift work on touch devices?

The 6px translate and deeper shadow are pointer-only effects. On phones and tablets cards render at their resting state, which is by design — the resting shadow (preset3, 28px blur) already gives the cards enough presence without the animation.

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

Rewrite the four pillar titles first, keeping each to two or three words. Then swap the intro heading and sub-line. After that, retune the icon badge color (#D4B896) — that single hex controls the section's temperature more than any other change.

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.