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

  1. A WordPress website
  2. Divi Theme by Elegant Themes
  3. Masonry Gallery & Post For Divi plugin

Tools

  1. Computer

Total Duration : 9 minutes

FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 1 - Setup Project Data (Optional)

  1. 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
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 2 - Insert "Masonry Posts" Divi Module

  1. 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.
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 3 - Create Project's Masonry Blog Gallery

  1. 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
FREE DOWNLOAD

Start your FREE trial. No credit cards required.

Step 4 - Demo Page Layouts

  1. 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.
  2. Please find the demo divi builder layouts below.
    Download - Masonry Blogs Layout

    Masonry blog layout for `Project` Post Type

FREE DOWNLOAD

Start your FREE trial. No credit cards required.