Extend The Number counter Values
Using a number counter on your website can give a great effect, showing some value with the added bonus of an animation. But the default Divi Number Counter module is pretty limited. It only has one input field and one option to show or hide a percentage symbol, which is not all close to covering the possible use cases for this module. So in this tutorial, I will show you how to add any text or symbols before and after the Divi Number Counter module numbers.
▶️ Please watch the video above to get all the exciting details! 👆
1. Add A CSS Class To The Number Counter Module
The first step is to place the Divi Number Counter module in your layout and write your own number value. Each module will need to have a CSS class in order to add connect the code from step #2 to the module. Go to the Number Counter module settings>Advanced tab>CSS ID & Classes toggle and add the class “pa-number-counter-before” to the CSS Class input field.
Since you probably need to add specific values to individual Number counter modules, you will need to have a unique CSS class selector for each module. You can also make additional custom CSS selectors like “pa-number-counter-after” and “pa-number-counter-both” since we will give you these snippets in step #2.
2. Add Custom CSS Code Snippet To The Number Counter Module
The second step is to copy and paste whichever snippet you need below to your website. You can see there are three different snippets, one for adding text before the number, one for adding text after the number, and one for adding it both before and after the number. Choose whichever one you need.
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
Before
/*add content before number counter value*/
.pa-number-counter-before .percent-value:before {
content: "XXX";
}
After
/*add content after number counter value*/
.pa-number-counter-after .percent-value:after {
content: "XXX";
}
Both
/*add content before and after number counter value*/
.pa-number-counter-both .percent-value:before {
content: "XXX";
}
.pa-number-counter-both .percent-value:after {
content: "XXX";
}
Add Your Own Values
Obviously you need to replace the XX with your own values. Just write whatever text or symbol inside the quotation marks.
Add Space As Needed
If you need to add a space like in our example in the video of the “250 Clients” then just add a space inside the quotation marks at the beginning or end.
Adjust The Module Or Column Width
Because of the way we are adding this extra text, you may need to make the module width wider or adjust the column width for it to fit properly.
Make More Unique Snippets
If you need more than one module to have different text before the numbers, simply copy the snippets and make a unique CSS class selector for each module.
Not 100% relevant to above but still related to this topic and I think you might know the solution: Any way to make the counter only start once the visitor scrolls down to it? In my case, the counter starts (and finishes counting) before the user sees it. Which defeats the purpose.
Hi Janko!
It’s the default feature of the Number counter, it starts only when the visitor reaches the section. If it is not happening, then please contact the Elegant themes support.
Hello, it is working ok for me, but having trouble how to modify the “content”. The font face etc. is ok, but how to make i.e. square meters 2 is not wirking in the content, any advise?
Hi Piciu!
I’m not able to understand what you meant by square meters 2. Can you share some more details? However, you can add more properties to the code:
.pa-number-counter-before .percent-value:before {
content: “XXX”;
font-family: Open Sans,Arial,sans-serif;
}
Hope it helps!
This didn’t work for me. I tried to add a plus sign but it is not showing.
Okay, I’m not sure why it would not be working for you.
Perfect solution!, but how do you get the number and the text inline?
I mean i have for example a counter thats says 5 Jaar (dutch for years 🙂 ) and now bottom part of the 5 is lower then the J form Jaar?
Regards,
Marcel
Hi Narcel!
I have checked with the ‘Jaar’ after text and it seems to be working fine and inline with the number. Could you please share the URL of the page? It will help me to understand the issue better.