If you would like to use the Divi Gallery module on your WordPress website, but don’t want the images to open in lightbox (lightbox means that each image opens in its full size when you click on it), you can disable the lightbox on them. In this article, I will explain how you can do it.

 

 

Firstly, let’s mention some of the reasons why you might want to do it. One of them could be that you don’t have high-resolution images to showcase in your gallery. Maybe you are working on a project that doesn’t require it or your client has not provided you with them.

Speaking from my own experience, recently I was building a website for a client and he wanted me to feature around 20 images in a gallery, but he only had these images downloaded from his subsidiary’s website. And they were of the size of 200 x 200 pixels. This client didn’t need to show any details on these images, so a gallery with these small images without lightbox was an appropriate solution for this case.

So to disable the lightbox on your Divi gallery, all you need to do is to add a CSS class to your gallery module. Let’s say I will name it disable-lightbox.

 

 

Then just add the following custom CSS code to the custom CSS field in your Divi Theme Options or to your page’s settings custom CSS code (on the page on which you will have your gallery).

 

.disable-lightbox a {
pointer-events: none;
}
 
.disable-lightbox .et_overlay {
display: none !important;
}

 

And that’s it.

To deactivate the lightbox on mobile only, use this code:

 

@media (max-width: 980px) {
.disable-lightbox a {
pointer-events: none;
}

.disable-lightbox .et_overlay {
display: none !important;
}
}

 

Alternatively, to keep things clean and simple, you can also get rid of the hover overlay by setting the Zoom Icon Color and Hover Overlay Color to transparent (in your gallery module settings > Design > Overlay), but this will not disable the lightbox and the pointer cursor. It will just make the zoom icon and the overlay to be transparent, so you won’t see it when you hover over the images.

In case you want to keep the slider arrows, just add this CSS code to turn pointer events back on for them:

 

.et-pb-slider-arrows a { pointer-events: auto; }

 

And if you want to keep the navigation for the pagination of your gallery, too, add this CSS code as well:

 

.disable-lightbox .et_pb_gallery_pagination a { pointer-events: auto; }

 

You might also be interested in my other tutorial that explains how to make images grayscale with CSS.

I hope you will find this small Divi tip helpful.

Finally, feel free to subscribe to my newsletter if you want to be notified of future Divi tips from me like this one.