How to Create Masonry Gallery in Divi?

Nazmul Asif

Updated: September 15, 2022
Table of Contents

Masonry galleries are known for their beautiful and well-organized appearance. This kind of layout is open to rows of all heights. By using it,  you can reduce any gaps for a precise and even space. As a result, you don’t have to crop or reduce the image size.

But making a masonry gallery in Divi is a daunting task. Especially if you want to avoid coding difficulties, as editing CSS is not everyone’s job. We know this pain firsthand. Therefore, users with this desire will look for a simple solution on “how to create a masonry gallery in Divi?”

To fix this problem, our Divi expert group found a simple hack with the help of the DiviFlash advanced gallery module. We also want to share this experience with the Divi nation. That’s why we’ve created this how-to guide.

Let’s go through each step.

First, look at our masonry gallery. It is also available to download as a demo section. You can also import it to your Divi website; use and explore this design.

Prerequisite:

  • Install the latest version of the Divi theme.
  • The latest version of the DiviFlash Plugin.

How to Create Masonry Image Gallery in Divi

Section Design

To get started, create a regular section on an existing page or create a new page. Here, you don’t have to touch the section setting. So let’s move to the row setting. 

Row Design

For this design, we need a single-column row. And we will change its width and max-width as well. 

In the Design Tab,

Under Sizing option,

  • Width: 100%
  • Max Width: 100%

No more customization is needed. Thus, we can go for inserting modules.

Divi Modules

According to our design, we will just need two modules. There will be a blurb module along with the DiviFlash Advanced Gallery module.

Modules Designs

Click the gray plus icon to add a module from the module list. Then scroll or use the search box to find your required module. 

Blurb Module

The blurb module will take place above the advanced gallery module. So add it first. Here, remove the image as it is added by default, and we don’t need it. Further, add text for the title and a short description of this gallery. Now below, see the breakdown of Blurb module customization:

In the Content Tab,

Under Text Option,

  • Title: Our Gallery
  • Body: Dummy Text

In the Design Tab,

Under Title Text option,

  • Title Heading Level: H3
  • Title Font: Montserrat
  • Title Font Weight: Bold
  • Title Font Style: TT (Uppercase)
  • Title Text Alignment: Center
  • Title Text Size:  28px

Under Body Text Option:

  • Body Font: Arial
  • Body Text Alignment: Center

Advanced Gallery Module

As we go through our next module for this section, you may have assumed by now that it will be the advanced image gallery module. Add it beneath the blurb module. 

Then go to the content tab and click the (+) icon below the add new item. It will take you to a new setting similar to the Divi default module setting.

Here you can add the title and images for the masonry gallery. Also, attach the caption and description for the images. For more details, watch our video tutorial guide on How to add links, captions, and descriptions to gallery images?

If you are done, click the right mark in the green box. Now, you are back to the content tab of the advanced image gallery module.

Similarly, you can add a new item again. If you do so, you will have multiple galleries. Then you can also categorize them. And, as you will go further with customization settings, there will be an option for enabling filter navigation. Turn it on to apply navigation between different image gallery categories. 

We are not using any filter navigation here. So, go to the gallery setting option. Change the number of images in a row for tablet and mobile views. The default layout mode is masonry here. So just make the below updates: 

In the Content Tab,

Under Gallery Settings Option,

  • Image Size: Large
  • Image in row: 2 Items (Tablet), 1 Item (Mobile)
  • Space Between: 0px
  • Load More Button: ON
  • Initial Image Load: 8
  • Lightbox: ON
  • Lightbox Content: ON

Now on hover, we will use overlay and different border animation styles along with other customizations with showing caption & description. 

Under Hover Settings option,

  • Overlay: ON
  • Overlay Primary Color: rgba(0,0,0,0.61)
  • Overlay Secondary Color: rgba(0,0,0,0.87)
  • Border Animation: ON
  • Border Color: rgba(255,255,255,0.83)
  • Border Animation Style: Border Horizontal
  • Content Position: Center
  • Image Scale Type: Zoom In
  • Show Caption: ON
  • Caption Reveal: Fade Right
  • Show Description: ON
  • Description Reveal: Fade Left

So, it was our demonstration with the content tab. Next, move to the design tab.

On the design tab, we will style the caption texts and load more button. You will see margin & padding changes around the button as well. 

In the Design Tab,

Under Font Styles option, (Caption)

  • Caption Font: Montserrat
  • Caption Font Weight: Bold
  • Caption Font Style: TT (Uppercase)
  • Caption Text Size: 26px

Under Load More Button Option,

  •  Alignment: Center
  • Loading Icon Color: #000000
  • Background Color: #000000 (On Hover Only)
  • Button Font: Roboto
  • Button Font Weight: Bold
  • Button Text Color: #000000 and #ffffff (On Hover)
  • Button Border Width: 2px
  • Button Border Color: #000000

Under Spacing Option,

  • Load More Margin: 46px (Top)
  • Load More Padding: 13px (Top/Bottom), 60px (Left/Right)

And that’s it. To see the final view, click the save button below right and publish it. There is a beautiful masonry gallery on your Divi site. Hover over it and click the load more button to ensure everything functions correctly. Hopefully, you are happy with everything. But we encourage you to try other features of this module to bring more uniqueness to your design. Read below to learn more about this module.

Why Use DiviFlash to Create Masonry Gallery in Divi?

We find this module easy to use. Everything was in place to ensure every design aspect one can think about an intuitive masonry gallery on the Divi website. Now Let’s look at those faculties that help to create a unique masonry gallery.

  • 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 explained how to create a masonry gallery on the Divi website and what you will get to design a masonry gallery with the DiviFlash Advanced Gallery module. 

Now we want to turn it over to you. With a bit of creativity, you can do a lot better. We look forward to hearing from you in the comment box.

Nazmul Asif

Nazmul is digital marketing & SEO strategist at DiviFlash. He has been involved in data-driven digital marketing and SEO for over 8 years, specializing in growth marketing, content marketing, marketing strategy, link building and outreach. Before working for DiviFlash, he rans SEO business providing consultancy services.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *