Overview of the Bar Counter module

This page shows you how to add the Bar Counter module to your page and explains every setting in its Content, Design and Advanced tabs, with screenshots. The Bar Counter module shows a skill or progress percentage as an animated bar with a title. For more details, view the demo.

How to add the Bar Counter module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for DP Bar Counter in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab holds the module’s own settings, grouped in the toggles below. Link, Background and Element Label are the standard Divi options.

Configuration

• Layout: Select the layout for your bar.
• Title: Define the title for your bar.
• Percentage: Define the percentage for your bar.
• Display Empty Bar/Chunks: Choose whether to display empty bar or not.
• Use Stripes: Choose whether to use striped bar or not.

Background

Design tab settings

The Design tab lets you style each part of the module:

• Title: styling options for the title.
• Percent: styling options for the percent.
• Sizing, Spacing, Border, Box Shadow, Filters, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.