Masonry is a Popular grid layout that uses optimal space to place images without the need to crop your images. No matter what orientation your images are, the Masonry Layout makes your images look great.

So we’re finally bringing it to Divi, and you’ll be able to create Masonry Gallery of Images for any purpose (Web Designer, Photographer, etc) easily. And on top of this fantastic Divi Module, we’ve added some extra options that will let you do more with Masonry Gallery Module.

So let’s see how this module actually works to create a stunning Masonry Gallery in Divi.

Let’s Get Started

As always, make sure you’re in Divi Builder and add a new module as Masonry Galley.

Now in the Content tab, you’ll need to add Images, now make sure you’ve got different heights and widths of each image to get a better Masonry Look.

So once you’ve successfully added Images, it’s now time to play around with a few options. Under the Settings Panel, you can enable Overlay, Lightbox for each Image, or change the order of Images.

Let’s see how the “Overlay” feature work. First, enable it and then you’ll be able to see an overlay of Image Title when you hover to each Image. You can also show a Custom Title and Description for each image on hover.

To change the overlay text to the one you want to show you’ll have to open Media Library and add a Title and Description for each image.

And that’s it the Title and Description you’ll set in the Media Library will show on each Image on Hover. You can further design it in the Design tab.

And If you enable the “Use Lightbox” switch, each image in the Gallery will open in Lightbox. Just like this.

And now you can move to the Design tab, to design each and every part of the Masonry Gallery Module, you can style the Title and Description (Overlay), Lightbox, and much more.

Grid Layout

Here you can change the way how the Masonry Gallery looks. You can change the number of columns and add some spacing between images.

 Grid Items

Under the Grid Items panel, you’ll be able to style images in the gallery. You can Corner Radius, Box Shadow, and Borders to Images in Gallery. We’ve made the below changes.

• Rounded Corners – 10px
• Box-Shadow Blur Strength – 30px
• Shadow color – rgba(0,0,0,0.08)

 Overlay

If you’ve added the Title and Description to the Image in Media Library and enabled the switch “Use Overlay” then in this panel you’ll be able to style the Title and Description the will show on hover. You can even hide Title or Description if in some cases you don’t want to show.

And you’ve other options to style the Title and Description, like font size, color, weight, and more. Here are a few changes we made here.

• Overlay Color – rgba(10,10,10,0.85)
• Title Font – Montserrat
• Title Font Weight – Bold
• Title Text Size – 20px
• Description Font – 13px
• Description Line height – 1.4em

Lightbox

• Show Image Lightbox Title – Enable this option If you want to show the Title you’ve added to the Image in Media Library when you open the Image in Lightbox.
• Show Image Lightbox Caption – Enable this option If you want to show the Caption added to the Image in Media Library when the Image is open in Lightbox

And there is one last thing we want to show you, Let’s say If you want to redirect the user to a URL on Image click, well there’s another great option for this It’s also located in Media Library. You’ll have to open your Image in Media Library and set the URL for the Image and It only works for Divi Supreme modules.

And that’s it you’ve successfully created an awesome Masonry Gallery in Divi. Here’s how it looks.

And if you remember we’ve also wadded the Overlay to the gallery, and here’s how it works.

So that’s it for today, we hope you’ll found this article helpful and our Masonry Gallery Module too, Please let us know what you think about this in the comment section below, we’d love to hear from you.

Have a great day!