Brutalist Sneaker Brand Press Quotes Layout for Divi 5: Three Publications

Testimonials E-commerce Bold

Bold brutalist press-quote testimonials section for Divi 5. Three-column layout with thick top borders and editorial typography — perfect for sneaker brands and ecommerce product pages.

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 section earns attention by doing the opposite of what most press-quote layouts do: it strips away cards, quotation-mark icons, and decorative noise, leaving only the words and the weight of the publication behind. The structural logic is a two-row section on a white (#ffffff) background with 64px vertical padding on desktop (tapering to 48px on tablet, 32px on mobile). The first row holds a left-aligned header group: a small h4 in Space Mono at 13px, 700 weight, 2px letter-spacing, uppercase, steel-grey (#4a4a4a) acts as an editorial eyebrow label. Below it, the h2 headline -- "They said it, not us" -- arrives in Archivo Black at 44px, −1px tracking, uppercase, with text-wrap: balance applied, which prevents an orphaned last word at any viewport width. Both sit in a divi/group capped at 640px so the heading never stretches uncomfortably wide.

The second row is where the editorial character lives. Three equal columns (1_3 / 1_3 / 1_3) share a 40px column gap and are set to flex-wrap: nowrap on desktop so they always read as a tight horizontal band. Each column carries a single design decision that does all the heavy lifting: a 4px solid black top border with zero border width on all other sides. That top rule is the only decoration in the entire layout. Everything below it is typography: publication name in Archivo Bold at 20px, uppercase, 3px letter-spacing; pull quote in Archivo Italic at 22px with 1.45 line height; attribution line in Public Sans Regular at 15px, muted grey (#4a4a4a).

On mobile, the row switches to flex-wrap: wrap with flex-direction: column, and each column expands to full 24/24 width. Column top padding drops from 28px to 20px. The heading font steps down to 30px on phone and 36px on tablet. No modules are hidden or reordered -- the stacked layout reads as naturally as a magazine sidebar. There are no images, no avatars, no background colors: the brutalist restraint is the product.

What’s inside

Two-row section: editorial eyebrow + bold `h2` header row, then a three-column press-quote grid
4px solid black top-border rule on each column -- the sole decorative element, used deliberately as a brutalist divider
Three publication slots, each with a `divi/text` publication name (Archivo Bold, uppercase, 3px tracking), italic pull quote (Archivo Italic 22px), and muted attribution line (Public Sans 15px)
Responsive type scale: `h2` at 44px desktop / 36px tablet / 30px phone, controlled via per-breakpoint font values
Flexbox column layout with `nowrap` + 40px gap on desktop; wraps to a single stacked column on phone with full-width sizing
White section background with generous padding that scales across three breakpoints (64 / 48 / 32px)
Font trio baked in: Space Mono (eyebrow), Archivo (headlines + quotes), Public Sans (attribution) -- all loaded via Divi's font system

Who it’s for

Built for ecommerce brands that want press coverage to do the selling without any visual fuss. Sneaker labels, streetwear drops, independent footwear brands, and physical-product DTC companies will get the most out of it immediately. It also works for any product brand -- apparel, gear, consumer electronics, beauty -- where editorial credibility matters and the audience reads typographic density as a signal of quality rather than a reason to scroll past. Agencies building brand pages for fashion or lifestyle clients will find it drops cleanly into an existing Divi 5 page without competing with surrounding sections.

Customization tips

The palette is pure black-and-white with a single grey (#4a4a4a) for secondary text. To shift the palette, change the h2 color and the top-border color on each column together -- they anchor the visual identity. Swap the border from black to a brand accent (e.g. electric yellow or terracotta) for an instant personality shift without restructuring anything.

Publication names are set in uppercase with 3px letter-spacing; keep them short -- one to three words reads cleanest in that slot. Pull quotes are sized at 22px italic; aim for 8--18 words per quote so the line count stays roughly equal across all three columns, which preserves the grid's balance on desktop. Attribution lines (issue title, date) can be one short line each -- they are deliberately understated.

The h2 uses text-wrap: balance, so the headline self-adjusts; you can push it to 50--60 characters without orphan risk. The 640px group max-width on the header row is intentional -- widen it only if your headline is significantly longer.

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 Brutalist Sneaker Brand Press Quotes Layout for Divi 5: Three Publications

How do the three quote columns behave on phones?

Each column is set to `24_24` flex sizing on phone and the row switches to `flex-direction: column`, so the three publication blocks stack vertically in source order. The 4px top border on each column still appears, giving each block a clear visual separator as you scroll.

Which Divi 5 modules does this layout use?

Only four module types: `divi/section`, `divi/row`, `divi/column`, `divi/heading`, and `divi/text` -- plus one `divi/group` wrapper on the header. There are no Blurb, Testimonial, or Image modules. Everything is built from core layout and text primitives.

Is there a background image or color in any column?

No. The section background is flat white and the columns carry no background of their own. The only visual marker distinguishing each quote block is the 4px black top border. That restraint is intentional -- adding column backgrounds would break the brutalist aesthetic.

What should I edit first after importing?

Replace the three publication names, pull quotes, and attribution lines in the `divi/text` modules inside each column. Then update the `h2` text in the header row. Font, spacing, and border values are already tuned -- start with copy, not styling.

Can I add a fourth publication column?

Yes. Duplicate one of the three `divi/column` blocks and change the column structure on the row to `1_4,1_4,1_4,1_4`. You will want to reduce the column gap from 40px to around 24--28px at that width to keep the grid from feeling cramped on desktop.

The fonts (Space Mono, Archivo, Public Sans) -- are these included?

They are Google Fonts loaded through Divi 5's built-in font picker. No external font plugin is needed. If you prefer different fonts, swap them directly in each module's typography settings -- the size and weight values will carry over.

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.