Playful Pottery Class Testimonial Slider Layout for Divi 5: Three Quotes

Testimonials Coaching Playful

A warm, playful Divi 5 testimonials section featuring a 3-slide quote slider beside a section header. Built for pottery studios, craft workshops, and creative coaching businesses with a Fredoka + Nunito font pairing and a soft warm palette.

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 is built around an asymmetric two-column row: the left column carries the editorial anchor at a 8/24 flex-width on desktop, while the right column takes the heavier 16/24 share for the slider card. Both columns use align-items: center and a 56px gap, so the heading block sits vertically centered against the card on wide viewports without any manual offset tweaking. The section background is a warm cream (#fff7ec) with 88px vertical padding on desktop, stepping down to 60px on tablet and 40px on phone — generous breathing room that makes the content feel unhurried.

The left column stacks a small h4 eyebrow ("Kind words", Fredoka 13px, 1px letter-spacing, muted purple #625a8c) above an h2 at 44px with text-wrap: balance and a 1.15em line-height in deep navy #2b2457, then a single Nunito 17px sentence beneath. Keeping the copy that short on the left is intentional: it sets context and gets out of the slider's way. The h2 scales to 36px on tablet and 30px on phone so it never crowds the stacked layout.

The right column holds a native Divi 5 Slider module: white card (#ffffff), uniform 24px border-radius, a 1px solid border in warm sand (#f1dfcc), and overflow: hidden on both axes so slide transitions clip cleanly inside the rounded corners. All three slides use Fredoka for both the attribution line (13px, uppercase, 2px letter-spacing, purple #625a8c) and the quote body (26px, 1.45em line-height, deep navy #2b2457). Keeping two typefaces across the entire section — Fredoka for all display text and quotes, Nunito for supporting body copy — is what gives the layout its cohesive playful-but-refined feel.

On phones the row switches from nowrap to a wrapping column layout and both columns expand to full 24/24 width, so the heading reads first and the slider follows below it — a natural top-to-bottom reading order with no extra CSS required. Quote text drops to 19px on phone while remaining readable and properly spaced at 1.45em line-height.

What’s inside

Asymmetric two-column row (8/24 heading + 16/24 slider) with 56px gap and vertical center alignment built in
Native Divi 5 Slider module with three pre-written student quote slides, each set as its own Slide module
Slide attribution labels (Beth, Tomás, Yuki) styled as Fredoka uppercase 13px captions in `#625a8c`, semantic h3 heading level
Rounded slider card: 24px border-radius on all corners, 1px warm sand border (`#f1dfcc`), overflow hidden for crisp transition clipping
Full responsive cascade: columns stack to full width on phones, h2 scales 44→36→30px, quote text scales 26→22→19px across the three breakpoints
Section vertical padding steps: 88px desktop → 60px tablet → 40px phone, already wired to all three breakpoints
Two-font system throughout: Fredoka for all headings and quote text, Nunito for body copy — both referenced by name in the module settings
Arrow nav and dot nav both set to deep navy `#2b2457`, matching the headline color for a tidy single-accent palette

Who it’s for

This layout is a natural fit for pottery studios, ceramic workshops, and craft schools — the sample copy (Tuesday class, Thursday class, weekend workshop) maps directly onto a class-based enrollment model. Beyond ceramics, it works well for any coaching or in-person learning business: yoga studios, cooking schools, music teachers, life coaches, and wellness practitioners who want testimonials that feel warm and hand-crafted rather than corporate. The playful Fredoka typeface and cream-and-navy palette read friendly without being childish, so it also suits children's activity providers, art therapy practices, and boutique creative retreats where personal transformation is part of the pitch.

Customization tips

The fastest place to start is the slider card border color (#f1dfcc) and section background (#fff7ec) — swapping both to match your brand's warm tone (sage, terracotta, dusty rose) keeps the layout's cozy feel while making it yours. The deep navy #2b2457 is used in four places: h2, quote body text, arrow nav, and dot nav; changing it in one slider decoration setting and the h2 font setting covers the whole section.

For copy: the quote body is set at 26px Fredoka with a 1.45em line-height, which comfortably holds one to two short sentences per slide. Three lines of quote text is the practical maximum before the card grows taller than the heading column on desktop. Attribution labels have room for a name plus a short descriptor (class/role) at the current 13px size. The supporting paragraph under the h2 is intentionally one sentence; adding a second sentence here risks making the left column taller than the slider on desktop, which would break the centered alignment. No images are used in this layout, so there are no aspect-ratio constraints 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 Playful Pottery Class Testimonial Slider Layout for Divi 5: Three Quotes

How does the slider handle the three quotes on mobile?

On phones the row switches to a stacked column layout, so the heading block appears above the slider card at full width. The slider itself stays fully functional — visitors swipe or tap the arrow nav to move between quotes. Quote text drops to 19px so all three slides remain readable without scrolling inside the card.

Which Divi 5 modules does this layout use?

The layout uses four module types: Section, Row, Column, Heading (two instances in the left column), Text, and Slider with three nested Slide modules. There are no third-party or premium-only modules — everything is standard Divi 5.

Can I add a fourth or fifth quote slide?

Yes. In the Divi 5 builder, open the Slider module and add a new Slide. The dot nav and arrow nav update automatically. Keep in mind that the card has no fixed height, so very long quotes will push the card taller than the left-column heading on desktop — shorter quotes (one to two sentences) work best with this layout.

The Fredoka font isn't part of my brand. How do I switch fonts without breaking the layout?

Font family is set at the individual module level (h4, h2, Slider title, Slider content). Change the family in each module's font decoration settings. The two sizes to watch are the slider attribution label (13px) and the quote body (26px desktop) — if your replacement font has a taller x-height, you may want to drop the body size by 2–3px to maintain the same visual weight.

Are there any images or background images in this layout?

No. The section uses a flat color background (`#fff7ec`) and the slider card uses a white background. There are no images, gradients, or Blob-hosted assets in this layout, which means it loads fast out of the box and there are no image dimensions or aspect ratios to manage.

What should I edit first after importing the layout?

Replace the three quote texts and attribution lines inside each Slide module — that's the only content visitors will read. After that, adjust the h2 heading text to match your business. Colors and fonts can wait until you're happy with the copy, since the structural decisions (spacing, responsive breakpoints, card radius) are already dialed in.

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.