How to Create a Masonry Image Gallery in Divi

Updated: July 6, 2021

Unlike its competitor, Elementor, Divi Builder has no native element (module) to create a masonry image gallery (read: Elementor vs Divi). There is only a Gallery module which you can use to create a basic image gallery in Divi Builder. There are two ways to create a masonry image gallery in Divi Builder, the harder way and the easier way. The harder way requires you to add JavaScript and CSS, while the easier way doesn’t require you to deal with code. In this example, we will show you how to create a masonry gallery in Divi using the easier way with the help of Divi Supreme.

Divi Supreme is a feature-rich Divi plugin. Not only it does allow you to create masonry gallery, but you can also add more creative elements to your Divi page like content toggle, start rating (you can even create a dynamic star rating), image hotspot, Lottie animation, and so on. Divi Supreme is also solution to create a popup in Divi.

How to Create a Masonry Image Gallery in Divi Using Divi Supreme

Divi Supreme is one of the most popular Divi plugins which is released as a freemium plugin. However, the module to create masonry image gallery — the Supreme Masonry Gallery module — is only available on the pro version. So, you need to use the pro version to be able to create masonry gallery using the plugin. If you want to try the free version first, you can download it on the plugin directory of WordPress. While for the pro version, you can get it on the Divi Marketplace.

First, make sure you have installed the pro version of Divi Supreme. Once you are ready, edit a page you want add the masonry image gallery to with Divi Builder. On the Divi Builder editor, add a new module by clicking the grey plus button and select Supreme Masonry Gallery.

Add the images you want to add to the gallery by clicking the plus button on the Gallery block under the Content tab on the settings panel. Since you want to create a masonry gallery, you can select images with some size (dimension) variations.

You can open the Settings block under the Content tab to enable overlay and lightbox. There are two other options you can enable here: Horizontal Order and Zoom on Hover.

If you want to add a link, you can open the Link block. To set the background color, you can open the Background block.

Styling Up the Gallery

Once you are done with the basic settings on the Content tab, you can switch to the Design tab to further style up the gallery. There are nine blocks you can open here:

  • Grid Layout

You can open this block to set the number of columns per row as well as the gap between the columns.

  • Overlay Text

If you enable overlay on the Content tab, you can open this block to set the typography (font family, font size, font style, and so on), and text color of the of the text components of the images (description, title, and caption).

  • Grid Items

You can open this block to set the border of images on the gallery. Be it border radius, border size, border style, or border color.

  • Sizing

You can open this block to set the size of the gallery.

  • Spacing

You can open this block to set the spacing of the gallery (margin and padding)

  • Border

You can open this block to set the border of the gallery. From the border size, border radius, border color, to border style.

  • Filters

You can open this block to apply CSS filters to the images on the gallery. There are eight filter types you can apply: hue, saturation, brightness, contrast, invert, sepia, opacity, blur.

  • Transform

Divi comes with a built-in CSS transform feature. You can open this block to apply CSS transform to your gallery. You can read this article to learn more about how to apply CSS transform in Divi.

  • Animation

You can open this block to apply entrance animation to your gallery.

By the way, here is an example of a masonry image gallery created with Divi Supreme:

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

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

Pin It on Pinterest

Share This

Share This

Share this post with your friends!