Search Divi Plus Documentation

Search for answers or browse our knowledge base.

< All Topics
Print

Masonry Gallery

masonry-gallery-output

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.
divi-masonry-gallery

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.