Home » WordPress Plugins » Masonry Gallery & Posts For Divi » How To Create “Masonry Blog Gallery” In Divi

How To Create "Masonry Blog Gallery" In Divi

Masonry gallery makes for beautiful page aesthetics. It makes your webpage look professional

Create a blog masonry image gallery for any custom post type

With the Masonry Posts Divi Module,

Get blog/custom post listing using custom query filters.
Complete control over the content. Show/hide
- Image
- Title
- Description
- Meta fields like author, date, categories and comment count
Setup pagination if needed
Set responsive masonry columns for all types of devices.
Control space between columns
Create an image overlay on hover.
Styling options for all element of the masonry grid

We’ll use the Project post type available in theme Divi for this howto.

Pre-requisites

Tools

Computer

Total Duration : 9 minutes

Start your FREE trial. No credit cards required.

Step 1 - Setup Project Data (Optional)

To setup project data
- Download image attachment import file - masonry-project-entries.xml
- Install & activate the WordPress Importer plugin.
- To import the project entries,
  - Log into WordPress Admin
  - Goto Tools > Import
  - Click on Run Importer
  - Select the masonry-project-entries file for upload
  - Click Upload file and import button
  - Assign Author for the imported images
  - Select the Download and import file attachments checkbox
  - Click Submit button
  - In sometime the importer will download and setup the project entries
  - Visit WordPress Admin > Projects > All Projects and confirm if the project entries are setup

Start your FREE trial. No credit cards required.

Step 2 - Insert "Masonry Posts" Divi Module

Masonry Posts module is available for regular and full-width section
- Edit a page in divi's visual builder.
- Within a divi row click on the plus icon for Add New Module
- Search for Masonry Posts, click and add the divi module.

Start your FREE trial. No credit cards required.

Step 3 - Create Project's Masonry Blog Gallery

To create a blog listing masonry gallery using the Masonry Postsdivi module
- Select blog items for the masonry gallery
  - Click on Content tab
  - Select the Post Filter accordion toggle and open it
    - Post Type - A drop-down of available post types on your website.
    - Post Status - A multi-select field for available post statuses on your website
    - Order By - Set the sort criteria type.
      
      No Order - Don't use any sorting criteria
      
      Post ID - Sort by the ID of blog item
      
      Author - Sort by blog item author name
      
      Title - Sort by blog item title
      
      Slug - Sort by blog item slug
      
      Date - Sort by blog item date
      
      Last Modified Date - Sort by the last modified date
      
      Random - Sort randomly
      
      Menu Order - Sort by the "Order" values in the blog's Attributes section. It's found on the edit page of the blog item
      
      ID Order in "post__in" - Sort by order of the ID's entered in the Include Posts By IDs field.
    - Order Direction - Set the direction of the sort. Options are
      
      Ascending Sort in ascending order. For example A to Z
      
      Descending Sort in descending order. For example Z to A
    - Filter By Categories | Tags - Drop-down field for filtering blog items by
      
      None - No filtering by categories / tags.
      
      Categories - Filter By Categories
      
      A multi-select Categories field becomes visible. Select one or more categories
      
      Tags - Filter By Tags
      
      A multi-select Tags field becomes visible. Select one or more tags
    - Include Posts By IDs - Create a masonry gallery by adding comma-separated blog item IDs.
      
      This option super-seeds all other options in custom filter
      
      Set Order By drop-down field to ID Order in "post__in" when using this. It sorts blog items in the order of the entered image IDs
    - Exclude Posts By IDs - To exclude blog items from the custom filter add comma-separated image IDs.
    - Posts Per Page - Set the number of blog items to fetch by query/page. Set -1 to fetch all blog items
- Setup content
  - Click on Content tab
  - Select the Content accordion toggle and open it
    - "No Posts" Error Heading - Set the title message to show on no blog items.
    - "No Posts" Error Body - Set the body message to show on no blog items.
    - Show Image - A ON/OFF toggle to show/hide blog item featured image
    - Show Description- A drop-down field for description. Options are
      
      None - Don't show description
      
      Excerpt - Use the blog item excerpt
      
      Post Content - Use the blog item post content
    - Description Character Count - Set the character count limit for the masonry item description
    - Description Suffix - Add a suffix to description. A ellipse ... is sometimes used.
    - Show Meta Fields - Toggle ON/OFF field to show/hide meta fields. When set to ON
      
      Show Author - Show/hide author of the blog item
      
      Show Date - Show/hide date of the blog item creation
      
      Date Format - Set the format of the date
      
      Show Categories - Show/hide the categories of the blog item
      
      Show Comment Count - Show/hide the count of the comments of the blog item
      
      Show "Read More" Button - Show/hide button for the blog item
      
      Open URL In New Window - Set ON to open the URL in the new window.
      
      Show Pagination - Set ON to enable pagination.
