Playful Music School Testimonials Layout for Divi 5: Three Parent Quotes

Testimonials Coaching Playful

A cheerful Divi 5 testimonials section featuring three parent quote cards for a music school or kids coaching brand. Warm pastel background, Fredoka headings, rounded card borders, and avatar photos — ready to drop into any after-school or coaching site.

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 sits on a warm cream background (#fff7ec) with vertical padding that scales from 88px on desktop down to 40px on mobile, giving the content room without wasting screen real estate. The layout uses two rows of a 50/50 column split. The first row places the editorial intro (eyebrow label, main heading, and a short sub-copy line) in the left column, with the first testimonial card occupying the right. The second row holds the remaining two cards side by side, so the three quotes feel like a considered arrangement rather than a flat stack.

Each testimonial card is a Divi Column module styled as a rounded card: fully rounded corners at 36px radius, a 2px solid #2b2457 (deep indigo) border, and a hard-offset box shadow (6px right, 6px down, zero blur) in the same indigo. That flat, opaque shadow is the defining visual signature here. It reads as graphic and playful rather than soft or corporate, which matches the music-school context precisely. Cards carry 32px padding on all sides and use a flexbox column layout with justifyContent: space-between, so quote text sits at the top and the attribution row locks to the bottom regardless of quote length.

The heading pair uses Fredoka: a 13px h4 eyebrow in muted purple (#625a8c) with 1px letter-spacing, and a 44px h2 in deep indigo with text-wrap: balance for clean line breaks at any container width. Body text throughout uses Nunito at 18px (intro copy) and 19px (quotes) with a 1.6em line-height. Attribution portraits are 56px circular images (1:1 aspect ratio, 36px border-radius, object-fit: cover), each paired with a bold name line and a lighter relationship label such as "Mum of Lila, age 8" in the softer purple.

On tablet the heading drops to 36px and column padding tightens. At the phone breakpoint every column becomes full-width, rows switch to a vertical flex column, and the heading settles at 30px. The result is a clean single-column read on small screens: the intro block leads, followed by all three cards stacked in order.

What’s inside

One Divi Section plus two Divi Rows and five Divi Columns, all native Divi 5 block modules with no custom code required
Three testimonial cards built as styled Divi Column modules: 36px fully-rounded corners, 2px solid indigo border, and a hard 6px flat box shadow for a bold graphic look
Fredoka heading pair (h4 eyebrow at 13px / h2 at 44px) with responsive size steps baked in across desktop, tablet, and phone breakpoints
Per-card circular portrait using a Divi Image module at 1:1 aspect ratio nested inside a Divi Group, with reviewer name and relationship label (child name and age) in two stacked Divi Text modules alongside
Warm cream section background with a three-color palette (cream `#fff7ec`, deep indigo `#2b2457`, muted purple `#625a8c`) applied consistently across backgrounds, borders, text, and shadows
Flexbox `space-between` layout inside each card keeps quote text top-anchored and attribution bottom-anchored independent of how long the quote runs
Responsive column stacking: rows collapse to a vertical flex column on mobile and columns expand to full width, with section padding stepping down at each breakpoint

Who it’s for

This layout is a strong fit for music schools, after-school activity providers, children's sports or arts coaching businesses, and performing arts academies where parent trust is the primary buying signal. The family-oriented attribution format (reviewer name plus child age) also translates well to dance studios, kids' yoga, drama schools, swim academies, and private tutors working with children. If your audience is parents deciding whether to enroll their child in a program, this section communicates warmth and real-family credibility in a way that a generic quote block simply does not.

Customization tips

The three-color palette is the fastest swap: update #fff7ec (section background), #2b2457 (borders, shadows, primary text), and #625a8c (eyebrow and secondary text) in each module's decoration panel. The hard box shadow and the border both use the same indigo hex in this layout, so change them together for consistency (they are independent properties on the Column module, so you can also split them if you want a lighter border with a heavier shadow). Fredoka and Nunito are Google Fonts loaded automatically by Divi 5 when set in the font fields. Substitute any rounded or friendly sans (Poppins, Quicksand, Outfit) in the heading and text module settings without touching structure. Quote copy works best at 20 to 35 words per card; quotes over 50 words may create noticeable height differences between the top-row card and the two bottom-row cards. Portrait images should be square or cropped square before upload, since the module enforces a 1:1 aspect ratio with object-fit: cover.

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 Playful Music School Testimonials Layout for Divi 5: Three Parent Quotes

How do the three cards stack on mobile?

On mobile, each row's flex direction switches to a vertical column, so the intro block appears first, followed by the three cards stacked one below the other in order. Every column expands to full width (24/24 flex units). The heading scales to 30px and section padding drops to 40px top and bottom.

What Divi modules make up each testimonial card?

Each card is a Divi Column module. Inside it sits a Divi Text module for the quote, then a Divi Group module containing two nested Group modules: one fixed at 56px wide holding the circular Divi Image module, and a second (flex-grow) holding two stacked Divi Text modules for the reviewer name and the relationship label.

Can I change the border color independently from the shadow color?

Yes. The border color and box shadow color are separate properties in the Column module's decoration panel. Both happen to be set to `#2b2457` in this layout, giving them a unified look. You can update them independently, for example a light purple border with a deeper navy shadow, without any structural changes.

How many words fit comfortably in each quote?

The three sample quotes run roughly 20 to 28 words each. The `space-between` flexbox layout on the card keeps attribution pinned to the bottom regardless of quote length, so modest variation is fine. Quotes over 50 words risk making the bottom-row cards noticeably taller than the top-row card and may disrupt the visual balance between the two rows.

Do the portrait images need to be circular before I upload them?

No. The Image module applies a 36px border-radius (which renders as a circle at 56px) and `object-fit: cover` directly, so any square crop will display correctly. If your source image is not square, the module will center-crop it. Crop to 1:1 before uploading to control exactly what is centered in the frame.

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.