Elegant Coaching Pillars Cards Section — Divi 5 Layout

Cards Coaching Elegant

A serene four-card Divi 5 section for coaches: warm cream backdrop, Playfair headings, and circular icons highlighting clarity, framework, accountability, and lasting change.

Variations

Columns2 columns 3 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

The section opens with a centered introduction: a small bronze eyebrow label reading "The Practice" (13px, uppercased with 4px letter-spacing in warm gold #a8895a) sits above a serif H2 set in Playfair Display at 46px, weight 500, color #2a2419. A single supporting paragraph — capped at 640px and centered — anchors the promise before the cards begin. The whole layout breathes on a warm cream #faf7f2 canvas with 110px of vertical padding, so nothing else on the page competes for attention.

Below the intro, four equal 1/4 columns hold identical white cards with 20px rounded corners, 32px side padding, 40px top and bottom padding, and a soft warm shadow (preset3, 10px vertical, 32px blur, tinted #2a2419 at 10% opacity). Each card lifts 6px on hover — a quiet cue, not a bounce. Every card leads with a circular colored icon badge in a different accent (gold #c9a875, sage #8a9d8a, terracotta #a47a52, slate #6e7a8a), then a 22px Playfair heading and a 15px body paragraph in muted brown #5b5648 at 1.7 line-height for calm reading.

On tablet the four cards wrap into a 2×2 grid (flexWrap:wrap). On phone they collapse into a full-width stacked column with an explicit flex-direction:column on both the intro row and the card row — no cramped side-by-side breakage. Row rhythm stays intact with a 56px margin between the intro and the cards and a consistent 28px column gap across desktop.

What’s inside

Divi 5 Section with 110px vertical breathing room on a warm #faf7f2 cream canvas
Centered intro row using native Text (bronze eyebrow), Heading (H2 Playfair Display 46px), and Text (subtitle capped at 640px)
Four-column card row (1/4, 1/4, 1/4, 1/4) with 28px column gap and stretch alignment
Four white cards with 20px radius, 32px side padding, and a soft warm preset3 box-shadow
Circular Icon module badges in four coordinated palette accents — gold, sage, terracotta, slate
Subtle -6px hover translate transform on every card
Playfair Display H3 headings paired with 15px body copy at 1.7 line-height in muted #5b5648
Explicit responsive rules that wrap to 2×2 on tablet and stack full-width on phone

Who it’s for

Life, executive, career, and health coaches who want the section of their site that explains their method to feel considered rather than templated. The four-pillar structure fits any practice that runs on a repeatable framework — a discovery phase, a personalized plan, an accountability rhythm, and a lasting-change stage — so it maps cleanly to programs, retainers, or intensives. It also works well for wellness studios, therapists, boutique consultancies, financial advisors, and course creators who want to communicate a process without slipping into a mechanical step-by-step list.

Customization tips

Swap the four accent colors first (each Icon module → Background) — the whole warm-editorial mood pivots off #c9a875, #8a9d8a, #a47a52, and #6e7a8a. Keep card headings to a short 3–5 word phrase so they hold on one or two lines at 22px Playfair; keep card body copy to roughly 25–40 words so the four cards visually align on desktop. The intro H2 has room for one calm sentence — around 40–70 characters reads best at 46px. If you don't need four pillars, delete a column and the row will naturally rebalance to three at wider widths (and still stack cleanly on phone). No imagery is required: the accent-colored icon badges (Divi built-in and Font Awesome, 28px white glyphs) carry the visual weight, so you only need to pick icons that match your process wording.

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 Pillars Cards Section — Divi 5 Layout

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

On tablet the row wraps to a 2×2 grid (flexWrap:wrap). On phone the row switches to flex-direction:column so the cards stack full-width — the intro row does the same, so the eyebrow, heading, and subtitle stay centered and readable.

What Divi 5 modules make up each card?

Three native modules: an Icon module for the circular colored badge (28px white glyph), a Heading module for the 22px Playfair title, and a Text module for the centered 15px body copy. No third-party plugins or code modules.

Do I need to source any imagery for this section?

No. It's an icon-driven layout, using Divi's built-in icon set plus Font Awesome for the four badges. Pick icons that match your pillars — no stock photography or illustrations needed.

What should I edit first after importing?

The four card headings and their body paragraphs — those carry the message. Then swap the four icon glyphs and, if your brand isn't warm-neutral, retint the four badge backgrounds and the bronze eyebrow color to your palette.

Can I change the number of pillars?

Yes. Duplicate a column for a fifth card, or delete one and switch the column structure to 1/3, 1/3, 1/3 for three pillars. The tablet wrap and phone stacking rules keep working without extra CSS.

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.