How To Create "Masonry Image Gallery" in Divi

A masonry image gallery creates a dynamic, visually engaging layout for your website. By arranging images seamlessly without rigid row heights, it gives your site a polished, professional look.

Create a masonry gallery using images from your WordPress Media library:

Set responsive column counts tailored for desktop, tablet, and mobile screens.
Control spacing between gallery items.
Display elegant hover overlays over gallery images.
Launch an interactive popover lightbox gallery when an image is clicked.

Build a clean, responsive masonry gallery with variable image heights and no awkward vertical gaps between rows.

Pre-Requisites

Import Categorized Images into WordPress Media (Optional)

This step is optional and useful if you want to quickly import sample images onto a test website:
- Download the sample image attachment file: wp-attachments.xml.
- Install and activate the official WordPress Importer plugin.
- To import the images:
  - Log into your WordPress Admin Dashboard.
  - Go to Tools > Import.
  - Click Run Importer under WordPress.
  - Choose the wp-attachments.xml file.
  - Click Upload file and import.
  - Select an Author for the imported media files.
  - Check the Download and import file attachments box.
  - Click Submit.
  - Once complete, verify your images under Media > Library and categories under Media > Categories.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Image Category Management

The Masonry Gallery & Posts For Divi plugin allows you to organize your Media Library images using categories.
You can filter gallery displays by selecting one or multiple media categories.
To assign a category to an image:
- Go to WordPress Admin > Media > Library.
- In Grid View:
  - Click an image thumbnail to open the Attachment Details window.
  - Click the Edit more details link.
- In List View:
  - Hover over an image row and click Edit.
- In the Categories meta box on the right sidebar:
  - Type a category name in the text box and click Add to create a new category.
  - Click the x icon next to any existing category name to remove it.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Insert the “Masonry Image Gallery” Divi Module

The Masonry Image Gallery 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 Image Gallery and select it to add it to your layout.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Configure Your Masonry Image Gallery

Customize your gallery settings inside the Masonry Image Gallery module:
- Select Gallery Images:
  - Go to the Content tab.
  - Open the Image Selection section.
  - Under Image Selection Type, choose your preferred method:
    - Select / Upload Images: Manually choose or upload images from your media library.
      - Click the Add Gallery Images (+) icon to choose images.
      - Drag and drop thumbnails to reorder your gallery items.
    - Custom Filter: Automatically fetch images from your media library based on rules:
      - Filter By Category: Toggle ON to filter images by media categories, then check your desired categories.
      - Include Image Items (Comma-separated IDs): Enter specific image IDs to display. This setting takes priority over category filters. Set Sort Images By to Preserve Image ID order to display them in your exact specified sequence.
      - Exclude Image Items (Comma-separated IDs): Enter image IDs you want to hide from the gallery.
      - Images To Fetch: Set the maximum number of images to display (enter -1 to show all matching images).
      - Sort Images By: Choose your sorting order:
        
        No Order: Displays images without specific sorting.
        
        Order by Image ID: Sorts by media attachment ID.
        
        Order by Author: Sorts by image author.
        
        Order by Title: Sorts alphabetically by image title.
        
        Order by Slug: Sorts by image URL slug.
        
        Order by Date: Sorts by upload date.
        
        Order by Last Modified Date: Sorts by recent update date.
        
        Random Order: Shuffles images randomly on each page load.
        
        Custom Order (Page Attributes): Sorts based on the Order value assigned on the media attachment page.
        
        Attachment Order Attribute - Masonry Image Gallery And Posts
        
        Preserve Image ID order: Maintains the exact sequence listed in the Include Image Items field.
      - Sort Direction: Choose Ascending (A to Z / oldest first) or Descending (Z to A / newest first).
- Set Content Visibility:
  - Choose whether to display image titles and descriptions alongside your gallery items.
  - Go to the Content tab and open the Content section:
    - Show Title: Toggle ON or OFF to show or hide the image attachment title.
    - Show Description: Select description source:
      - None: Hide descriptions.
      - Image Caption: Display the caption assigned in the media library.
      - Image Description: Display the detailed description assigned in the media library.
      - Image Caption And Description - Masonry Image Gallery And Posts
- Masonry Layout Settings:
  - Define your responsive grid structure:
  - Go to the Content tab and open Masonry Settings:
    - Columns: Set the number of grid columns for Desktop, Tablet, and Mobile devices.
    - Space Between Items: Adjust the spacing (gutters) between gallery items.
- Masonry Styling Options:
  - Background:
    - Under Content > Background, choose a solid color, gradient, image, or video background for the gallery container.
  - Grid Item Styling:
    - Under Design > Grid Item, customize background colors, borders, corner radius, and drop shadows for individual items.
  - Hover Overlay Styling:
    - Under Design > Grid Item : Hover Overlay, toggle Show Grid Item Overlay On Hover ON to display overlay effects, custom background colors, hover icons, icon sizes, and colors.
  - Title & Description Typography:
    - Under Design > Title and Design > Description, adjust margins, padding, heading levels, font families, font sizes, text alignments, colors, line heights, and text shadows.
  - Lightbox Popover Styling:
    - Customize overlay background opacity, navigation arrow colors, close button styling, counter text, and item title formatting under the Design tab.
- Spacing, Borders & Box Shadows:
  - Adjust container margin, padding, border styles, and box shadows under the Design tab.
- Custom CSS:
  - Under Advanced > Custom CSS, apply custom CSS rules directly to specific gallery elements.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Import Pre-Built Demo Layouts

You can import pre-built Divi layout JSON files to instantly load complete masonry gallery designs onto your website:
- Edit your target page in the Divi Visual Builder.
- Click the Ellipsis (…) icon at the bottom of the screen to open the builder toolbar.
- Click the Portability (Import/Export) icon.
- Select the Import tab.
- Click Choose File and select your downloaded Divi Builder layout .json file.
- Optionally check Replace existing content if you want to overwrite current page content.
- Click Import Divi Builder Layout.
- Once the page reloads, click Save.
Download pre-built layout JSON files:

Download - Masonry Image Gallery Layout (Custom Filter)

Pre-built layout configured to fetch images automatically via category filters.

Download - Masonry Image Gallery Layout (Manual Selection)

Pre-built layout configured for manually selected media library images.
Note: This layout file does not import external image files into your site’s media library; you will select your own site’s images after loading the layout.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial