How to show a number count animation in WordPress

How to Present a Amount Rely Animation in WordPress


Are you searching for techniques to exhibit an animated number counter on your WordPress web site?

Exhibiting a amount rely can help seize your visitors’ interest and will allow you to display screen milestones, happy buyers, productive initiatives done, and other vital statistics on your site.

In this post, we’ll display you how to clearly show a amount rely animation in WordPress.

How to show a number count animation in WordPress

Why Incorporate a Range Rely Animation in WordPress?

Showing a range counter on your WordPress web site is a fantastic way to have interaction consumers and seize their notice.

You can use it to screen crucial stats on your web page, like the amount of every month visitors or the range of posts on a WordPress blog site.

Similarly, you can use an animated amount count to screen completed jobs, the variety of pleased consumers, the variety of shoppers, milestones accomplished by your small business, and other very important facts.

For illustration, OptinMonster works by using the number counter to demonstrate month to month visitor periods optimized.

Number counter at OptinMonster

Adding and customizing a number count in WordPress normally demands editing code. This can be difficult for beginners who never know how to generate code.

That explained, let us see how you can clearly show an animated amount counter in WordPress. We’ll protect 2 very simple techniques employing a quality web site builder and a free of charge plugin.

You can click on the backlinks below to jump forward to your favored part.

The finest way to add an animated number counter in WordPress is by using SeedProd. It is the most effective WordPress website builder that offers a drag-and-fall site builder and loads of customization solutions.

For this tutorial, we’ll use the SeedProd Professional variation mainly because it incorporates advanced blocks and makes it possible for you to include a counter. There is also a SeedProd Lite model you can check out for no cost.

The 1st factor you’ll require to do is put in and activate SeedProd. If you will need support, then remember to see our guideline on how to put in a WordPress plugin.

Upon activation, SeedProd will request you to enter the license crucial. You can obtain the license essential in your account spot and the obtain affirmation email.

Entering the SeedProd license key

Subsequent, you are going to want to head over to SeedProd » Landing Internet pages from your WordPress admin panel.

SeedProd allows you create skillfully designed personalized landing web pages, which includes a coming before long web site, maintenance method page, login site, and 404 web page.

Go in advance and simply click the ‘Add New Landing Page’ button.

Creating a new homepage design with SeedProd

Right after that, you can find a template for your landing web site and present the animated range counter.

Simply hover about a template and click on the orange check out button.

Select a page template

A popup window will now open up. Only enter a website page title and webpage URL.

Immediately after that, click the ‘Save and Begin Modifying the Page’ button.

Enter a Page Name and Page URL

This will start the SeedProd drag-and-fall builder.

Next, you can edit your web page template by introducing unique blocks or clicking present aspects on the page.

To increase an animated variety rely, simply drag the ‘Counter’ block from the menu on your remaining and drop it on to the template.

Add the counter block

Following that, you can decide on the Counter block to personalize it further more.

For instance, there are choices to alter the setting up and ending selection in the counter, enter a amount prefix and suffix, and edit the title.

Edit the title of the counter

Subsequent, you can change to the ‘Advanced’ tab less than the Counter block settings on your remaining.

In this article, you will uncover extra selections to improve the design and style, color, spacing, font, and extra for your Counter block.

Edit the color and style of the block

Immediately after that, you can head to the ‘Page Settings’ tab at the leading.

Now click on the ‘Page Status’ toggle and adjust it to Publish.

Publish your number counter page

Following, you can click the ‘Save’ button at the best and exit the landing page builder.

To see the animated range counter in motion, go forward and check out your web site.

Number counter preview

System 2: Display a Number Count Animation Employing Counter Quantity

Another way you can add quantity rely animation in WordPress is by utilizing the Counter Number plugin.

It is a cost-free WordPress plugin that is uncomplicated to use and allows you make easy counter numbers for your internet site.

Initial, you will want to put in and activate the Counter Range plugin. For extra information, remember to see our guidebook on how to install a WordPress plugin.

Upon activation, you can go to Counter Numbers » All counters from your WordPress dashboard and simply click the ‘Add New Counter’ button.

Add a new counter

Right after that, you can enter a title for your counter range.

In the absolutely free variation, you can only find the plain structure template. If you want additional templates and customization selections, then we counsel making use of SeedProd.

Enter a name for the counter and select a template

Subsequent, you can increase counter variety information. There are selections to edit the counter title, select an icon, and enter the counter selection value.

You can add as many counter figures as you want by clicking the ‘Add New Counterbox’ button at the bottom.

Add counter details

In addition to that, you get a lot more customization choices from the panel on your right.

For example, the plugin lets you alter the counter title shade, number colour, icon sizing, font dimensions, font household, and additional.

Following generating the changes, scroll again to the top and publish your counter.

Publish your counter number

Future, you can head to Counter Figures » All counters from your WordPress dashboard.

Go in advance and copy the Counter Shortcode. It will glimpse a little something like this:[COUNTER_NUMBER id=41]

Copy the shortcode for counter

Afterward, you can place your animated range depend any where on your internet site, from posts and web pages to sidebars.

Just add a new write-up or web page or edit an current a person. When you are in the content material editor, basically click on the ‘+’ indication and insert a Shortcode block.

Adding a shortcode block to WordPress

Subsequent, you can paste the counter range shortcode in the block.

From here, preview and publish your web site or write-up to see the animated variety rely in action.

Free plugin counter number preview

We hope this posting served you learn how to exhibit a number rely animation in WordPress. You can also see our top guideline to WordPress stability and our expert decide of the greatest WordPress plugins for little small business web sites.

If you liked this write-up, then make sure you subscribe to our YouTube Channel for WordPress online video tutorials. You can also find us on Twitter and Facebook.



Leave a Reply

Your email address will not be published. Required fields are marked *