Post Masonry — DiviEpic

The Post Masonry module in Divi Blog Pro allows you to display your blog posts in a clean, modern masonry grid layout. This style automatically arranges posts of varying heights into an attractive, staggered format, helping you showcase content in a visually engaging and space-efficient way. It is ideal for creative blogs, magazine-style layouts, and websites that want to highlight visual diversity in post previews.

Content

This tab allows you to control which posts appear in the masonry grid. You can refine the displayed content by selecting post types, categories, sorting methods, and specific inclusion or exclusion rules, ensuring the grid shows exactly the content you want.

Query

This toggle reveals all post-filtering and sorting options, allowing you to control exactly which posts are displayed in the masonry grid.

Post Type – Choose the type of content to display: Posts, Pages, or Projects, depending on your site’s structure and needs.
Included Categories – Select one or more categories to filter the posts shown in the masonry layout.
Order By – Sort the content based on Author, Date, ID, Parent, Random, or Title for refined content organization.
Sorted By – Select Ascending or Descending order to determine the direction of the sorting.
Post Limit – Set how many posts should be displayed in the masonry grid to maintain a curated appearance.
Date Format – Customize how post dates are displayed to match your website’s style.
Post Offset Number – Skip a number of posts before the module starts displaying content, useful when creating unique arrangements.
Include posts by IDs – Enter specific post IDs to force only selected posts into the grid.
Exclude posts by IDs – List post IDs to prevent certain posts from appearing even if they match other query settings.

Layout Settings

These settings allow you to control how the masonry grid is structured and how each individual post item appears.

Template Layout – Choose between Layout 1 and Layout 2 to define the appearance of each post within the grid.
Number of Columns – Set how many columns appear in the masonry grid. This is a responsive setting, allowing adjustments for desktop, tablet, and mobile.
Column Gap Left/Right – Adjust the horizontal spacing between columns. This is also a responsive setting for full layout control across breakpoints.
Column Gap Top/Bottom – Define the vertical spacing between rows for a balanced and clean arrangement. This is also a responsive setting for full layout control across breakpoints.
Show Featured Image – Toggle the visibility of the featured image for each post.
Featured Image Size – Select the size of the featured images to ensure they fit well within the design.
Show Excerpt – Enable or disable post excerpts to provide visitors with a summary of each post.
Show Categories – Display category labels to help users identify the post’s topic or grouping.
Show Meta – Enable this to show post metadata such as author, date, or comments.
Show Author – Toggle author name visibility for each post.
Show Meta Icons – Display icons along with metadata elements for a more visual presentation.
Show Author Photo – Enable this to display the author’s profile image next to the post metadata.
Show Readmore – Add a Read More link to encourage users to visit the full post.
Pagination – Choose how additional posts are loaded: None, Numbers, Previous/Next, or Loadmore.

Design

This tab focuses on styling options, helping you fine-tune the aesthetic of the masonry grid to match your brand or theme.

Post Grid Style

Customize the appearance of the overall grid layout, including spacing and alignment.

Thumbnail Style

Adjust the style of featured images, including borders, sizing, and corner radius.

Content Box

Control the background, padding, border, and shadow of the content box around each post.

Post Title

Style the title text, adjusting typography, color, size, and spacing for maximum readability and impact.

Post Excerpt

Customize excerpt typography, spacing, and color for a clean, professional look.

Pagination

Customize pagination appearance for number-based, previous/next, or loadmore options.

Style the Read More link or button, adjusting its font, c