Organic Wellness Retreat Testimonial Layout for Divi 5: Quote Over Photo

Testimonials Coaching Minimal

A minimal Divi 5 testimonials layout featuring a large serif quote over a warm nature photo with dark overlay — perfect for wellness retreats, coaches, and holistic brands.

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

This testimonials section is built as a single full-width Divi 5 section with a warm parchment background color (#f3eadc) overlaid by a Pexels landscape photograph at cover size, centered. A radial dark overlay (rgba(34,26,16,0.7)) runs edge to edge at 90 degrees, creating a unified moody amber-brown wash that lets the cream text read clearly without a separate text-protection panel. The vertical padding is 120px desktop, stepping down to 80px tablet and 56px phone — generous breathing room that signals unhurried, high-trust brand positioning.

The content stack sits inside a single 4/4 column constrained to a max-width of 760px, left-aligned. At the top, a decorative opening quotation mark is rendered as a standalone Text module in Fraunces 700 at 120px with a line-height of 0.8em — tight enough that it reads as a graphic element rather than body text. Immediately below it, the testimonial body inherits the same Fraunces typeface at 42px with textWrap: balance, so line breaks fall naturally even when the quote runs long. A 64px-wide divider rule in 2px solid cream separates the quote block from the attribution, giving the eye a deliberate pause before the speaker's name.

Attribution is handled by two stacked DM Sans Text modules inside a flex column group: the guest name at 17px/700 weight and the role or context label at 15px regular, both in #fbf5ea. The pairing of a display serif (Fraunces) for the quote against a clean geometric sans (DM Sans) for attribution is an intentional hierarchy contrast that reads as both editorial and trustworthy — a combination common in luxury wellness branding.

On mobile, the row switches to a column flex direction and padding compresses proportionally. The decorative quotation mark scales from 120px to 80px and the quote body from 42px to 26px, preserving the typographic rhythm across all viewports without any custom breakpoint hacks.

What’s inside

Full-width section with a real Pexels photo background, `cover` sizing, and a semi-transparent dark gradient overlay baked into the section's background module
Oversized decorative opening quotation mark rendered as a standalone Divi 5 Text module in Fraunces 700 at 120px — scales to 96px tablet and 80px phone
Quote body Text module in Fraunces at 42px with `textWrap: balance` for natural line breaks — responsive to 34px tablet and 26px phone
64px-wide Divi 5 Divider module in 2px solid cream acting as a visual separator between the quote and attribution
Attribution block built as a flex-column Divi 5 Group containing two Text modules: bold name (DM Sans 700, 17px) and role label (DM Sans regular, 15px)
Max-width 760px Group container left-aligned inside the column for controlled reading measure on wide screens
Responsive padding: 120px top/bottom desktop → 80px tablet → 56px phone, set natively via Divi 5 spacing controls

Who it’s for

This layout suits coaches, wellness retreat operators, yoga studios, and holistic health practitioners who need a single high-impact testimonial to anchor a sales or landing page. It also fits boutique hotel brands, spa destinations, and mindfulness educators whose clients share narrative, story-driven feedback rather than star ratings. The editorial typography and muted earth-tone palette make it credible for premium positioning -- anywhere the goal is to let one compelling guest voice do the selling.

Customization tips

Swap the background photo for any portrait-oriented or wide landscape image -- aim for a 16:9 or wider crop at minimum 1920px wide so the cover sizing fills correctly on large screens. Adjust the overlay opacity by editing the two gradient stop colors in the section's background settings; darker stops (0.8 alpha) improve legibility over busy photos, lighter stops (0.5) let the scene breathe more. The parchment section color (#f3eadc) and all text colors (#fbf5ea) can be changed to a single preset color swap if your site uses Divi 5 global presets. Keep the quote body under roughly 200 characters so the textWrap: balance algorithm works effectively and the layout stays roughly two to three lines. The decorative quotation mark Text module can be hidden entirely if your brand style avoids typographic quotes -- the layout still reads clearly without it.

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 Wellness Retreat Testimonial Layout for Divi 5: Quote Over Photo

What modules make up this layout?

It uses five core Divi 5 modules: Section, Row, Column, Text (four instances), Divider, and two Group modules for the attribution block and the divider wrapper. No third-party or custom modules are required.

How does the dark overlay work -- is it a separate module?

No. The overlay is a gradient applied directly inside the Section's background settings, stacked over the photo. Both the background color, the image, and the gradient are configured in one place, which means there is nothing extra to delete or reorder.

Can I use my own photo instead of the Pexels image?

Yes. Replace the image URL in the Section background settings. Use a landscape photo at least 1920px wide and make sure the focal point is centered so `position: center center` works well. Avoid images with high-contrast subject matter in the left third where the text overlays.

How long should the testimonial quote be?

The layout is designed around one to three medium-length sentences, roughly 120 to 220 characters. Longer quotes will wrap to more lines and push the divider and attribution further down, which still works but reduces the dramatic single-glance impact the oversized quote mark is designed to create.

Does the oversized quotation mark ever overlap the quote body on small screens?

No. The quotation mark Text module sits above the quote body Text module in normal document flow, and its line-height (0.8em) keeps it compact. On phones it scales to 80px, which leaves clear vertical separation before the 26px body text begins.

What is the easiest first edit after importing?

Replace the quote text and attribution name/role -- those two Text modules are the entire visible message. Then swap the background photo. Color and typography can stay as-is on an earth-toned wellness site, or be updated globally via Divi 5 preset colors.

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.