Slow Down Number Counters

If you’ve seen the Divi WordPress theme by Elegant Themes, then I’m sure you’ve been impressed by the features built into it. This drag and drop WordPress theme is great, with the ability to control every aspect of your site with options and menus that make sense. The menu system is intuitive, and even the page layouts make sense. One common question I’ve seen in their forums is how to slow down number counters in their theme. The number counters show different stats and you can show data in a visual, dynamic way, instead of just showing static numbers. The problem is that the numbers count really fast. In fact, sometimes they count so fast that your visitors will miss the effect altogether.

slow down number counters in Divi WordPress Theme

This can be frustrating to users, because there are no controls in the theme itself for determining how fast the counters go. The solution is simple, but you’ll have to delve into a little javascript in order to change the speed. The Divi Theme comes with a lot of CSS and javascript files, so we will need to locate the one that has our script.

You’ll need to find the file directory of your theme. You can do this via FTP through your hosting site, or through a code editor like Dreamweaver. Navigate to your wp-content folder and then find the folder labeled themes. Double-click that folder and inside will be a list of active and inactive themes. Find Divi and double-click that folder to open it up. You’ll find tons of folders in this theme. Find the folder labeled js and open it. Look for the file labeled custom.js and edit it.

javascript

Now that I told you where to find the file, do a search for the code seen above. You’ll find it easily by doing a search for the term number_counter. Notice where it has the term animate, and a numerical duration. This is the time in milliseconds that the numbers count up to their totals. Right now it is set to 1800 milliseconds, or 1.8 seconds. I changed it to 8000, or 8 seconds. This is a much nicer, more drawn out effect, which is much more desirable. You can do the same thing to the circle counter, too. Change the duration to a larger number for a longer counting sequence. When you’re finished, save the js file and you are done!

You can poke around in the javascript files to make other changes and tweaks to behavior, too. just be careful. If you don’t know what you’re doing, you can really mess things up.