Customize Dot Navigation Colors, Size, and Border in the Divi Gallery Slider using Divi Gallery Booster

This method shows how to style the Divi Gallery slider’s dot navigation—setting active and inactive colors, dot size, and borders—using the controls added by the Divi Gallery Booster plugin (also available in Divi Booster). It’s a quick, no‑code approach that applies your branding directly in the module settings for consistent, maintainable results.

Open the Gallery Module's Design Tab and Set Layout to Slider

To begin customizing your dot navigation, open your Gallery module’s settings in the Divi Builder. Click on the Design tab and find the "Layout" section. Change the layout from the default (such as "Grid") to "Slider" so that the dot navigation appears beneath your images and can be styled.

Access the Dot Navigation Style Options

With the Slider layout active, scroll in the Design tab to locate the "Dot Navigation" section. Click to expand it. You’ll find several controls for tweaking how the dot navigation looks.

Set Active and Inactive Dot Colors

Within the Dot Navigation section, you can set colors for both the active dot (which indicates the current slide) and the inactive dots (for the other slides). Click the color picker for each and enter your preferred color values—for example, you might use a bold color for the active dot and a more subdued one for inactive dots to make navigation clear.

Adjust Dot Size

Still in the Dot Navigation section, you’ll see a Size field. Enter the pixel value that best fits your design; a larger size can make the navigation more obvious if desired.

Configure Dot Border Width and Color

To give your navigation dots a border, set your desired border width (in pixels) and make sure it applies to all sides of the dots. You can then click the Border Color control to choose a border color that fits your site’s palette.

Save Your Changes and Publish

Once you’ve selected your color, size, and border preferences, click the Save button in the Divi Gallery settings and then save or publish your page in the Divi Builder.

Preview Your Customized Dot Navigation

View your page on the front end to see the gallery slider in action. The dot navigation beneath the slider should now reflect the styling choices you’ve made, including custom colors, sizing, and borders. If you need to make further tweaks, just return to the module’s Design tab and adjust as needed.