The Divi Bar Counters Module displays numerical information, like percentages, goals, or metrics, in an engaging, animated format using lazy-load.
Add The Divi Bar Counters Module
When you load the Visual Builder, Divi automatically adds a Section.
Click the Green Plus
icon to insert a Row.Click the Gray Plus
icon inside the Row to open the Divi Module Library, which contains all the modules included with the Divi theme.Find the Bar Counters module and click on it to load the module.
The module library is also searchable. Type the module name you want in the search bar at the top.
{Gif here}
The Divi Bar Counters Module use cases:
Highlighting Skills: Showcase individual or team strengths with simple skill labels. For example, display skills like "Graphic Design," "Marketing Strategy," or "Customer Service" with corresponding progress bars.
Tracking Project Progress: Visually represent project stages or task completion. Use bars labeled "Planning Phase", "Development", or "Launch Prep" to show the current status.
Comparing Metrics: Compare key performance indicators side by side. Examples include Bars Counters items for "Monthly Sales", "Website Traffic", or "Customer Retention".
All Bar Counters module options
Once you've added the Bar Counters module, the module settings automatically pop up. This is where this module's content and design styles are configured. These settings are organized into three groups via the tabs at the top of the module:
The Content tab
In the Content tab, you can add, edit, or delete Bar Counters and customize the background options.
Add, Edit, and Remove - Allows editing, adding, or removing Bar Counters.
Elements - Choose to display or remove the Bar Counter's percentage symbol.
Link - Make the entire Bar Counters module clickable, creating a seamless way to direct users to another page, section, or external site.
Background - Choose the Bar Counters module's background styles.
Admin Label - Choose the Bar Counters module's label text to assist in keeping things organized and easy to understand in the Visual Builder.
The Design tab
All the design styles and options for the Bar Counters module are in this tab.
Bar - Style each Bar Counter item individually.
Text - Choose the overall Bar Counters module's text styles for this module.
Title Text - Choose the Bar Counters module's title styles.
Percentage Text - Choose the Bar Counters module's Percentage text styles.
Sizing - Choose the Bar Counters module's sizing.
Spacing - Choose the Bar Counters module's spacing.
Border - Choose the Bar Counters module's border styles.
Box Shadow - Choose the Bar Counters module's Box Shadow styles.
Filters - Choose the Bar Counters module's filters, such as hue shifts, saturation changes, and blending modes.
Transform - Choose the Bar Counters module's advanced design effects, such as scaling, rotating, skewing, and translating.
Animation - Choose the Bar Counters module's animation styles, adding personality and interactivity while keeping a polished, professional feel.
The Advanced tab
The Advanced tab provides tools for experienced designers, including options for adding CSS IDs and Classes, controlling visibility, managing transitions, adjusting element positions, and creating scroll effects.
CSS ID & Classes - Allows you to assign unique identifiers or reusable labels to modules, enabling advanced custom styling through your child theme’s stylesheet or Divi’s custom CSS settings.
Custom CSS - Allows you to add custom CSS code to fine-tune your Bar Counters module, enabling advanced styling that perfectly aligns with your vision.
Visibility - Choose the Bar Counters's module visibility based on different devices.
Conditions - Allows you to create dynamic, personalized content, ensuring the right message reaches the right audience at the right time.
Transitions - Choose how long Bar Counters's module animation takes, adding subtle, impactful animations that enhance user experience and make your modules stand out.
Position - Choose precise control of the Bar Counters's module placement and create dynamic, visually engaging designs.
Scroll Effects - Control how the Bar Counters module behaves and transforms during scrolling.
Add, Edit, and Delete Bar Counters Items
Open the Bar Counters module settings: Click on the Bar Counters module on your page or click on the Gear icon to open its settings.
Edit an Item: Click the Gear icon next to the Bar Counter item you want to update(1).
Add a New Item: In the Content tab, click Add New Bar Counter Item (2). Enter the title and body content, then customize design options like background color, text style, or icons. Click the arrow icon at the top left to return to the main module settings.
Delete Item: Click the Trash icon (3)
next to the Bar Counter item to delete it.
Save your changes and exit the Visual Builder
To save the page design, you can type CMD + S on a Mac or CTRL + S on a PC.
You can also:
Click on the Save button.
Click on the Exit button.
