As with all Divi Pixel modules, this module also provides powerful settings. It not only gives us an ability to display images in a nice masonry style, but we can also display image overlay background, icon, title and description. In this article, I will show you all the settings of this amazing module and a few samples of how this can be configured to ensure the best user experience.

Masonry Gallery Module Settings

The main part of the Masonry Gallery module are images that can be uploaded or selected from your WordPress media library. Once you select your images you can start editing module settings. In the Content tab, you will find 3 main sections:

Images
This is where we select images and displaying settings. We can select images order (Default or Random), enable lightbox, so our images will be displayed in the modal popup after the image is clicked. This image lightbox will work as a slider, so if we have more images added, the user will be able to scroll left and right using slider navigation. Furthermore, we can display image title and caption in the lightbox and use responsive thumbnails. The image lightbox option is responsive so we can select whether or not to display modal popup on different devices.

Overlay
The built-in overlay function makes this module even more powerful. Each image in the WP Media Library has a title and caption field and Masonry Gallery allows us to display them when we mouse over the image. We can also add the icon that will be displayed, define animations for each element and set overlay content position which gives us unlimited possibilities of customization.

Overlay Animation
In the Overlay Animation section, we can customize animation for the icon, title and image caption individually. We have 19 animations to select from, Interval Delay and Animation Speed. By combinig different settings for each element we can achieve an amazing hover effects that will amaze even the most demanding website visitors.

Design Settings

Once we have the images added and displaying settings applied, we can take care of our Masonry Gallery images styling. In the Design tab we will find Grid, Overlay and Overlay Text settings.

Grid
In the Grid settings we can select number of columns and Gutter (spacing between items). All those settings are responsive, so we can define columns and spacing for desktop, tablets and mobiles individually. We can also enable Overflow. This setting is useful if we want to use box shadows on the images but be aware that too much gutter can cause weird effects on mobiles due to the extra margin of the module. In this case, you should set the overflow of the row or section to hidden.

Grid Items
This is a place where we can customize our images style. We can find the native Divi settings here where we can set border radius, add and customize border, and add box shadow.

Overlay/Overlay Text
If we have enabled overlay for our images, we can customize icon and overlay texts here. We can change colors, sizes, add shadow, tweak letter spacing, change font etc.

Masonry Gallery Samples

Okay, enough of this talk. Let’s see some examples of galleries created with the Divi Pixel Masonry Gallery module where I will be using different settings to showcase the possibilities of this module.

Gallery with Icon
In this sample, I have used a simple icon with Grow animation to let the visitor know that images are clickable. The icon is placed in the top right corner. I’m also using a subtle dark overlay, so when the user mouse over, the image gets darker which invites interaction.

Gallery with Title, Caption and Icon
Our Masonry Gallery module can display image title and caption added to the Media Library. In this demo I’m displaying them along with the icon and nice animation when we mouse over the image.

The Masonry Gallery module is a great way to show your images in a more refined and beautiful way. Attract your visitors with modern design and add some motion to your website with a few simple clicks!

You can use the Masonry Gallery and many more cool Divi Pixel modules on your website. Select your plan and start building awesome websites today! We are offering a 14-day money-back guarantee, so joining Divi Pixel is risk-free!