Skip to content

Divi Post Masonry Pro

Divi Post Masonry Pro displays your WordPress posts in a modern, Pinterest-style masonry layout. Cards keep their natural height and flow into a staggered arrangement automatically — ideal for creative blogs, photography sites, and magazine layouts where post images and excerpts vary in length.

Key Features

  • True masonry auto-arrange — pure CSS columns, no heavy JavaScript, so it stays fast.
  • 5 template layouts for the card design (default: Layout 1).
  • Responsive columns and gaps — set different values for desktop, tablet, and phone.
  • Powerful query controls — post types, categories, custom taxonomies, include/exclude by ID, offset, and ordering.
  • Pagination built in — numbered pages or Previous/Next navigation.
  • No-featured-image fallback — placeholder icon, custom image, or hide the image area.

Adding the Module

  1. Edit a page with the Divi Visual Builder.
  2. Add a new module and search for Post Masonry Pro.
  3. Your latest posts appear in the masonry grid — open the module settings to configure the query, layout, and design.

Content Settings

Query

The Query toggle controls which posts appear in the masonry grid.

  1. Post Type – Choose the content type to display: Posts, Pages, or a public custom post type (default: Post).
  2. Included Categories – Show only posts from the selected categories.
  3. Custom Taxonomy – Filter by a custom taxonomy instead of categories.
  4. Taxonomy Terms – The terms (IDs or slugs) to match within the chosen taxonomy.
  5. Order By – Sort posts by Date, Title, ID, Author, Random, or Parent (default: Date).
  6. Sort Order – Ascending or Descending direction.
  7. Post Limit – How many posts to show per page, from 1 to 50 (default: 10).
  8. Date Format – Customize the displayed post date using standard WordPress date formats.
  9. Post Offset Number – Skip a number of posts before the grid starts (default: 0).
  10. Include Posts by IDs – Display only the posts whose IDs you list.
  11. Exclude Posts by IDs – Hide specific posts even when they match the query.

Layout Settings

The Layout Settings toggle controls the masonry structure and which elements each post card shows.

  1. Template Layout – Choose from 5 card layouts, Layout 1 to Layout 5 (default: Layout 1).
  2. Number of Columns – Masonry columns (default: 3). Responsive — set separate values per device.
  3. Column Gap Left/Right – Horizontal spacing between columns (default: 20px, responsive).
  4. Column Gap Top/Bottom – Vertical spacing between cards (default: 20px, responsive).
  5. Equal Height – Force uniform card heights (default: Off — keeping it off preserves the staggered masonry look).
  6. Show Image – Toggle the featured image (default: On).
  7. Image Size – Thumbnail, Medium, Large, or Full.
  8. Show Title – Toggle the post title (default: On).
  9. Title Heading Level – Render titles as H1–H6 for correct heading hierarchy.
  10. Show Excerpt – Toggle the post summary (default: On).
  11. Excerpt Length – Number of characters shown in the excerpt (default: 150).
  12. Show Categories – Display the post's category labels.
  13. Show Single Category – Show only the first category.
  14. Show Author – Display the author name.
  15. Show Date – Display the publish date.
  16. Show Avatar – Display the author's Gravatar photo.
  17. Show Read More – Display a Read More button on each card.
  18. Button Text – The Read More label (default: "Read More").

Design Settings

The Design tab styles every part of the masonry grid with Divi's full typography, color, spacing, border, and shadow controls.

  • Masonry Style – Overall grid appearance, alignment, and spacing.
  • Thumbnail Style – Image fit, height, hover effect, and the When No Featured Image fallback (placeholder icon, custom image, or hide).
  • Content Box – Background, padding, border, and shadow of the card body.
  • Post Title – Typography, color, and hover styling for titles.
  • Post Excerpt – Typography and spacing for the summary text.
  • Category – Style the category labels.
  • Author and Date – Typography and color for the meta line.
  • Readmore – Full button styling for the Read More link.
  • Pagination – Pagination Type (None, Numbers, or Previous/Next), alignment, and colors.

Tips & Notes

Responsive columns
Number of Columns and both Column Gap settings are responsive. Use the device icons in the Visual Builder to set different values per device — for example 3 / 2 / 1 columns.

Masonry flow
Masonry uses CSS columns, so posts flow down each column top-to-bottom before moving to the next column. If you need a strict left-to-right reading order with aligned rows, use the Divi Post Grid Pro module instead.

Author avatar
Avatars come from Gravatar. The author's WordPress email must exactly match their account at gravatar.com, otherwise the photo will not appear.

FAQ

What is the difference between Post Masonry and Post Grid?

Post Grid aligns cards in strict rows (optionally equal height), while Post Masonry lets each card keep its natural height and stacks them into a staggered, space-efficient layout. Use masonry when your featured images or excerpts vary a lot in size.

How many layouts does Post Masonry Pro include?

Five template layouts (Layout 1–5), selected under Layout Settings → Template Layout. Each can be styled further in the Design tab.

How do I add pagination to the masonry grid?

Set Design → Pagination → Pagination Type to Numbers or Previous/Next. Posts per page follow Query → Post Limit.

Why are my posts not staggered?

Check that Layout Settings → Equal Height is Off (the default). When Equal Height is On, all cards are forced to the same height and the layout looks like a regular grid.

Loading...