Bento Grid
Modern, mixed-size testimonial cards in a stylish bento grid.
The Bento Grid arranges testimonials in a mixed-size, magazine-style layout inspired by Japanese bento boxes — some cards larger, some smaller — so your reviews section looks designed rather than stamped out of a template.
When to use it
- A visually interesting testimonials section that avoids a uniform grid.
- Highlighting a few standout reviews alongside shorter ones.
- Landing pages where design polish matters.
How to add it
- Click the + block inserter and search for Bento Grid.
- Open Query Builder to choose which testimonials appear.
- Adjust columns and gaps — the bento sizing is applied automatically.
Layouts
The Bento Grid's Layouts panel is the same single settings list as the Grid:
| Control | What it does |
|---|---|
| Select Card Style | One of six card designs. Bento pre-selects Card Design 4 (a left-aligned design) that suits the mixed sizes. |
| Columns | Columns per device (1–20). Default 3 / 2 / 1 — three desktop columns give the bento pattern the most room. |
| Column Gap / Row Gap | Space between cards and rows, 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. |
There's no separate "pattern" control — the mixed-size arrangement is applied automatically. Out of the box the block sets a display limit of 7, tuned for the bento pattern; adjust it in the Query Builder.
Query Builder
This panel decides which testimonials the bento 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. 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
- Keep testimonial text Limited so mixed card sizes stay balanced.
- 3 columns on desktop gives the bento pattern the most room to breathe.
- Combine with a Review Summary header for a complete "reviews" section.