Bar Counter

How to add module on page

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.

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.