Elegant Coaching Cards Layout for Divi 5 — Approach & Services Grid

Cards Coaching Elegant

A refined four-card Divi 5 layout for coaches. Showcase your 1:1 sessions, vision mapping, mindset work and accountability rhythm with elegant serif typography.

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

This is a four-column card grid built for a coaching Approach & Services section, with a centered intro row above and the four service cards below. The section sits on a warm off-white background (#faf6f1) with generous 110px vertical padding, giving the cards room to breathe against the page. The intro headline uses Cormorant Garamond at 46px in a deep espresso (#2a2620), paired with a 640px-capped Inter subtitle in a softer taupe (#5b5048) — the classic serif-display / sans-body pairing that reads as considered rather than corporate.

Each of the four cards is a white column with 20px rounded corners, 36px of internal padding on every side, and a soft warm-toned shadow (rgba(60,40,25,0.14) at 14px vertical / 34px blur). On hover, the card lifts 6px and its shadow deepens — a small motion cue that makes the grid feel tactile without being showy. Inside each card, the vertical rhythm is set by a 14px rowGap: a 34px accent icon in warm terracotta (#b08968), then a Cormorant H3 at 24px, a short Inter paragraph at 15px/1.7 line-height, and a small uppercase link with 1.5px letter-spacing that turns from terracotta to a darker #8a6a4f on hover.

The row is set to flexWrap: nowrap with alignItems: stretch on desktop, so all four cards match height even when the copy is uneven. A 28px columnGap keeps the cards distinct without floating them apart. On tablet the row wraps to a 2×2 grid (each column switches to a 12/24 flex-type), and on phone the section collapses to a single stacked column — the row's flexDirection: column and each card's 24_24 phone flex-type do the work, no extra breakpoints needed.

What’s inside

One Divi 5 section, two rows: a centered heading + subtitle intro row, and a four-column services row below
Four identical service cards, each built from a Divi Icon module, an H3 Text module, a body Text module, and a small uppercase 'link →' Text module
Warm editorial palette wired end-to-end: `#faf6f1` section background, `#FFFFFF` card fill, `#2a2620` headings, `#5b5048` body, `#b08968` accents
Cormorant Garamond for the H1/H3, Inter for body and the uppercase CTA links — a serif-display / sans-body pairing already set on every module
Card polish set at module-level: 20px synced border-radius, 36px padding on all sides, warm-toned outer shadow, and a −6px hover translate with deepened shadow
Responsive column structure baked in: `1_4,1_4,1_4,1_4` on desktop, `12/24` (2-up) on tablet, `24/24` (stacked) on phone — no custom CSS required
Icon mix uses two Divi built-in glyphs and two Font Awesome glyphs, all sized 34px and left-aligned in the accent color
Intro paragraph is capped at 640px `max-width` and centered with auto side margins, so the headline area stays legible on wide screens

Who it’s for

This section was designed for coaches and small coaching studios — life coaches, executive coaches, leadership and mindset coaches, career and business coaches — who want to explain how they actually work, not just what they charge. The four-pillar structure fits any practice that offers a small, curated set of services (1:1 sessions, planning, mindset work, accountability) rather than a long menu. Beyond coaching, the same layout works cleanly for therapists, nutritionists, wellness studios, boutique consultants, and creative agencies presenting a short services grid on a homepage or about page. The warm off-white palette and serif headings lean editorial and premium, so it suits practitioners who charge accordingly and want their site to reflect that.

Customization tips

Start by rewriting the four card titles, bodies, and small CTA links to match your own services — the body copy is tuned to roughly 25–40 words per card, which is what keeps the cards visually even. Anything longer will break the equal-height stretch on desktop. To reskin the palette, change the section background (#faf6f1), then update the accent color (#b08968) on each icon and on the CTA link color/hover — those are the two levers that drive the whole warm tone. Swap the fonts globally in your Divi theme settings rather than per-module if you want a different pairing. The icons mix Divi and Font Awesome glyphs; you can replace all four from the icon picker without touching anything else. If you need fewer services, delete a column and the remaining cards will re-flow; for six, duplicate a column and switch the row to 1_3,1_3,1_3 on desktop. No images are used in this section, 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 Cards Layout for Divi 5 — Approach & Services Grid

How does the four-column grid behave on tablet and mobile?

The row wraps to a 2×2 grid on tablet (each column switches to a `12/24` flex-type) and stacks to a single column on phone (the row is set to `flexDirection: column` and each card becomes `24/24`). You don't need to add any custom breakpoints — it's already wired on every column.

Which Divi 5 modules does this section actually use?

Only four native modules per card: an Icon module for the glyph, a Text module for the H3 title, a Text module for the body paragraph, and a Text module for the small uppercase 'link →' line. The intro row uses one Heading module and one Text module. No third-party modules, no code modules.

Are the cards really equal height, or does uneven copy break the layout?

The row uses `alignItems: stretch` with `flexWrap: nowrap` on desktop, so all four cards match the tallest card's height. Keep each body paragraph in the 25–40 word range and the cards will feel visually even; go significantly over that and one card will stretch the rest, which usually looks fine but eats vertical space.

What should I edit first when I drop this into my site?

The four card titles, the four body paragraphs, the intro headline and subtitle, and the four inline `#book-clarity` / `#vision-call` / `#mindset` / `#rhythm` anchor links — point those at your real booking, contact, or service pages. After that, swap the four icons if you want ones closer to your service names.

Does the layout include any images or stock photos I'd need to replace?

No. The section is entirely typographic — icons, headings, and text on white cards over a warm off-white background. Nothing to license, resize, or swap out on the image side.

How is the hover effect implemented, and can I turn it off?

Each card has a hover state that translates it up by 6px (`translate.y: -6px`) and deepens its box-shadow. It's set on the column module itself, so removing it is a two-click job in the column's Transform and Box Shadow hover tabs — no CSS edits.

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.