Hide Image Title and Pagination in Divi Gallery Lightbox

Jun 30, 2020 | Blog, Divi Tutorial | 7 comments

In this article I will share the steps to hide the Title and Pagination inside the Divi Gallery Ligthbox.

Divi Gallery is a good way to show a gallery of images in on your website. By default the Gallery module will show the Title and Caption under each image. It will also show the title of the image and pagination inside the Lightbox.

The Lightbox opens after you click on an image in the Gallery. Here is a screenshot of the Title and Pagination in the Lightbox.

Divi Gallery Lightbox

The Title and Caption under each image can be removed by setting the Show Title and Caption in the Module Settings to No.

Divi Gallery module settings

However this will not stop the Title from showing up under the Gallery Lightbox.

To remove both the Title and Pagination from under the Gallery Lightbox go to your WordPress Dashboard > Theme Options > General > Custom CSS and add the code below.

.mfp-bottom-bar {
    display: none;
}

If you are not sure where to add the code then here is a screenshot to help you.

Divi Custom CSS Theme Options to hide title in gallery lightbox

If you only want to hide the Title in the Lightbox then please use this code.

.mfp-title {
    display: none;
}

To hide only the Pagination you can use the below code.

.mfp-counter {
    display: none;
}

If you want to hide the close button. The cross icon at the top right then you can use the following code.

button.mfp-close {
    display: none;
}

To hide the arrows the code below should work.

button.mfp-arrow.mfp-arrow-right.mfp-prevent-close {
    display: none;
}

button.mfp-arrow.mfp-arrow-left.mfp-prevent-close {
    display: none;
}

Next you can check out the following articles on Divi customizations.

  1. Change Number of Columns in Divi Portfolio Module
  2. How to Autoplay Videos in Divi Video Module And Hide Controls
  3. Add Labels Above Input Fields In The Divi Contact Form
  4. How to Change the Logo on Scroll in the Divi Header

Leave a comment below if you found this helpful or have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.

7 Comments

  1. Tom

    Hi Thank you very much,

    but this works just on the smartphone, not on the desktop?

    Can you tell me how to hide the title on the desktop too?

    Thank you very much!

    Reply
    • learnhowwp.com

      This should work for desktops too. Can you share the page where I can check it.

      Reply
  2. Kimberly

    You have a type on the one to remove the counter…you have the same code twice.

    Do you have a code that would put a caption underneath the title in the lightbox only?

    Reply
    • Kimberly A Allard

      *typo – the irony is not lost on me that I made a typo talking about a typo

      Reply
    • learnhowwp.com

      Thank you for sharing this. I have corrected the mistake.

      Unfortunately there is no easy to add the caption in the light box.

      Reply
  3. cristina

    thanks for this simple but important tip!!

    Reply
    • learnhowwp.com

      You are welcome.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Managed WordPress Hosting Solution For Everyone

Get Started From Just $1 For The First Month