Do you want a Pinterest-style blog page, where cards keep their own height and stack without gaps? That is a masonry layout.
The Blog/Post Listing widget in The Plus Addons for Elementor includes it in the free version.
To check the complete feature overview documentation of The Plus Addons for Elementor Blog Listing 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: Free — available in both The Plus Addons for Elementor (Free) and Pro.
- Widget to enable: Blog/Post Listing, switched on under ThePlus Settings > Widgets.
Step 1: Add the widget and choose Masonry
Drag the Blog/Post Listing widget onto the page. In Content > Layout, set Layout to Masonry.
Step 2: Set the columns
Open Content > Columns Manage. Masonry uses the same column settings as Grid: Column 4 on desktop, Column 3 on tablet and Column 2 on mobile by default. Three columns usually shows the staggered effect best.
Grid or Masonry?
| Grid | Masonry | |
|---|---|---|
| Card heights | Rows line up | Each card keeps its own height |
| Best for | Uniform posts with similar excerpts | Posts with mixed image shapes and lengths |
| Edition | Free | Free |
Settings Reference
| Setting | Where | Default |
|---|---|---|
| Layout | Content > Layout | Grid |
| Desktop Column | Content > Columns Manage | Column 4 |
| Tablet Column | Content > Columns Manage | Column 3 |
| Mobile Column | Content > Columns Manage | Column 2 |
Limitations
- Reading order runs across, not down. Posts are placed left to right, so the newest posts are across the top row rather than down the first column.
- Little effect with same-size images. If every featured image has the same proportions and every excerpt the same length, masonry looks the same as grid.
Troubleshooting
Masonry looks exactly like Grid
Your cards are already the same height. Masonry only shows a difference when image proportions or text lengths vary.
