Organic Neighbourhood Bakery Testimonials Layout for Divi 5: Three Regulars

Testimonials Restaurant Minimal

A warm, minimal Divi 5 testimonials section for neighbourhood bakeries. Three customer quotes with portrait photos, Fraunces headings, and a soft parchment background. Ready to import.

Rate this element

Be the first to rate

Download this section, free

Divi 5 JSON, imports in seconds
Commercial license included
No account needed

Click to view the full page

Overview

The section opens with a two-column split: the left column carries the editorial header (an uppercase DM Sans eyebrow at 13px/600 weight with 1px letter-spacing, a Fraunces h2 at 44px with −1px tracking and text-wrap: balance, and an 18px body line), while the right column holds the first testimonial card. That asymmetry — context on the left, evidence on the right — means visitors read the section headline and a real customer quote in a single horizontal sweep, without the eye having to travel far.

The three testimonial cards share identical structure: a #fbf6ee warm cream background, a full 28px border-radius on all corners, a 1px solid #dccdb4 border, and a preset-1 box shadow with 8px vertical offset and 24px blur tinted rgba(34,26,16,0.18). The quote sits at the top of each card at 19px/1.6em line-height; below it, a flex row holds a 56×56px circular avatar (1:1 aspect ratio, object-fit: cover, 32px border-radius) paired with a stacked name/relationship label. justify-content: space-between on each card column means the avatar row is always pinned to the bottom regardless of quote length, keeping all three cards visually level at the footer even when copy varies.

The warm neutral palette — section background #f3eadc, card fill #fbf6ee, border #dccdb4, warm-brown text #675b49 for supporting copy and #2e2a22 for headlines and quotes — is a deliberate system. Every color sits within the same amber-to-linen range, so the section reads as cohesive and artisanal without any accent color doing decorative work. Fraunces (the h2) brings a slightly editorial, organic character; DM Sans handles all other text for legibility at small sizes.

On mobile, both rows switch from flexWrap: nowrap to wrap with flexDirection: column, and each column expands to full width (24_24). Vertical padding steps down from 96px desktop to 64px tablet to 44px phone, and the h2 scales from 44px to 30px. The left editorial column loses its right padding on phone so the heading block runs edge-to-edge, and the three cards simply stack in reading order beneath it.

What’s inside

One Divi 5 Section with two stacked Rows — a 50/50 split on desktop that collapses to a single column on mobile
Dual Heading modules in the editorial column: a 13px uppercase DM Sans eyebrow (h4) and a 44px Fraunces h2 with `text-wrap: balance` and responsive size steps (44 → 36 → 30px)
Three testimonial cards built as Divi 5 Column modules with `#fbf6ee` background, full 28px border-radius, `#dccdb4` 1px border, and a warm semi-transparent box shadow
Per-card avatar using a Divi 5 Image module at a fixed 56px width, 1:1 aspect ratio, 32px border-radius, and `object-fit: cover` — works with any square portrait crop
Per-card attribution row built with nested Divi 5 Group modules: a flex row containing the avatar group and a column group holding name (700 weight, 16px) and role/relationship label (muted `#675b49`, 15px)
`justify-content: space-between` on each card column pins the avatar attribution to the card bottom, keeping all cards visually aligned regardless of quote length
Three-step responsive padding on the Section (96px / 64px / 44px) and h2 font scaling, with both Rows switching to single-column stacking on phone via `flexWrap: wrap`

Who it’s for

This layout is built for independent bakeries, cafes, and neighbourhood food businesses that want social proof to feel personal rather than polished. It also suits coffee roasters, patisseries, delis, and any hospitality brand where the relationship between staff and regulars is part of the value proposition. Wedding and events caterers will find the third card's "wedding order" framing immediately usable. More broadly, any small food-and-drink business that relies on repeat custom and word-of-mouth — rather than volume traffic — will find the warm, understated tone a better fit than a star-rating grid.

Customization tips

The entire palette is driven by four hex values (#f3eadc section background, #fbf6ee card fill, #dccdb4 border, #2e2a22 dark text). Swapping those four values is enough to shift from artisan-bakery warm to a cooler, contemporary cafe look without touching any layout settings.

Quotes are comfortable up to roughly 180 characters before the card height starts to diverge noticeably from its neighbours — keep all three quotes within 20 characters of each other for the best visual balance. Avatar images should be provided as square crops at 400×400px minimum; the module enforces the 1:1 ratio, but a loose portrait crop will shift the focal point unpredictably with object-fit: cover.

The attribution label below each name ("Regular since 2018", "Wedding order, June 2024") is free-form text — use it for a job title, neighbourhood, or any short relationship signal. DM Sans is loaded via Google Fonts; Fraunces can be swapped for any other serif at the heading module without affecting spacing.

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 Organic Neighbourhood Bakery Testimonials Layout for Divi 5: Three Regulars

How do the three cards stay the same height when the quotes are different lengths?

Each card column uses `flexDirection: column` with `justifyContent: space-between`. The quote text expands toward the top and the avatar row is pushed to the bottom, so all three cards share the same floor line even when one quote runs longer than the others.

What happens to the two-column layout on a phone?

Both Rows carry `flexWrap: wrap` and `flexDirection: column` at the phone breakpoint, and every column is set to `24_24` (full width) on phone. The result is a single-column stack: editorial header first, then the three testimonial cards in order, each full-width.

What modules make up each testimonial card?

Each card is a Divi 5 Column module containing: one Text module for the quote, one Group module (flex row) for the attribution area, inside which sits a sized Group wrapping an Image module for the avatar, and a second Group (flex column) holding two Text modules for the name and the relationship label.

Can I add a fourth testimonial card?

Yes — duplicate one of the existing card columns and add it to the second Row, then adjust the Row's column structure from `1_2,1_2` to `1_3,1_3,1_3` in the Divi editor if you want three cards on the bottom row. Keep quotes similar in length to maintain even card heights.

Do I need to replace the Pexels avatar photos before publishing?

Pexels photos are included as editable placeholder content and are licensed for commercial use under the Pexels license, but replacing them with real customer portraits (with permission) will always read as more authentic. The Image module accepts any square or portrait-crop photo — the 1:1 aspect ratio and `object-fit: cover` handle the crop automatically.

Which typefaces does the layout use and do I need to install them?

The layout uses Fraunces for the h2 heading and DM Sans for all other text. Both are Google Fonts and Divi 5 loads them automatically when the font is set in the module settings — no manual installation required.

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.