How To Create "Masonry Blog Gallery" In Divi

A masonry blog gallery presents your posts and portfolio items in an elegant, responsive layout. By eliminating rigid row boundaries, your content flows naturally to give your website a clean, modern aesthetic.

Create a masonry grid for any WordPress custom post type (such as Blog Posts, Projects, or Products):

Filter post items using flexible category, tag, or custom selection rules.
Customize content visibility: show or hide featured images, titles, excerpts, authors, publication dates, categories, and comment counts.
Enable pagination for multi-page post listings.
Set responsive column counts tailored for desktop, tablet, and mobile screens.
Control spacing between grid cards.
Add interactive hover overlays and custom styling to every element in the grid.

We will use Divi’s built-in Project post type for this step-by-step guide.

Pre-Requisites

Setup Sample Project Data (Optional)

This step is optional and helpful if you want to quickly import sample project items onto a test website:
- Download the sample project import file: masonry-project-entries.xml.
- Install and activate the official WordPress Importer plugin.
- To import the sample entries:
  - Log into your WordPress Admin Dashboard.
  - Go to Tools > Import.
  - Click Run Importer under WordPress.
  - Choose the masonry-project-entries.xml file.
  - Click Upload file and import.
  - Assign an Author for the imported entries.
  - Check the Download and import file attachments box.
  - Click Submit.
  - Once complete, verify your project items under WordPress Admin > Projects > All Projects.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Insert the “Masonry Posts” Divi Module

The Masonry Posts module works inside both Regular and Fullwidth Divi sections:
- Open your page in the Divi Visual Builder.
- Inside any Divi row, click the Plus (+) icon to add a new module.
- Search for Masonry Posts and select it to add it to your layout.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Create a Masonry Blog or Portfolio Gallery

Customize your post gallery settings inside the Masonry Posts module:
- Select Posts & Filtering Rules:
  - Go to the Content tab and open Post Filter:
    - Post Type: Select the target post type (e.g. Posts, Projects, Products).
    - Post Status: Choose post statuses to display (e.g. Published).
    - Order By: Choose how posts are sorted:
      - No Order: Displays items without specific sorting.
      - Post ID: Sorts by numerical post ID.
      - Author: Sorts alphabetically by author name.
      - Title: Sorts alphabetically by post title.
      - Slug: Sorts by post URL slug.
      - Date: Sorts by publication date.
      - Last Modified Date: Sorts by recent update date.
      - Random: Shuffles posts randomly on each page view.
      - Menu Order: Sorts based on the Order attribute specified on post edit pages.
      - Preserve ID Order: Matches the exact sequence entered in Include Posts By IDs.
    - Order Direction: Choose Ascending (oldest/A-Z first) or Descending (newest/Z-A first).
    - Filter By Categories | Tags: Choose filtering criteria:
      - None: Show posts across all categories and tags.
      - Categories: Filter by specific categories (select one or multiple).
      - Tags: Filter by specific tags (select one or multiple).
    - Include Posts By IDs: Enter comma-separated post IDs to display specific items. This setting takes priority over category and tag filters.
    - Exclude Posts By IDs: Enter comma-separated post IDs to hide specific items.
    - Posts Per Page: Set the maximum number of posts to fetch per page (enter -1 to display all posts).
- Configure Content Display:
  - Go to Content > Content:
    - “No Posts” Error Heading & Body: Custom text to display if no matching posts are found.
    - Show Image: Toggle ON or OFF to display featured post images.
    - Show Description: Choose to display None, Excerpt, or full Post Content.
    - Description Character Count: Limit excerpt text length.
    - Description Suffix: Add a trailing indicator (e.g. ...) to truncated excerpts.
    - Show Meta Fields: Toggle ON to customize meta elements:
      - Show Author: Display post author.
      - Show Date: Display publication date (customizable date format).
      - Show Categories: Display assigned categories.
      - Show Comment Count: Display comment totals.
      - Show “Read More” Button: Add a CTA button linking to the full post.
      - Open URL In New Window: Toggle ON to open post links in a new tab.
      - Show Pagination: Toggle ON to display page navigation numbers.
- Masonry Layout Settings:
  - Go to Content > Masonry Settings:
    - Columns: Set responsive column counts for Desktop, Tablet, and Mobile devices.
    - Space Between Items: Adjust gutter spacing between post cards.
- Masonry Styling Options:
  - Background:
    - Under Content > Background, set solid colors, gradients, images, or video backgrounds.
  - Grid Item Styling:
    - Under Design > Grid Item, customize background colors, borders, rounded corners, and drop shadows for post cards.
  - Hover Overlay Styling:
    - Under Design > Grid Item : Hover Overlay, toggle ON to show hover overlay effects, custom background colors, and hover icons.
  - Typography & Meta Text:
    - Under Design > Title, Meta Text, and Description, adjust font families, sizes, colors, alignments, line heights, and letter spacing.
  - Button & Pagination Styling:
    - Under Design > Button, customize button text, background, border, and icon styles. Adjust pagination link formatting under Pagination Link Text.
- Custom CSS:
  - Under Advanced > Custom CSS, apply custom CSS rules directly to specific post grid elements.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Import Pre-Built Demo Layouts

Import pre-built Divi layout JSON files to quickly load complete masonry blog layouts:
- Edit your page in the Divi Visual Builder.
- Click the Ellipsis (…) icon at the bottom of the screen to open the toolbar.
- Click the Portability (Import/Export) icon.
- Select the Import tab.
- Click Choose File and select your downloaded .json layout file.
- Optionally check Replace existing content if you wish to overwrite existing page modules.
- Click Import Divi Builder Layout.
- Once the page reloads, click Save.
Download pre-built layout JSON file:

Download - Masonry Blogs Layout

Pre-configured masonry blog layout for the Project post type.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial