Reviews are rarely the same length. In the Grid layout every row is as tall as its tallest card, so short reviews leave gaps underneath them.
Masonry packs the cards by height instead, so each column fills as it goes and the wall ends up tighter.
For the full settings tour of the Social Reviews widget, see Social Reviews Widget Settings Overview.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Social Reviews ships only in The Plus Addons for Elementor Pro. The widget does not exist in the free plugin at all: no widget file, no CSS and no JavaScript, so there is nothing to fall back to.
- Prerequisite: Elementor (free) installed and active.
- Widget to enable: go to The Plus Addons > Widgets, search for Social Reviews and turn its toggle on.
- No account needed: the Manual source needs no token, no key and no login. It is the one source you can use straight away.
Switch to Masonry
- Edit the page with Elementor and drag the Social Reviews widget onto it.
- In Content > Content, leave Type on Reviews and choose a Style.
- Set Layout to Masonry.
- Add your reviews under Social Reviews, from whichever sources you want.
- Set the columns under Content > Columns Manage — the same section the Grid layout uses.
Columns Manage
| Setting | Default label | What it means |
|---|---|---|
| Desktop Column | Column 4 | four cards across |
| Tablet Column | Column 3 | three across |
| Mobile Column | Column 2 | two across |
| Columns Gap/Space Between | 15 px on every side | px, % or em |
As in the Grid layout, choose by the label you can see. Column 4 gives four columns even though the stored value is 3.
How It Behaves
- Masonry and Grid are the same markup with a different packing rule. The widget renders the identical card structure and swaps one wrapper class, so everything you set for one layout carries over to the other.
- Cards no longer line up in rows. Each column fills independently, so a short review is followed immediately by the next one instead of by a gap.
- Masonry suits mixed sources. Facebook, Google and manual reviews rarely produce cards of the same height, and this is the layout that copes with that.
Limitations
- The column dropdown labels are inverted against the value they store. Picking Column 4 gives you four across; the widget stores
3. Go by the label you can see, not by any number you may have seen in exported data. - Three sections disappear in the Carousel layout. Columns Manage, Filter Option and Load More/Lazy Load are all skipped when Layout is Carousel. The carousel has its own column settings under Style > Carousel.
- Review text is truncated out of the box. Text Limit is on by default with Limit Count at 100 characters, so longer reviews end in …Show More before you change anything. Turn Text Limit off under Content > Extra Options to show reviews in full.
- Load More and Lazy Load do not currently load anything. On a published page with six manual reviews, Maximum Posts Display at 3 and More Post Loading set to Load More, clicking the button left the count at three, changed the button to Loading… permanently and raised a JavaScript error. Lazy Load likewise never went past the initial count. No credential was involved, so this is not an API problem. Until it is fixed, show every review you want visible.
- Masonry needs the cards to differ in height to look different from Grid. If Text Limit is trimming every review to the same length, the two layouts will look almost identical.
Not verified
So you know exactly what has and has not been checked:
- A wall of real Facebook or Google reviews. This page was checked without ever entering a real access token, API key or place id, so what the finished Facebook or Google feed looks like once connected was not observed for this revision. Everything below that does not need a credential was checked on a published page.
- The Style tab. Only the three content Style presets were rendered; no colour, typography or per-source styling control was exercised.
- The tablet and mobile column settings individually.
Troubleshooting
Masonry looks the same as Grid
Your cards are all the same height. Text Limit is on by default at 100 characters, which evens them out. Raise Limit Count or turn it off under Content > Extra Options and the difference will show.
The cards overlap or stack strangely
Masonry positions cards with JavaScript after the page loads. Check the browser console for an error from another plugin or from a lazy-loading script, and re-check on the published page rather than in the editor.
Columns Manage has disappeared
Layout is on Carousel, not Masonry.
