How to Disable Lightbox on Divi Gallery
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.

WordPress expert. Divi user since 2014. I blog about WordPress and Divi, my favorite WordPress theme. When I’m not working with WordPress or writing an article for this blog, I’m probably learning Italian. You can read more about me here.
Thank you :-)
Can you recommend a way to deactivate the lightbox on mobile only please? Cheers.
Try the following code:
@media (max-width: 980px) {
.disable-lightbox a {
pointer-events: none;
}
.disable-lightbox .et_overlay {
display: none !important;
}
}
This is great, thanks. Is there a way to do this globally, or at least on an entire page? I have a large number of gallery sliders and I’d like to find a way to do this without having to edit each module.
To apply this to your whole website, add the code to the custom CSS field in Divi Theme Options. Or add it to the style.css file of your child theme (if you use one).