Elegant Coaching Cards Section for Divi 5 — How We Work Together

Cards Coaching Elegant

A refined four-card Divi 5 layout for coaches and consultants. Showcase your pillars—clarity, strategy, accountability, confidence—with serif typography and warm neutrals.

Variations

Columns2 columns3 columns 4 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 section opens on a warm cream canvas (#F7F3EE) with 110px of vertical padding, giving the composition the kind of unhurried breathing room that suits coaching, therapy, and wellness brands. A centered intro column—capped at 720px so the line lengths stay elegant—leads with a Cormorant Garamond h2 at 44px and a soft Outfit tagline in muted stone (#5A5751), setting a calm editorial tone before the reader ever meets the four pillars.

Below the intro, two rows of 50/50 columns build a 2×2 grid of white cards. Each card gets 36px of padding, 20px rounded corners, and a soft outer shadow (preset3, 32px blur, low-opacity charcoal) that lifts it gently off the cream field without shouting. Inside, a 44px copper-tan icon (#B48A6A) sits above a Cormorant Garamond h3 at 26px and an Outfit body paragraph at 16px—a serif/sans pairing that reads as thoughtful rather than corporate. On hover the whole card translates up 6px and the shadow deepens (24px vertical, 48px blur), a small motion cue that rewards curiosity.

The grid uses a 32px column and row gap for airy separation, with a 56px margin between the intro block and the first card row. On tablet the row wraps; on phone the flex direction switches to column so cards stack in a clean single file, and the h2 tightens from 44px down to 32px so it never crowds a small screen. The result is a section that reads as intentional and premium at every width.

What’s inside

Centered intro block (Cormorant Garamond h2 + Outfit tagline) constrained to a 720px column for elegant line lengths
2×2 grid of four white pillar cards on a soft cream section background (`#F7F3EE`)
Each card built from an Icon + Heading + Text module trio—no images required
44px copper-tan icons (`#B48A6A`) mixing Font Awesome and native Divi icon glyphs
20px rounded corners with a preset3 outer shadow (32px blur) that deepens on hover
Hover interaction: card translates -6px with a stronger 48px-blur shadow
Serif/sans typography system: Cormorant Garamond headings paired with Outfit body copy
Responsive behavior: 2 columns on tablet (wraps), full-width stacked columns on phone with a smaller 32px h2

Who it’s for

Written for coaches of every stripe—life, executive, career, mindset, leadership, business—this section slots naturally into a "How We Work Together," "Our Process," or "What You Get" page. The warm cream-and-copper palette and serif headings also make it a strong fit for therapists, counselors, somatic practitioners, breathwork guides, doulas, nutritionists, and holistic wellness studios who want an editorial, non-corporate feel. Consultants, boutique agencies, and independent advisors selling a signature methodology can use the same four-pillar rhythm to describe phases of an engagement. It works equally well as a homepage anchor or partway down a services/about page.

Customization tips

Palette swaps are the fastest brand pass: change the section background #F7F3EE, the card background #FFFFFF, and the accent #B48A6A (used only on the four icons) to remap the whole mood without touching structure. Card headings read best at roughly 24–36 characters—short enough to sit on two balanced lines at the 26px h3 size. Body paragraphs are sized for around 140–170 characters each; keep them consistent so the cards line up visually. Because the layout is icon-only, no photography is needed—swap the Font Awesome or Divi glyphs from the icon module picker to match your process. Need a fifth or sixth pillar? Change the second row to a 1/3, 1/3, 1/3 column structure, or duplicate the row. To dial the tone from luxe to modern, swap Cormorant Garamond for a geometric serif and keep Outfit for the body.

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 Section for Divi 5 — How We Work Together

How does the 2×2 card grid behave on tablet and phone?

On tablet the row is set to `flexWrap: wrap`, so cards stay in a 2-up grid but reflow gracefully. On phone the row switches to `flexDirection: column`, meaning all four cards stack full-width in a single vertical column, and the intro h2 drops from 44px to 32px so it fits comfortably on small screens.

Which Divi 5 modules is this section actually built from?

It's entirely native Divi 5 modules: one Heading + one Text for the intro, then per card a stacked Icon + Heading (h3) + Text. No third-party plugins, no code modules, no blurb hacks—just the standard Divi builder blocks arranged in a Section → Row → Column tree.

Do I need to source any images for this to look finished?

No. The design is deliberately icon-forward. Each of the four cards uses a single 44px icon (a mix of Font Awesome and Divi's own icon set, all tinted the same copper `#B48A6A`) as its visual anchor, so you can ship it without photography or illustration.

What should I edit first once I've imported it?

Start with the intro h2 and tagline to match your promise, then rewrite the four card headings—these are the load-bearing lines. After that, tighten each card paragraph to roughly 140–170 characters so the four cards stay balanced in height. Icons and colors are the last pass.

Can I add a fifth or sixth pillar without breaking the layout?

Yes. The cleanest option is to change the second row's column structure from 1/2, 1/2 to 1/3, 1/3, 1/3 (giving you six cards total), or add a third row of two. Keep the same 32px column/row gap and card padding so the rhythm holds.

What's the hover interaction, and can I turn it off?

On desktop each card lifts by 6px on hover and its shadow deepens (from a 32px blur to a 48px blur). If you'd prefer a static look, remove the hover Transform on each column and reset the hover Box Shadow to match the default—both live in the Design tab of the column module.

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.