- Masonry Settings
  - Here you will set the responsive number of columns and their spacing.
  - Click on Content tab
  - Select the Masonry Settings accordion toggle and open it
  - Columns - Responsive field to set the number of columns for desktop, tablet and phone devices
  - Space Between Items Set the space between each grid item. We apply margin right and bottom to get item.
- Masonry Styling
  - Background - To set the background
    - Click on Content tab
    - Select the Background accordion toggle and open it
    - Set color, gradient, image or video background
  - Grid Item - Represents styles for a grid item. You can style
    - Click on Design tab
    - Select the Grid Item accordion toggle and open it
      
      Background
      
      Border
      
      Border Corner (radius)
      
      Box Shadow
  - Grid Item : Hover Overlay - Represents the overlay on grid item mouse over. Options are
    - Click on Design tab
    - Select the Grid Item : Hover Overlay accordion toggle and open it
      
      Show Grid Item Overlay On Hover - An ON/OFF toggle to show / hide over on item mouse over. When set to ON, set
      
      Background
      
      Set icon, its size and color
  - Title - Represents the styles for the title when shown.
    - Click on Design tab
    - Select the Title accordion toggle and open it. Style
      
      Margin & Padding
      
      Set heading level
      
      Set fonts, style, alignment, color, size, letter spacing, line height and shadow
  - Meta Text - Represents author, date, comments count and categories text. Set styles for
    - Margin & Padding
    - Set fonts, style, alignment, color, size, letter spacing, line height and shadow
  - Description - Represents the styles for the description when shown.
    - Click on Design tab
    - Select the Description accordion toggle and open it. Style
      
      Margin & Padding
      
      Set fonts, style, alignment, color, size, letter spacing, line height and shadow
  - Button - Represents the button on the grid item
    - Enable Use Custom Styles For Button if you want to setup custom button styles.
      
      Set button text styles
      
      Button background
      
      Button border
      
      Button icon
      
      Margin and padding
    - Button Alignment - Set the alignment of the button.
  - Pagination Link Text - Represent the pagination links. Set style for
    - Set fonts, style, alignment, color, size, letter spacing, line height and shadow
  - "No Posts" Error Heading - Represent the error title when there are no posts. Set style for
    - Set fonts, style, alignment, color, size, letter spacing, line height and shadow
  - "No Posts" Error Heading - Represent the error message when there are no posts. Set style for
    - Set fonts, style, alignment, color, size, letter spacing, line height and shadow
  - Spacing Set margin and padding for the masonry grid
    - Click on Design tab
    - Select the Spacing accordion toggle
  - Border Set border for the masonry grid
    - Click on Design tab
    - Select the Border accordion toggle
  - Box Shadow Set box shadow for the masonry grid
    - Click on Design tab
    - Select the Box Shadow accordion toggle
  - Custom CSS Set custom css for elements of the masonry grid
    - Click on Advanced tab
    - Select the Custom CSS accordion toggle
    - Lot of grid elements available for setting custom css

Start your FREE trial. No credit cards required.

Step 4 - Demo Page Layouts

Below are demo page layouts for the Masonry Posts divi module. Import them to your WordPress page to see them in action.

To Import A Demo Page Layout
- Create/edit a page in the divi visual builder.
- To show the page settings toolbar at the bottom, click on the ellipsis icon.
- Click on the portability icon.
- A modal window to export/import the page shows up
- Click on Import tab.
- Click on NO FILE SELECTED
- Check Replace existing content if you wipe off existing content after import.
- Select the divi builder layout json file from your file manager.
- Click on Import Divi Builder Layout button to start the import.
- Once imported, page reloads with the imported layout.
- Save the page.
Please find the demo divi builder layouts below.

Download - Masonry Blogs Layout
Masonry blog layout for `Project` Post Type

Start your FREE trial. No credit cards required.