This tutorial explains how to add a bar counter to your web page with the Divi Visual Builder for the Divi WordPress Theme.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

Text Version Of This Divi Tutorial

Hello, my name is Jimi Blevins. Today I’m going to walk you through: “Adding The Bar Counter Module In The Divi Theme.”

I’ve got the Divi Visual Builder loaded up, and the first thing I need to do is just click here on the little gray plus (+) symbol and then search and select “Bar Counter” module.


I really love these. They are great elements to kind of spice up a website.

Let’s say on your “About Us” page you’re listing out your employees and the different skills that they might have.
So I’ll just walk you through it really quick.


We’re going to add our first item, and every internet developer needs to be good at “Cat Photography,” (LOL :)) give me a 98-percent on that. Let’s add one more, do “Taco Making Skills,” and give me a solid 82-percent.


So, as you can see, this is the kind of default setting for the text and the sizes. We can change any of this here in our “Bar Counter Settings.”


So first off, I can change the “Background Color.” This is the background color that’s underneath the bar. You can see right now it’s a gray, so I’m going to make this the bright yellow so it’ll pop out a little bit better. You can see over here it’s this background, so it kind of shows the negative space as opposed to the percentage.


Let’s say I want to match that a little bit better, I don’t want to use the blue, I’ll use my bright orange here and really make that pop.


I can also turn on and off the percentages. What that does is, it leaves it as a little bit thicker line with the percentage in it. If I turn that off, it turns it into a thinner line just showing the bar. I’m going to leave that on for right now.


We’re going to pop here into the “Design” settings.


So this top padding, I can add pixels to kind of make the bars a little bit taller. It will place a padding on top of the percentage text, so I’ll show you what I mean by this. I’m just going to put in 10 pixels, and there you can see, there’s a little bit of space above the text here. If I want to match that on the bottom, 10 pixels on the bottom gives me a nice wide bar to look at.


Okay, so now I can change the “Title Font.” I think I want to make it a little bit bigger, make it bold, take it up to about 20 pixels. Then I am going to use around the same orange color, I’m gonna make it a little bit darker so it’s a little easier to read.

I can also change the “Title Letter Spacing,” stretch out the letters a little bit.


Change the “Title Line Height,” and this will just kind of give it a little more space in between the bar and the title.

The “Percentage Font,” I can change if like. I think I’m just gonna make that bold and make it a little bit bigger, about 16 pixels, so it’s a little bit easier to read. Then, of course, I can also change the “Percentage Letter Spacing,” and the “Percentage Line Height” on that as well.


Last but not least, I can also put a border around my element just to make it stand out from the page a little bit more. I think I want to go with the darker orange.


Pops off the page really nicely.


One more thing up here, I skipped over this “Border-Radius,” this enables you to round the edges of the of the items. I’ve noticed there’s a little bit of clipping here where you can see the background color bleeds through, so I don’t know if you want to use this if you’re using a border.


Again, it’s up to you to play around with it and see what you like, see what looks good to you.

Thank you so much for watching, my name is Jimi Blevins and I hope you have an awesome day. :) :) :)