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 - Choose the Bar Counters module's background colors.
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 Remove Bar Counter Items
Adding a Bar Counter Item
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.
Add New Item: In the Bar Counters Module settings → Content tab, click Add New Bar Counter Item. This action opens a new Bar Counters item where you can input your content.
Configure Content: Enter the title and the percentage value for your Bar Counter item. You can also customize design settings such as background color, text style, and icons.
Return to the main Bar Counters module setting: click the Arrow icon
at the top left corner of the module window.
Editing a Bar Counter Item
Access the Bar Counters Module: Click on the Bar Counters module on your page or click on the Gear icon to open its settings.
Edit Item: Click the Gear icon
next to the specific Bar Counters item to open its settings.
Modify Content and Design: Update the title, percentage text, or any design settings as needed.
Removing a Bar Counter Item
Open the Bar Counters Module: Click on the Bar Counters module on your page or click on the Gear icon to open its settings.
Delete Item: Click the Trash icon
next to the Bar Counters 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.
