Divi Gallery Extended Documentation

easy instructions to get you started

Download

A download link is sent in the order confirmation email. The product can also be downloaded from My Account area.

File Structure

After the purchase of the Divi Gallery Extended plugin, you’ll get the following file.

divi-gallery-extended-1.0.zip (version number will vary). 

The product version may vary depending upon the current version you’ve purchased from the Divi Extended store.

Installation

You can install the Divi Gallery Extended plugin using 2 methods.

From the WordPress Dashboard

  1. First, go to the WordPress Dashboard >>  Plugins >> and click Add New
  2. Then Upload Plugin >> Choose File and browse the divi-gallery-extended.1.0.0.zip file. (Version number may not be part of the file name if purchased from other marketplace). 
  3. Once located the file, select it and then click Install Now.
  4. Once the plugin installed, on the next window click Activate Plugin

Manually uploading via FTPTo install the Divi Gallery Extended plugin on your website using the FTP client method, 

  1. Extract the divi-gallery-extended.zip file. 
  2. And then connect to your server using an FTP application. 
  3. Now, navigate to the wp-content/plugins/ directory and upload the divi-gallery-extended folder you’ve extracted earlier.
  4. After the upload, go to the WordPress Dashboard >> Plugins >> Installed Plugins
  5. Then scroll to find the Divi Gallery Extended and click Activate to enable it.

Configuration

How to use Divi Gallery Extended Popup plugin

Add Masonry Gallery and Content Customizations

  1. Insert Masonry Gallery module on a page.
  2. 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.
  3. 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.
  4. Add Space between columns: Go to the Configuration >> Column Spacing >> move the slider or input the values.
  5. How to choose gallery image size: Go to the Image Size >> choose image size either Medium, Large or Full.
  6. How to display gallery images in a Lightbox: Go to the Elements settings in the Content tab >> Enable Lightbox >> check as YES.
  7. How to show Title on images in the Lightbox: Go to the Elements >> Show Title >> check as YES.
  8. How to show Caption on images in the Lightbox: Go to the Elements >> Show Caption >> check as YES.
  9. 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

  1. 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.)
  2. Add Lightbox Background Color: Go to the Design tab >> Lightbox >> Lightbox Background Color >> choose color.
  3. Add Lightbox Close Icon Color: Go to the Design tab >> Lightbox >> Close Icon Color >> choose color.
  4. Add Lightbox Arrows Color: Go to the Design tab >> Lightbox >> Arrows Color >> choose color.
  5. How to style Title & Caption Background: Go to the Overlay >> Title & Caption Background Color >> choose color.
  6. How to change Overlay Icon Size: Go to the Overlay >> Icon Size >> move the slider or input the values.
  7. Adjust Overlay Icon Color: Go to the Overlay >> Overlay Icon Color >> choose any appropriate color.
  8. How to add Overlay Background Color: Go to the Overlay settings in the Design tab >> Overlay Background Color >> choose any appropriate color.
  9. How to make gallery images’ Corners Round: Go to the Border settings in the Design tab >> Image Rounded Corners >> input the values.
  10. 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.
  11. How to add shadow to gallery images: Go to the Box Shadow >> Image Box Shadow >> choose any appropriate box-shadow from the options.

Add Masonry Gallery and Content Customizations

  1. Insert Masonry Gallery module on a page.
  2. 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.
  3. 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.
  4. Add Space between columns: Go to the Configuration >> Column Spacing >> move the slider or input the values.
  5. How to choose gallery image size: Go to the Image Size >> choose image size either Medium, Large or Full.
  6. How to display gallery images in a Lightbox: Go to the Elements settings in the Content tab >> Enable Lightbox >> check as YES.
  7. How to show Title on images in the Lightbox: Go to the Elements >> Show Title >> check as YES.
  8. How to show Caption on images in the Lightbox: Go to the Elements >> Show Caption >> check as YES.
  9. 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

  1. 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.)
  2. Add Lightbox Background Color: Go to the Design tab >> Lightbox >> Lightbox Background Color >> choose color.
  3. Add Lightbox Close Icon Color: Go to the Design tab >> Lightbox >> Close Icon Color >> choose color.
  4. Add Lightbox Arrows Color: Go to the Design tab >> Lightbox >> Arrows Color >> choose color.
  5. How to style Title & Caption Background: Go to the Overlay >> Title & Caption Background Color >> choose color.
  6. How to change Overlay Icon Size: Go to the Overlay >> Icon Size >> move the slider or input the values.
  7. Adjust Overlay Icon Color: Go to the Overlay >> Overlay Icon Color >> choose any appropriate color.
  8. How to add Overlay Background Color: Go to the Overlay settings in the Design tab >> Overlay Background Color >> choose any appropriate color.
  9. How to make gallery images’ Corners Round: Go to the Border settings in the Design tab >> Image Rounded Corners >> input the values.
  10. 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.
  11. How to add shadow to gallery images: Go to the Box Shadow >> Image Box Shadow >> choose any appropriate box-shadow from the options.