Are you on the lookout for techniques to show an animated quantity counter to your WordPress web page?

Appearing a host rely is helping seize your guests’ consideration and lets you show milestones, glad shoppers, a hit tasks finished, and different vital statistics to your website online.

On this article, we’ll display you the best way to display a host rely animation in WordPress.

How to show a number count animation in WordPress

Why Upload a Quantity Depend Animation in WordPress?

Appearing a host counter to your WordPress website online is a good way to interact customers and seize their consideration.

You’ll be able to use it to show vital stats to your web page, just like the collection of per thirty days guests or the collection of articles on a WordPress weblog.

In a similar way, you’ll be able to use an animated quantity rely to show finished tasks, the collection of glad shoppers, the collection of shoppers, milestones completed by means of your corporation, and different a very powerful knowledge.

For instance, OptinMonster makes use of the quantity counter to turn per thirty days customer periods optimized.

Number counter at OptinMonster

Including and customizing a host rely in WordPress typically calls for enhancing code. This can also be difficult for inexperienced persons who don’t understand how to put in writing code.

That stated, let’s see how you’ll be able to display an animated quantity counter in WordPress. We’ll duvet 2 easy strategies the usage of a top class website online builder and a unfastened plugin.

You’ll be able to click on the hyperlinks beneath to leap forward in your most popular segment.

The easiest way so as to add an animated quantity counter in WordPress is by means of the usage of SeedProd. It’s the perfect WordPress website online builder that provides a drag-and-drop web page builder and a whole lot of customization choices.

For this educational, we’ll use the SeedProd Professional model as it contains complex blocks and lets you upload a counter. There could also be a SeedProd Lite model you’ll be able to check out totally free.

The very first thing you’ll wish to do is set up and turn on SeedProd. If you wish to have lend a hand, then please see our information on the best way to set up a WordPress plugin.

Upon activation, SeedProd will ask you to go into the license key. You’ll be able to in finding the license key on your account space and the acquisition affirmation e mail.

Entering the SeedProd license key

Subsequent, you’ll wish to head over to SeedProd » Touchdown Pages out of your WordPress admin panel.

SeedProd means that you can create professionally designed customized touchdown pages, together with a coming quickly web page, upkeep mode web page, login web page, and 404 web page.

Pass forward and click on the ‘Upload New Touchdown Web page’ button.

Creating a new homepage design with SeedProd

After that, you’ll be able to make a choice a template to your touchdown web page and display the animated quantity counter.

Merely hover over a template and click on the orange take a look at button.

Select a page template

A popup window will now open. Merely input a web page identify and web page URL.

After that, click on the ‘Save and Get started Modifying the Web page’ button.

Enter a Page Name and Page URL

This will likely release the SeedProd drag-and-drop builder.

Subsequent, you’ll be able to edit your web page template by means of including other blocks or clicking current parts at the web page.

So as to add an animated quantity rely, merely drag the ‘Counter’ block from the menu to your left and drop it onto the template.

Add the counter block

After that, you’ll be able to make a choice the Counter block to customise it additional.

As an example, there are alternatives to modify the beginning and finishing quantity within the counter, input a host prefix and suffix, and edit the identify.

Edit the title of the counter

Subsequent, you’ll be able to transfer to the ‘Complicated’ tab underneath the Counter block settings to your left.

Right here, you’ll in finding extra choices to modify the manner, colour, spacing, font, and extra to your Counter block.

Edit the color and style of the block

After that, you’ll be able to head to the ‘Web page Settings’ tab on the best.

Now click on the ‘Web page Standing’ toggle and alter it to Submit.

Publish your number counter page

Subsequent, you’ll be able to click on the ‘Save’ button on the best and go out the touchdown web page builder.

To peer the animated quantity counter in motion, move forward and seek advice from your website online.

Number counter preview

Approach 2: Display a Quantity Depend Animation The use of Counter Quantity

Otherwise you’ll be able to upload quantity rely animation in WordPress is by means of the usage of the Counter Quantity plugin.

This can be a unfastened WordPress plugin this is simple to make use of and allows you to create easy counter numbers to your web page.

First, you’ll wish to set up and turn on the Counter Quantity plugin. For extra main points, please see our information on the best way to set up a WordPress plugin.

Upon activation, you’ll be able to move to Counter Numbers » All counters out of your WordPress dashboard and click on the ‘Upload New Counter’ button.

Add a new counter

After that, you’ll be able to input a identify to your counter quantity.

Within the unfastened model, you’ll be able to simplest make a choice the obvious design template. If you need extra templates and customization choices, then we advise the usage of SeedProd.

Enter a name for the counter and select a template

Subsequent, you’ll be able to upload counter quantity main points. There are alternatives to edit the counter identify, make a choice an icon, and input the counter quantity price.

You’ll be able to upload as many counter numbers as you need by means of clicking the ‘Upload New Counterbox’ button on the backside.

Add counter details

But even so that, you get extra customization choices from the panel to your proper.

For instance, the plugin means that you can exchange the counter identify colour, quantity colour, icon measurement, font measurement, font circle of relatives, and extra.

After making the adjustments, scroll again to the highest and post your counter.

Publish your counter number

Subsequent, you’ll be able to head to Counter Numbers » All counters out of your WordPress dashboard.

Pass forward and replica the Counter Shortcode. It’s going to glance one thing like this:[COUNTER_NUMBER id=41]

Copy the shortcode for counter

Later on, you’ll be able to position your animated quantity rely any place to your website online, from posts and pages to sidebars.

Merely upload a brand new put up or web page or edit an current one. When you’re within the content material editor, merely click on the ‘+’ signal and upload a Shortcode block.

Adding a shortcode block to WordPress

Subsequent, you’ll be able to paste the counter quantity shortcode within the block.

From right here, preview and post your web page or put up to look the animated quantity rely in motion.

Free plugin counter number preview

We are hoping this newsletter helped you discover ways to display a host rely animation in WordPress. You’ll be able to additionally see our final information to WordPress safety and our professional select of the perfect WordPress plugins for small trade web pages.

In case you favored this newsletter, then please subscribe to our YouTube Channel for WordPress video tutorials. You’ll be able to additionally in finding us on Twitter and Fb.

The put up Find out how to Display a Quantity Depend Animation in WordPress first gave the impression on WPBeginner.

WordPress Maintenance

[ continue ]