Are you in search of methods to show an animated quantity counter in your WordPress web site?
Exhibiting a quantity rely helps seize your guests’ consideration and means that you can show milestones, glad prospects, profitable initiatives accomplished, and different necessary statistics in your web site.
On this article, we’ll present you find out how to present a quantity rely animation in WordPress.
Why Add a Quantity Rely Animation in WordPress?
Exhibiting a quantity counter in your WordPress web site is an effective way to have interaction customers and seize their consideration.
You need to use it to show necessary stats in your web site, just like the variety of month-to-month guests or the variety of articles on a WordPress weblog.
Equally, you need to use an animated quantity rely to show accomplished initiatives, the variety of glad prospects, the variety of purchasers, milestones achieved by your online business, and different essential data.
For instance, OptinMonster makes use of the quantity counter to point out month-to-month customer periods optimized.
Including and customizing a quantity rely in WordPress normally requires modifying code. This may be difficult for freshmen who don’t know find out how to write code.
That mentioned, let’s see how one can present an animated quantity counter in WordPress. We’ll cowl 2 easy strategies utilizing a premium web site builder and a free plugin.
You may click on the hyperlinks beneath to leap forward to your most well-liked part.
Methodology 1: Present a Quantity Rely Animation Utilizing SeedProd
One of the simplest ways so as to add an animated quantity counter in WordPress is by utilizing SeedProd. It’s the finest WordPress web site builder that provides a drag-and-drop web page builder and many customization choices.
For this tutorial, we’ll use the SeedProd Professional model as a result of it consists of superior blocks and means that you can add a counter. There may be additionally a SeedProd Lite model you possibly can attempt without cost.
The very first thing you’ll must do is set up and activate SeedProd. When you need assistance, then please see our information on find out how to set up a WordPress plugin.
Upon activation, SeedProd will ask you to enter the license key. Yow will discover the license key in your account space and the acquisition affirmation e mail.
Subsequent, you’ll want to move over to SeedProd » Touchdown Pages out of your WordPress admin panel.
SeedProd allows you to create professionally designed customized touchdown pages, together with a coming quickly web page, upkeep mode web page, login web page, and 404 web page.
Go forward and click on the ‘Add New Touchdown Web page’ button.
After that, you possibly can choose a template in your touchdown web page and present the animated quantity counter.
Merely hover over a template and click on the orange test button.
A popup window will now open. Merely enter a web page identify and web page URL.
After that, click on the ‘Save and Begin Enhancing the Web page’ button.
It will launch the SeedProd drag-and-drop builder.
Subsequent, you possibly can edit your web page template by including completely different blocks or clicking present components on the web page.
So as to add an animated quantity rely, merely drag the ‘Counter’ block from the menu in your left and drop it onto the template.
After that, you possibly can choose the Counter block to customise it additional.
As an example, there are alternatives to vary the beginning and ending quantity within the counter, enter a quantity prefix and suffix, and edit the title.
Subsequent, you possibly can change to the ‘Superior’ tab beneath the Counter block settings in your left.
Right here, you’ll discover extra choices to vary the type, colour, spacing, font, and extra in your Counter block.
After that, you possibly can head to the ‘Web page Settings’ tab on the prime.
Now click on the ‘Web page Standing’ toggle and alter it to Publish.
Subsequent, you possibly can click on the ‘Save’ button on the prime and exit the touchdown web page builder.
To see the animated quantity counter in motion, go forward and go to your web site.
Methodology 2: Present a Quantity Rely Animation Utilizing Counter Quantity
One other method you possibly can add quantity rely animation in WordPress is by utilizing the Counter Quantity plugin.
It’s a free WordPress plugin that’s straightforward to make use of and allows you to create easy counter numbers in your web site.
First, you’ll want to put in and activate the Counter Quantity plugin. For extra particulars, please see our information on find out how to set up a WordPress plugin.
Upon activation, you possibly can go to Counter Numbers » All counters out of your WordPress dashboard and click on the ‘Add New Counter’ button.
After that, you possibly can enter a title in your counter quantity.
Within the free model, you possibly can solely choose the plain design template. If you’d like extra templates and customization choices, then we propose utilizing SeedProd.
Subsequent, you possibly can add counter quantity particulars. There are alternatives to edit the counter title, choose an icon, and enter the counter quantity worth.
You may add as many counter numbers as you need by clicking the ‘Add New Counterbox’ button on the backside.
Apart from that, you get extra customization choices from the panel in your proper.
For instance, the plugin allows you to change the counter title colour, quantity colour, icon dimension, font dimension, font household, and extra.
After making the adjustments, scroll again to the highest and publish your counter.
Subsequent, you possibly can head to Counter Numbers » All counters out of your WordPress dashboard.
Go forward and replica the Counter Shortcode. It is going to look one thing like this:[COUNTER_NUMBER id=41]
Afterward, you possibly can place your animated quantity rely anyplace in your web site, from posts and pages to sidebars.
Merely add a brand new publish or web page or edit an present one. When you’re within the content material editor, merely click on the ‘+’ signal and add a Shortcode block.
Subsequent, you possibly can paste the counter quantity shortcode within the block.
From right here, preview and publish your web page or publish to see the animated quantity rely in motion.
We hope this text helped you learn to present a quantity rely animation in WordPress. You too can see our final information to WordPress safety and our skilled choose of the finest WordPress plugins for small enterprise web sites.
When you favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You too can discover us on Twitter and Fb.
The publish Easy methods to Present a Quantity Rely Animation in WordPress first appeared on WPBeginner.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!