Masonry

A dynamic masonry layout for testimonials with varying content lengths.

The Masonry block flows testimonials into columns like a Pinterest board — each card takes only the height it needs, and shorter cards tuck up under taller ones. It's the best choice when your reviews vary a lot in length.

When to use it

• Testimonials that range from one line to several paragraphs.
• A dense, gap-free wall of reviews.
• Showing full-length feedback without truncation.

How to add it

1. Click the + block inserter and search for Masonry.
2. Open Query Builder to choose which testimonials appear.
3. Set your columns and gaps — cards flow to fill them automatically.

Layouts

The Masonry's Layouts panel is the same single settings list as the Grid:

Control	What it does
Select Card Style	One of six card designs.
Columns	How many columns the cards flow into, per device (1–20). Default 3 / 2 / 1.
Column Gap	Horizontal space between columns, default 24 / 16 / 12 px.
Row Gap	Vertical space between stacked cards, default 24 / 16 / 12 px.
Ajax Pagination	Load more testimonials a page at a time, without reloading the page — on by default, via the Ajax Pagination child block.
Review Summary / Live Frontend Filter / Ajax Testimonial Search	The grid-family add-ons; turning one on wraps the block in a Testimonial Group.

To show off varying heights, the testimonial text defaults to Full length (no truncation) for this block — you can change that in the Testimonial Content panel.

Query Builder

This panel decides which testimonials the wall shows. Pull the latest ones, one or more groups, a hand-picked set, or only high star ratings — then set the display limit and the order (or shuffle randomly). See the full breakdown in the Carousel reference.

Card Content

This panel controls the testimonial card itself: toggle and drag-to-reorder the parts on it (photo, title, text, rating, name and more), set the alignment and a hover effect, and style the card's background, border, shadow, corners and padding. See the full breakdown in the Carousel reference.

Testimonial Content

This panel shapes the title and the quote — heading tag, full or trimmed length with a Read More action (expand, popup or link), optional quote symbols, plus typography and colors for both. Remember the Masonry defaults to Full text length so cards can vary in height. See the full breakdown in the Carousel reference.

Star Rating

This panel styles the rating on each card: pick from 16 icon styles (stars, hearts, thumbs and more), set the size and spacing, and choose the filled and empty colors. See the full breakdown in the Carousel reference.

Reviewer Image

This panel controls the reviewer photo: resolution, aspect ratio and size, the fallback avatar for testimonials without a photo, retina loading, and click-to-play video testimonials. See the full breakdown in the Carousel reference.

Reviewer Details

This panel handles the who-said-it line — the name's heading tag, a verified badge, how company info, location and date are displayed, and typography for each part. See the full breakdown in the Carousel reference.

Social Media

Shown when the Social Profiles card part is on, this panel sizes and styles the reviewer's social icons — icon size, clickable area, gap and colors. See the full breakdown in the Carousel reference.

Motion Effects

This panel adds movement as the block scrolls into view — an entrance animation (fade, slide, zoom, bounce) and an optional scrolling effect, per device. See the full breakdown in the Carousel reference.

Advanced Settings

This panel covers the whole block: a background with padding and margin, per-device visibility (show or hide the block on desktops, tablets or mobile devices), and custom CSS class and ID fields for your own styling. See the full breakdown in the Carousel reference.

Tips

• Leave testimonial text at Full length to let masonry do its job.
• 3–4 columns on desktop keeps the wall dense without cards getting too narrow.
• If you'd rather have uniform cards, use the Grid block instead.