Style the Divi Gallery Module Lightbox Image Count using Divi Gallery Booster / Divi Booster
This method demonstrates how to style the lightbox image counter using the “Lightbox Image Count” font controls provided by the Divi Gallery Booster and Divi Booster plugins. These plugins add convenient options for changing the look of the counter—no code needed. You can easily adjust the counter’s color and size to fit your website’s design.
Open the Gallery Module's Design Settings
On your page with a Divi Gallery module, open the Gallery Settings. Then, select the Design tab from the top of the settings window. This is where you'll find all the tools for customizing the appearance of your gallery, including the image counter in the lightbox.
Expand the Lightbox Image Count Group
Scroll down in the Design tab until you find the 'Lightbox Image Count' group. Click on it to expand and reveal the settings for customizing your image counter. These options are available thanks to Divi Gallery Booster and Divi Booster plugins.
Set the Lightbox Image Count Text Color
In the expanded 'Lightbox Image Count' group, click the Text Color swatch. Choose your preferred color to make the counter stand out. For example, try setting it to green using the color code #00ff00 at full opacity to see an instant pop of color.
Set the Lightbox Image Count Text Size
Still in the 'Lightbox Image Count' section, find the Text Size setting. Enter your chosen size, such as 28, to make the counter larger and more legible.
Save Your Changes
Once you're happy with the color and size, save your changes by clicking the Save button in the Divi Builder’s top bar. This ensures your customizations are applied to the gallery module on your page.
Preview and Confirm Your Customization
Visit your page on the front end and open the gallery lightbox by clicking on a gallery image. Look for the image counter (such as "1 of 2") at the bottom of the lightbox overlay. Check that the counter uses your chosen color and text size, standing out clearly against the background. If everything looks good, your changes are live!
Conclusion
With these simple steps, you can easily style the image counter in the Divi Gallery lightbox, helping it look just right for your website and making image navigation clearer for your visitors.
0 Comments