IMPROVBOY Online & Print Marketing
“Where inspiration and science create brilliant solutions.”
How To Add An Overlay To a Divi Gallery Slider
How To Add An Overlay To a Divi Gallery Slider To Open a Lightbox of Many Pictures
Scenario: You have a store that sells rocks. You want to display each type of rock on a page in grid view. When you click on the thumbnail picture, you want it to open a lightbox that allows you to scroll or swipe horizontally through the images that pertain to that type of rock.
The way Divi is built out of the box is that if you use the portfolio module, you can click on each rock, but instead of opening up a lightbox, it opens up another page that is in a grid view, and if you click on one of those pictures, it opens a lightbox where it loads those pictures on the grid page. If you use the gallery module for each rock, it does open a lightbox that includes each image for that rock. But, on the main page, where you have each rock in a grid, you have to set each rock’s gallery module to slider, so that it only shows one thumbnail, but then you have things like arrows and bullets and an automatic slideshow to contend with.
So, how do you get a simple page that is set up as a grid view and be able to click on each thumbnail to open a lightbox? The solution is to use the gallery module for each rock with a bit of customization.
Use the gallery module for each type of product. For example, you have the category of “rubber”. Each option (black, red, green, blue, brown, etc.) will have it’s own gallery module which you will put on a page where each row will have 3 -4 of these modules.
Each gallery module will have the following settings:
a. Add your images to the gallery images.
b. Layout: slider
c. Show title and Caption: no (or your choice)
d. Show pagination: no (or your choice)
e. Automatic automation: off
Advanced Design Settings and Custom CSS are left alone.
Go to: wp-content/themes/Divi/includes/builder/main-modules.php
Around line #628, you will see…
You will add one line just above the
<img src="%3$s" alt="%2$s" />to look like this:
Go to the WordPress backend ->Divi -> Theme Options. Add the following CSS to the Custom CSS on the General tab:
- How To Install Magento 2 on Centos Server
- No PO Box for Shipping in Checkout
- Add Social Media Share Buttons to Magento WordPress Integration Pages
- Magento 1.9 New Registration Error: Please Make Sure Your Passwords Match
- Why is My ionCube Loader Not Working?
- Find the PHP Version on Your Server & Website
HTML & CSS Articles
Beaver Builder Theme Articles
Divi Theme Articles
Graphic Art Articles
Head Programmer and Graphic Artist