Testimonials are rarely the same length. In a normal grid every card in a row stretches to match the longest one, which leaves white space under the short quotes.
The masonry layout drops each card into whichever column is currently shortest, so cards keep their natural height and the columns stay level.
To check the complete feature overview documentation of The Plus Addons for Elementor Testimonial widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: the Testimonial widget is in the free plugin. Style-3 and the extras listed below need The Plus Addons for Elementor Pro.
- Widget to enable: Testimonial, switched on under The Plus Addons > Widgets. Its card is badged FREEMIUM.
- If you use the Post Type source: the testimonial custom post type has to be switched on first, under The Plus Addons > Extra Options > Listing > Testimonial. Until then there are no testimonials to list.
Build the masonry grid
- Edit the page with Elementor and drag the Testimonial widget in.
- In Layout (Content Layout in the free plugin) pick a Style.
- Set Layout to Masonry – the middle of the three pictures.
- Set Select Source to Post Type or Repeater.
Each card now keeps its own height and the next one starts right underneath it:
Set the columns
Masonry uses the same Columns Manage section as the grid. Read the labels, which say how many cards fit across.
| Setting | What it does | Default |
|---|---|---|
| Desktop Column | Cards across on desktop. | Column 4 |
| Tablet Column | Cards across on tablet. | Column 3 |
| Mobile Column | Cards across on mobile. | Column 2 |
| Columns Gap/Space Between | Spacing around each card, set as padding inside its cell. | 15 px on all sides |
Shortening long quotes
If you want the cards closer in size without forcing a fixed height, set Select Source to Repeater and open Extra Option. Excerpt Limit cuts the testimonial text after a number of words or letters and adds an expand link.
On the masonry layout the Read More and Read Less text fields stay hidden, so that expand link is rendered without any label. Until that is fixed, use the Carousel layout when you need the link to read something.
How It Behaves
- Masonry and Grid share the same column settings; only the packing differs.
- Masonry works in the free plugin for Style-1, Style-2 and Style-4. Only Style-3 needs Pro.
- The expand link added by Excerpt Limit works: clicking it reveals the rest of the quote and the layout re-packs itself.
- The cards re-pack whenever the browser is resized.
Limitations
- The expand link has no label on this layout. Excerpt Limit works, but the Read More / Read Less fields are only shown when Content Limit By is set to Text Limit, and Content Limit By is only offered for the Carousel layout – so on masonry the link is rendered empty.
- Content Height(px), Title Height(px) and Content Scroll are not available on masonry. They apply to Grid, and to Carousel when Content Limit By is set to Height.
- Excerpt Limit needs the Repeater source. With the Post Type source the full text is always shown.
- The column dropdown labels are inverted against the stored values – read the label.
Troubleshooting
The cards line up in even rows like a normal grid
Either the Layout is still set to Grid, or every testimonial happens to be the same length. Masonry only looks different when the cards differ in height.
I set Excerpt Limit but the link is blank
That is the masonry limitation above. Switch the Layout to Carousel and set Content Limit By to Text Limit, which makes the Read More and Read Less fields available.
Excerpt Limit does nothing
Select Source is set to Post Type. Excerpt Limit only applies to the Repeater source.
There is no Columns Manage section
The Layout is set to Carousel, where Columns Manage is hidden.
