Default Divi bar counter

  • 100% 100%
  • 75% 75%
  • 25% 25%

Customized Divi bar counter

  • 100% 100%
  • 75% 75%
  • 25% 25%

Create this effect yourself by;

Step 1 – add a new bar counter module

Step 2 – set the general settings set the BAR BACKGROUND COLOR: to an opaque white

Step 3 – set the general settings set the BACKGROUND COLOR: to transparent

Step 4 – in the custom CSS tab for COUNTER CONTAINER, add the following

box-shadow: inset 0px 1px 10px rgba(0,0,0,0.3);
margin-top:1px;
 background: #d9f3cb;
 background: -webkit-linear-gradient(left, #93d8f4, #f493e7); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(right, #93d8f4, #f493e7); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(right, #93d8f4, #f493e7); /* For Firefox 3.6 to 15 */
 background: linear-gradient(to right, #93d8f4 , #f493e7; /* Standard syntax */

Step 5 – in the custom CSS tab for COUNTER AMOUNT, add the following

border-top:1px solid #ccc; 
border-right:2px solid #666;

Elegant Themes' Black Friday/Cyber Monday sale is still on if you want 25% discount! Dismiss

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close