Hide Image Title and Pagination in Divi Gallery Lightbox

by | Jun 3, 2024 | Blogging, Tips & Tricks, Tutorials | 0 comments

Affiliate Disclosure: Some of the links in this post are affiliate links, which means we may earn a commission if you click through and make a purchase. For more details, please read our Affiliate Disclosure Policy.

Are you looking to enhance the presentation of your website’s image galleries using the Divi theme? The Divi Gallery module offers a fantastic way to showcase your images, but sometimes, you might find yourself wanting more control over its appearance. Specifically, you might wish to hide the image titles and pagination within the Divi Gallery Lightbox to create a cleaner, more streamlined viewing experience for your visitors.

In this blog post, I’ll guide you through the steps to achieve just that. We’ll explore how to remove the image titles and pagination within the Divi Gallery Lightbox, giving your images center stage without distractions. Whether you’re aiming for a minimalist design or simply prefer a cleaner look for your galleries, these techniques will empower you to tailor your website’s appearance to suit your preferences.

By the end of this post, you’ll have the knowledge and tools necessary to customize your Divi Gallery Lightbox exactly to your liking, ensuring that your images shine brightly and captivate your audience’s attention.

So, let’s embark on this journey together and unlock the potential of the Divi theme to create stunning, immersive image galleries for your website. Let’s dive in!

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

Title Under Image

Read More: How to Create Anchor Links in Divi

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

Gallery 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;
}

Where To Paste The CSS Code

Paste this code in your Divi>Theme Options>Custom CSS code box as shown in the image below:

If you only want to hide the title in the Lightbox, you can achieve this by using a bit of code

Pasting CSS code at Divi Dashboard

If you only want to hide the title in the Lightbox, you can achieve this by using a bit of code. This will help you maintain a clean and minimalist look for your image galleries. By hiding the titles, you can let the images speak for themselves without any distractions. It’s a simple tweak that can make a big difference in the overall presentation of your website. 

.mfp-title {

    display: none;
}

To hide just the pagination in your Divi Gallery Lightbox, you can easily do so with the following code:

.mfp-counter {

    display: none;
}

If you’re looking to hide the close button, that little cross icon at the top right corner, there’s a simple code you can use. This code helps you tweak the appearance of your Divi Gallery Lightbox even more. So, if you don’t want viewers to have the option to close the lightbox, this code will do the trick.

button.mfp-close {

    display: none;
}

Read More: Animate Your Web Page Using Divi Scroll Effects

To hide the arrows in the Divi Gallery Lightbox, you can use a simple code snippet. This code will make the navigation arrows, usually used for moving between images, disappear from view. This can be useful if you prefer a cleaner, more minimalist look for your gallery.

button.mfp-arrow.mfp-arrow-right.mfp-prevent-close {

    display: none;

}

button.mfp-arrow.mfp-arrow-left.mfp-prevent-close {

    display: none;

}

Conclusion:

In the world of website design, every detail matters. When it comes to presenting your images using the Divi theme, having control over the appearance of your galleries can elevate your website’s visual appeal. Throughout this blog post, we’ve explored various techniques to hide image titles and pagination within the Divi Gallery Lightbox, allowing your images to take center stage.

By following the steps outlined here, you can achieve a cleaner, more streamlined gallery presentation that resonates with your audience. Whether you’re aiming for a minimalist design or simply seeking a polished look for your website, these customization options empower you to shape your galleries according to your vision.

Remember, small tweaks can make a big impact. Whether it’s removing titles, pagination, or even the close button, each adjustment contributes to a more immersive viewing experience for your visitors. With the knowledge and tools gained from this post, you have the ability to create stunning, distraction-free image galleries that leave a lasting impression.

So, embrace the power of customization, experiment with these techniques, and let your images speak for themselves. Your website’s galleries are now poised to captivate and engage your audience like never before. Let’s continue to unlock the full potential of the Divi theme and create galleries that truly shine.

Read More: How to Add Divi Button Modules Side by Side

0 Comments

Submit a Comment

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

Stay ahead with the Latest WordPress Insights

Subscribe for tips, updates, and exclusive tools to elevate your website game.

Newsletter

No spam ever. Only Divi related updates. You need this.

Pin It on Pinterest

Shares