Search Divi Plus Documentation

Search for answers or browse our knowledge base.

< All Topics
Print

Bar Counter

divi-bar-counter-module

How to Add Bar Counter Module to your webpage

Once Divi Plus is activated, it adds several modules to the Divi builder. To add a module on the page, use the following steps:

  1. Create/Edit a Page/Post that uses Divi builder.
  2. Create/Edit a row.
  3. Click on Add New Module option; choose the DP Bar Counter module.
divi-bar-counter-module

Content Options

  1. Change layout: Go to the Content tab >> Configuration >> Layout >> select either Layout 1 Layout 2.
  2. Add a title to the Bar Counter: Go to the Content tab >> Configuration >> Title >> input the text.
  3. Adjust Bar Counter’s Percentage value: Go to the Content tab >> Configuration >> Percent >> move the slider or input the value.
  4. How to display the bar counter’s empty area: Go to the Content tab >> Configuration >> Display Empty Bar >> YES.
  5. How to display stripes on a Bar Counter: Go to the Content tab >> Configuration >> Use Stripes >> YES. (Applicable for Layout 1.)
  6. How to enable an animation on Bar Counter’s Stripe: Go to the Content tab >> Configuration >> Enable Stripes Animation >> YES. (Make sure Stripes are enabled. Step 6.)
  7. Change Stripe animation speed: Go to the Content tab >> Configuration >> Animation Speed >> move the slider or input the value. (Make sure Stripe animation is enabled. Step 7.)
  8. How to enable custom chunks size: Go to the Content tab >> Configuration >> Enable Custom Chunks Size >> YES. (Applicable for Layout 2.)
  9. Adjust Bar Counter’s Chunks Width: Go to the Content tab >> Configuration >> Chunks Width >> move the slider or input the value. (Make sure Chunks Custom Size is enabled. Step 9.)
  10. Adjust Bar Counter’s Chunks Height: Go to the Content tab >> Configuration >> Chunks Height >> move the slider or input the value. (Make sure Chunks Custom Size is enabled. Step 9.)
  11. Customize Empty Bar or Chunks Background: Go to the Content tab >> Background >> Empty Bar/Chunks Background >> customize background with color, gradient or an image.
  12. Customize Filled Bar or Chunks Background: Go to the Content tab >> Background >> Filled Bar/Chunks Background >> customize background with color, gradient or an image.  

Design Options

  1. Style Bar/Chunks Title and Percent: Go to the Design tab >> Text >> select Title / Percent >> apply text customization.
  2. Apply Border Styles & Rounded Corners to Empty Bar or Chunks: Go to the Design tab >> Border >> Empty Bar/Chunks Rounded Corners >> input values >>  Empty Bar/Chunks Border Styles >> select border styles. Explore the settings to style border styles Width, Color and Border Style. 
  3. Apply Border Styles & Rounded Corners to Filled Bar or Chunks: Go to the Design tab >> Border >> Filled Bar/Chunks Rounded Corners >> input values >>  Filled Bar/Chunks Border Styles >> select border styles. Explore the settings to style border styles Width, Color and Border Style. 
Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Previous Before After Image Slider
Next Scroll Image