This tutorial will walk you through how to add and customize a number counter using the Divi visual builder for WordPress.  Counters can be used to enhance your statistics, sales figures, or any other numerical data you want to display on your website.

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, this is Jimi Blevins.
Today I’m going to show you how to: “Use The Number Counter In The Divi Visual Builder.”

 

First off, let’s load up our “Number Counter” module by clicking on the gray add (+) sign and searching for “Number Counter“.

 

HowToAddNumberCounter

 

This is just a really simple module that gives you some cool animation if you’ve got some statistics you want on your website.
Such as, if you had a rescue shelter; how many dogs are animals you’ve rescued, or you know how many things you’ve sold on a website, that kind of deal.

 

This number can be anything you want, if you want it to be a percentage you can pop the percentage in there, it’ll count up to that.

 

HowToAddNumberCounter2
Or you can have it just go to any specific number that you want. It doesn’t matter how big the number is, it will still count up to it.

 

HowToAddNumberCounter3
A good thing to know, DON’T PUT COMMAS IN THE “NUMBER” FIELD OR IT WILL MESS UP THE COUNTER!

 

We can change the “Text Color.”
We can also specify all of the standard options here.

 

Then, getting into the “Design” elements.

 

HowToAddNumberCounter4

 

We can change the “Font,” the “Font Size,” and then, of course, we can also bump up the number so it’s as big as we want to make it.

 

HowToAddNumberCounter5

 

You’ve got options to do a “Background Color,” and this will be for the entire element. (I just threw gray in there so you can see what it looks like.)

It looks like we might need to put some “Custom Padding” on there.

Lastly, let’s “Use Border” on there.

HowToAddNumberCounter6

 

So, that walks you through the “Number Counter“, how to kind of dress it up and use it with the “Divi Visual Builder.”

HowToAddNumberCounter7

 

Once again, I’m Jimi Blevins and thank you so much for watching.