Editorial Studio Press Quotes Layout for Divi 5: Three Publications

Testimonials Agency Minimal

A minimal editorial press-quote section for agencies. Three publication pull-quotes in Playfair Display with top-border columns on a clean white background. Ready to import into Divi 5.

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 layout frames press recognition as editorial content rather than a badges strip. A full-width white section with 120px vertical padding (scaling to 80px on tablet and 56px on mobile) opens with a two-row structure: the first row holds a left-aligned eyebrow in Source Sans 3 at 13px, 600 weight, 2px letter-spacing, all-caps, and a Playfair Display h2 at 44px constrained to 640px max-width. The eyebrow color is #6b645a, a warm stone that reads clearly without competing with the near-black #1c1a17 headline.

Below that, three equal-width columns carry the press quotes. Each column opens with a 2px solid #1c1a17 top border (the only horizontal rule in the layout), 28px top padding on desktop that steps down to 20px on mobile, and a 16px column-direction row gap between its three text nodes. That top border is the visual anchor: it signals "entry point" the way a newspaper column rule does, keeping the eye oriented across all three items simultaneously.

Every column follows the same three-tier typographic hierarchy: publication name in Playfair Display at 20px, 700 weight, uppercase with 3px letter-spacing; the quote itself in 22px italic Playfair Display at a 1.45em line-height (generous enough for longer pull-quotes to breathe); and a source line in Source Sans 3 at 15px in #6b645a. Two typefaces only, used at five distinct scales, which is what gives the section its editorial precision.

On phone, the three-column row switches from nowrap to wrap with flex-direction: column, stacking the cards vertically at full 24/24 width. The section padding collapses to 56px top and bottom, keeping the section proportionate on smaller viewports without requiring any custom breakpoint overrides beyond what is already baked into the JSON.

What’s inside

Two-row section structure: a dedicated header row (eyebrow + constrained h2) above a separate three-column quote row, so headline copy and press content live in independent, independently-editable rows
Three equal 1/3 columns with `equal-columns_3` flex structure and a fixed 40px column gap on desktop, collapsing to full-width stacked columns on mobile
Per-column 2px solid top border in `#1c1a17` as the primary visual rule — all other border sides are set to 0px width, giving precise control without fighting Divi defaults
Three-tier typographic hierarchy per column using only Heading (h4 eyebrow) and Text modules: publication name (Playfair Display, uppercase, 700 weight), quote (Playfair Display, italic, 22px), source line (Source Sans 3, muted stone `#6b645a`)
Responsive font scaling built into the heading module: h2 steps from 44px desktop to 36px tablet to 30px phone, no custom CSS required
Pure white section background (`#ffffff`) with no imagery, no icons, and no decorative elements — the typography carries all visual weight
16px `rowGap` inside each column via `layout.flexDirection: column` keeps the three text nodes consistently spaced across all three columns without per-module margin tweaks

Who it’s for

This section is built for studios, consultancies, and agencies whose credibility comes from earned media rather than star ratings. Design studios, brand agencies, architecture firms, independent consultancies, and boutique creative shops will find the editorial newspaper register immediately familiar. It also works for founders and speakers who have been featured in trade press and want to surface that recognition without the visual noise of logo walls. The layout assumes you have real, quotable press mentions — three short pull-quotes from named publications with a dateline.

Customization tips

The entire palette lives in two hex values: #1c1a17 (near-black) and #6b645a (warm stone). To shift the mood, replace both globally — a cooler #0d0d0d / #7a7a7a reads more corporate; an off-white background like #faf9f6 softens the contrast for luxury brands.

Keep publication names short: the 3px letter-spacing at 20px means names longer than roughly 20 characters will wrap awkwardly at narrower breakpoints. Pull-quote text is most legible at 10 to 22 words; beyond that, the 22px italic will push the column height noticeably taller than its neighbors on desktop.

The source line (issue date or feature name) has no length constraint in the layout, but Source Sans 3 at 15px will wrap to two lines around 45 characters on a 1/3 column. The h2 is capped at maxWidth: 640px and textWrap: balance, so headlines up to about 55 characters center well without awkward orphans.

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 Editorial Studio Press Quotes Layout for Divi 5: Three Publications

How does the three-column grid behave on phones?

The second row switches from `flex-wrap: nowrap` to `flex-wrap: wrap` with `flex-direction: column` on the phone breakpoint, stacking all three quote columns vertically at full width. Each column retains its top border and 20px top padding, so the stacked result still reads as three distinct press items.

Which Divi 5 modules does this section use?

Only Section, Row, Column, Heading, and Text modules. There are no Blurb, Testimonial, or Image modules. All typography, spacing, and border styling is handled through module decoration properties and column-level layout settings.

The top border on each column is the only divider — can I remove or change it?

Yes. Each column's border is set as `top: { width: '2px', style: 'solid', color: '#1c1a17' }` with all other sides at `0px`. You can change the color, increase the weight for a bolder rule, or remove it entirely. Removing it flattens the hierarchy considerably, so consider adding a small top margin to the publication name if you do.

What is the eyebrow 'As seen in' built with, and can I hide it?

It is a Heading module set to h4 with custom font overrides (Source Sans 3, 13px, 600, 2px letter-spacing, uppercase, `#6b645a`). To hide it, delete the module or toggle its visibility in the Divi 5 builder. The h2 headline below it lives inside a Group module with `maxWidth: 640px`, so it will still be left-aligned and constrained after the eyebrow is removed.

There are no images in this layout. Should I add publication logos?

The layout is deliberately text-only. Adding publication logos as Image modules would require you to source or create SVGs at consistent heights, and any mismatch in logo proportions breaks the horizontal alignment the top borders establish. If you want logos, replace the uppercase Playfair Display publication-name text nodes with Image modules and maintain a consistent image height (40–48px recommended) across all three columns.

What should I edit first after importing?

Start with the three publication names and their quotes in the second row's Text modules. The source datelines (e.g. 'Studios to watch, March 2025') are the least visually prominent element and can be updated last. The h2 headline in the first row and the eyebrow are single-module edits and take under a minute.

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.