How to Add Masonry Gallery Module to your webpage

Once Divi Plus is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:

1. Create/Edit a Page/Post that uses Divi builder.
2. Create/Edit a row.
3. Click on Add New Module option; choose the DP Masonry Gallery module.

Content Customization

• How to add images to the gallery: Go to the Content tab >> Configuration >> Images >> Add Gallery Images. It will open Media Library, select the images you want to display in the Masonry Gallery.

• 

• 

• Increase or decrease the number of columns in the gallery: Go to the Configuration >> Number Of Columns >> choose the number of columns up to 10.

• Add Space between columns: Go to the Configuration >> Column Spacing >> move the slider or input the values.

• How to choose gallery image size: Go to the Image Size >> choose image size either Medium, Large or Full.

• How to display gallery images in a Lightbox: Go to the Elements settings in the Content tab >> Enable Lightbox >> check as YES.

• How to show Title on images in the Lightbox: Go to the Elements >> Show Title >> check as YES.

• How to show Caption on images in the Lightbox: Go to the Elements >> Show Caption >> check as YES.

• Apply Overlay effect on Hover: Go to the Elements >> Enable Image Overlay on Hover >> check as YES. And choose any available Overlay Icon.

Masonry Gallery Design Customizations

• How to style Image Title and Caption Text: Go to the Design tab >> Text >> do appropriate changes. (Title and Caption get displayed in the Lightbox.)

• Add Lightbox Background Color: Go to the Design tab >> Lightbox >> Lightbox Background Color >> choose color.

• Add Lightbox Close Icon Color: Go to the Design tab >> Lightbox >> Close Icon Color >> choose color.

• Add Lightbox Arrows Color: Go to the Design tab >> Lightbox >> Arrows Color >> choose color.

• How to style Title & Caption Background: Go to the Overlay >> Title & Caption Background Color >> choose color.

• How to change Overlay Icon Size: Go to the Overlay >> Icon Size >> move the slider or input the values.

• Adjust Overlay Icon Color: Go to the Overlay >> Overlay Icon Color >> choose any appropriate color.

• How to add Overlay Background Color: Go to the Overlay settings in the Design tab >> Overlay Background Color >> choose any appropriate color.

• How to make gallery images’ Corners Round: Go to the Border settings in the Design tab >> Image Rounded Corners >> input the values.

• How to add borders to gallery images: Go to the Border settings >> Image Border Styles >> and choose the appropriate border position. After this, go to the Image Border Width >> input the value. Now, go to the Image Border Color >> and choose a custom color from the option. Then, in the Image Border Style dropdown menu, choose a suitable border style.

• How to add shadow to gallery images: Go to the Box Shadow >> Image Box Shadow >> choose any appropriate box-shadow from the options.

• 

• 

Was this article helpful?

1 out Of 5 Stars

2 ratings

5 Stars		0%
4 Stars		0%
3 Stars		0%
2 Stars		0%
1 Stars		100%

How can we improve this article?

Please submit the reason for your vote so that we can improve the article.

Name

Email

Submit