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

Divi Freebies

Do you want some Divi FREEBIES?

Join our mailing list to receive the latest news, reviews, examples and Divi Theme FREEBIES.

You have Successfully Subscribed!