Elegant Coaching Pillars Cards Layout for Divi 5

Cards Coaching Elegant

A refined four-pillar coaching cards section for Divi 5. Cormorant Garamond serif headings, warm cream background, and gold accents — ideal for executive and life coaches.

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

A quiet, editorial take on the "four-pillar" services block, built for coaches who sell a private, high-touch relationship rather than a course. The section opens on a warm cream canvas (#FAF7F2) with generous 110px vertical padding, letting the composition breathe the way a magazine spread does. An uppercase gold eyebrow — "THE COACHING METHOD" in Outfit, 13px, 4px letter-spacing — sits above a centered Cormorant Garamond H2 at 48px, tapering to 36px on tablet and 32px on phone so the display type never crowds smaller screens. A single intro paragraph, capped at 680px and centered with auto margins, keeps the header block calm and readable.

Under the intro, four equal 1/4 columns hold the pillar cards on a nowrap desktop row with a 28px gap. Each card is a white panel with 36px of interior padding on every side, a 20px corner radius, a whisper-thin 1px hairline border in rgba(31,41,55,0.06), and a preset3 box shadow (0/14/36/-10 at 12% opacity) that deepens and lifts the card 6px on hover. Inside, the rhythm is fixed and predictable: a 46px gold icon (#B89968), a 24px Cormorant Garamond H3 in charcoal #1F2937, and a short 15px Outfit paragraph in #4B5563 — the same three-part beat repeated four times so the eye can compare pillars at a glance.

The palette is deliberately restrained: cream ground, white cards, one warm gold accent, one deep charcoal for type. That means the design carries whatever brand you drop into it without needing further color work. On tablet the row wraps to a 2×2 grid; on phone the column direction flips so the four cards stack in a single column with the row gap preserved. Nothing horizontal-scrolls, nothing overlaps — the hierarchy stays intact from a 27-inch monitor down to a 375px iPhone.

What’s inside

One Divi section with two rows: a centered intro row (eyebrow + H2 + supporting paragraph) and a four-column pillar row
Four uniform pillar cards using native Text, Heading, and Icon modules — no custom code or third-party plugins
Mixed FontAwesome + Divi icon set at 46px in a single gold accent (#B89968), swappable from the icon module picker
Preset3 elevation shadow with a lift-on-hover transform (-6px Y translate) and a deeper hover shadow state
Cormorant Garamond serif display type paired with Outfit sans-serif body — both free Google fonts loaded natively
Responsive rules baked in: 4-across on desktop, 2×2 wrap on tablet, single-column stack on phone
Constrained 680px max-width on the intro paragraph so the header never runs wall-to-wall on wide monitors
Neutral cream + white + gold + charcoal palette that repaints in minutes via a single global color swap

Who it’s for

Best fit for private coaches, consultants, and advisors selling a relationship rather than a product — executive coaches, leadership consultants, career and identity coaches, therapists in private practice, financial advisors, and high-end wellness practitioners. The editorial serif-and-gold aesthetic reads as considered and premium, so it suits brands that charge accordingly. It also transplants cleanly outside coaching: boutique law firms explaining their approach, architecture studios listing services, wellness retreats outlining their method, or any professional-services site that needs a four-step "how we work" section that doesn't feel like a SaaS features grid.

Customization tips

First edit: the eyebrow, H2, and four card headings — those are the labels a visitor scans before reading anything else. Keep card body copy to two short sentences (roughly 20–30 words); more than that and the four cards stop being visually equal on desktop. Repalette by swapping the section background (#FAF7F2), the accent (#B89968 on icons and eyebrow), and the heading color (#1F2937); the cards are pure white so they'll adapt to any warm or cool background you choose. Icons are picked per-module — replace them from the Divi icon library or the FontAwesome set without touching CSS. No images are used, so there are no aspect ratios to worry about; if you want to add photography, drop a small round Image module above each icon and hide the icon. For a 3-pillar version, delete one column and the remaining three will redistribute across the row automatically.

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 Layout for Divi 5

How do the four cards behave on tablet and phone?

The row is set to nowrap on desktop, wrap on tablet (so the cards fall into a 2×2 grid), and flex-direction: column on phone (a single stacked column). The 28px column and row gaps are preserved at every breakpoint, so the cards never touch or overflow.

Which modules is the section built from?

Only native Divi 5 modules — Text for the eyebrow and card body copy, Heading for the H2 and card H3s, and Icon for the four pillar glyphs. No Blurb module, no code module, no third-party dependency.

Are there any images to swap out?

No. The layout is icon-driven by design, which is why it stays fast and works instantly with placeholder content. If you want photography instead, add an Image module above each icon and hide the icon — keep photos to a consistent square or portrait crop so the four cards stay visually equal.

How long should the copy inside each card be?

Two short sentences, roughly 20–30 words total, matching the sample content. The design assumes the four cards are visually balanced; if one pillar description runs to a full paragraph while the others stay short, the row will look uneven on desktop even though it stays valid.

Can I use three or five pillars instead of four?

Yes. Duplicate or delete a card column and Divi will redistribute the widths — three columns become 1/3 each, five wrap to a 3+2 layout on desktop. If you go to five, consider reducing card padding from 36px to 28px so the row still fits comfortably on a 1280px viewport.

How do I change the gold accent color everywhere at once?

The gold `#B89968` lives in two places: the eyebrow text color and the four icon color overrides (set via each Icon module's freeform CSS `selector{color:#B89968;}`). Update it in five modules and the accent flips globally — or set a Divi global color and reference it in each module to make future palette swaps a one-click 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.