How to Create Masonry Gallery in Divi?

In Divi’s standard Gallery module, you’re limited to grid and slider layouts, making it challenging to create a masonry gallery without delving into CSS code.

That’s where our blog comes into play. Here, we’ll show you how to create masonry gallery in Divi and also show you how to style it.

Let’s get started!

Prerequisites

But before we move forward with the process, we need the updated Divi theme and a plugin for creating the Divi masonry gallery. 

We are going to use DiviFlash here. A powerful Divi plugin that enhances your website-building capabilities with its powerful Divi modules, extensions, and premade layouts. With its wide customization options, you can create the beautiful masonry gallery you want.

Here is the summary of the prerequisites –

• Install the latest Divi theme version from their website
• Install the updated version of the DiviFlash Plugin

Step One: Staring with Section, Row, & Module

Creating a Divi masonry gallery can be performed in two ways. One is starting from scratch by adding a new page. The other is adding it to your existing website or pages.

We are going to show you the scratch one.

Adding a Page

Adding a page in Divi is a simple one. Simply follow these steps –

• Go to the WordPress dashboard > Pages > Add New Page.
• Name your page and click on ‘Edit with The Divi Builder.’
• Select ‘Build From Scratch’ to continue.

Add New Section & Row

If you’re starting from scratch, clicking the ‘Build From Scratch’ option will take you to a section by default. But if you’re on an existing page, you need to add a section manually.

• Now to add a section, click the blue (+) icon and select the regular section to continue
• Similarly, add a row by clicking the green (+) button and selecting the single-column row

Note: Sections and rows have many customization options. We’re skipping these; explore them based on your preferences to enhance your design.

Add DiviFlash’s Module

Now we have to add our DiviFlash’s Advanced Gallery module to create masonry gallery in Divi. 

To do this, click the gray (+) icon, search for ‘Advanced Gallery,’ and select the module.

Step Two: Create a Gallery Item

After inserting the module, we have to add a new gallery item (AKA child item) to create our gallery. Click the grey (+) icon named ‘Add New Item’ to continue.

Then we will add the title and images for this new item to turn it into a gallery.

Add Title & Gallery Images

Here, we are going to create a food gallery. So, our food items will be pizza, burgers, snacks, and more. Among these food items, we will add pizza first.

To do this, we will add the title and then the gallery images. 

Simply go to the Content > Gallery, add the ‘Pizza’ title, and then add pizza images

Here’s a small work to do – when we are going to upload each pizza image, we will add ‘Caption’ and ‘Description’ in every image. This is because we want to show the name and price of them.

After adding a couple of images the same way, it will look like this –

Note: In Visual Builder, we can’t see now the caption and description of the images. We will enable the setting in the gallery design step to make it visible. You can skip this adding caption-description process if you don’t want to.

Step Three: Add More Items in the Gallery

Now simply follow the same process as step two to add more items in the gallery. 

For example – our rest items are burgers and snacks. We will add them here. As well as make sure you have added the caption and description in each image according to step two.

Step Four: Design the Masonry Gallery Appearance

We’ve added our content to create a masonry gallery in Divi. Now, let’s design it globally.

Here in global customization settings, we have three options: the Content tab, Design tab, and Advanced tab.

First, we’ll make some adjustments to the Content tab. Then, we will go to the Design tab. 

However, the Advanced tab is the same as Divi default and needs coding skills, so we won’t cover it. But you are open to exploring customizations on these options, as you have complete authority over the design.

Add Filter Button & Light Box (Content tab)

In the content tab, we will have some tweaks in both ‘Gallery Settings’ and ‘Hover Settings’.  

The ‘Gallery Settings’ can be used to change the image size, show image numbers in a row, image spaces, and more. It includes five customizable buttons. You can fully customize the image order, filter button, load more button, custom links, and lightbox by enabling them.

Though default settings are usually fine, we’ll make a few changes:-

• Adjusted image size and space between the image
• Turned on the filter button by clicking ‘Filter Nav.’
• Enabled the ‘Lightbox’ and ‘Lightbox Content’ buttons

Enable Hover (Content tab)

Next, get on the ‘Hover Settings’ and enable the ‘Overlay’ button. This option works to change the color when you hover over the images.

However, our purpose in enabling hover is to show the captions and descriptions we have added to our masonry gallery images in step two.

Once the ‘Overlay’ is enabled, you’ll have various hover settings. We’ve adjusted the overlay color, border animation, content position, and more here.

Feel free to explore and customize them according to your liking.

Filter Button Customization

Now we are going to customize the filter button we have added. You can change both active and inactive filter button customization via the ‘Filter Buttons’ and ‘Active Filter Buttons’. 

Customize them according to your needs. Here is our –

All set!

Click ‘Save Draft’ and leave the visual builder to see your beautiful creation.

Remember, the Design tab is a treasure trove of possibilities. Don’t hesitate to explore further to unleash your creative vision!

Preview

Let’s have a look at what we made!

((Video/gif))

Why Use DiviFlash to Create Masonry Gallery in Divi?

Now the question is why we have chosen this DiviFlash plugin; whereas the market supports a lot.

Simple – with DiviFlash’s Advanced Gallery module, you can showcase your masonry gallery interactively. You can display a lightbox in your images, hover customization, add the filter and load buttons, add various animation effects, and more.

However, here are some more reasons to choose DiviFlash to Create Masonry Gallery in Divi –

• Can show up to 8 images in a single row
• Put balanced space between images
• Enable quick view of caption & description in the lightbox
• Use versatile animation effects for overlay, image scale, border, etc
• Style an intuitive load more button with extensive customization features

Ending Thoughts

As you can see, we have covered how to create masonry gallery in Divi website with some simple steps. Now it’s your turn. 

Get creative and share your thoughts in the comments. Or if you need a nudge to create one, let us know.