Default Divi bar counter

  • 100%
  • 75%
  • 25%

Customized Divi bar counter

  • 100%
  • 75%
  • 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;

Comments

comments

Pin It on Pinterest