How to add number counter to website?

Animated Number Counter

In previous articles, we wrote How to link social media with a website in Webnode? and How to add Google reviews in Webnode? In this tutorial, we will focus on another widget from Elfsight which will help you display numbers and statistics on your website. A big advantage of Elfsight is the possibility of integration of their widgets with various online editors (Webnode, Weebly, WordPress…).

The animated number counter will allow you to share successes in the form of statistics and numbers, thus you are able to directly influence the opinion and strengthen the trust of your customers in your company. The responsive number counter has a modern design and a high degree of personalization. With this service, you will charm your website visitors, get more potential customers, and improve the overall design of your website.

Let’s go!

Number Counter – free VS premium

Number Counter widget which we describe in this tutorial is for free. The external service Elfsight offers in its free version (LITE) the possibility to create 1 widget.

If you need another widget, it is necessary to purchase one of the Premium tariffs offered by this service.

The price starts at 6-10 USD / month. True, you will often come across various actions, which will reduce the cost of the service.

Number Counter – templates

The Elfsight external service allows you to choose a template for the Number Counter widget, thereby speeding up the whole process. You can currently choose from up to 22 responsive templates, for example: 

• • • Number Counter – White Theme
    • Number Counter – Black Theme
    • Number Counter – Multicolor Counters
    • Number Counter – Success in Numbers
    • Number Counter – Dark Single Counter
    • …

All these templates can be edited and personalized.

How to add Number Counter to website?

1. Go to the official site https://elfsight.com/, open the Widgets tab and select the Number Counter option.

2. Choose one of the 22 available templates (you can see a preview on the right side) and click the Continue with this template button.

*For the purposes of this guide, we selected the “Cleaning” template

3. In the first step, in the Content section, you can rename the entire widget and change, add or remove elements of the given counter.

You can rename the widget by clicking in the Widget Title field.

You can change/set, duplicate and delete a counter element by clicking on the three dots and selecting Edit, Duplicate or Delete.

You can add an element by clicking on Add Counter.

Under the settings of the widget element, you can, for example, modify the initial and final value of the element, rename the element or add/replace an icon.

4. In the Layout section, you can set Number of Columns or Space Between Counters. These settings are available for desktop as well as mobile version. You can set the layout of individual widget elements using Counter Elements Layout.

5. The Style section offers you the possibility of wider personalization by setting the background or font and icon.

6. If you are done with the modifications, click on Add to website for free.

The service will ask you to log in. You can use your existing Google or Facebook account or log in with your email.

7. Click the Publish button in the upper right corner and copy the necessary HTML code using Copy Code.

8. Log into the Webnode editor and enter the code according to the services you have purchased in Webnode:

9. Done – after inserting the code, just publish the changes with the Publish button in the top bar. You will see the Social Feed widget in the published version of your website.

Number Counter – preview

A few words at the end

The number counter from Elfisight is a fast and effective way to display numbers and statistics related to your business. Improve confidence in your business and brand by using the animated Number Counter that offers a wide range of personalization.

The animated Number Counter is easy to use and requires no technical skills.

Don’t hesitate and try it now!

Number Counter – FAQ

Do I need technical knowledge to add an Elfsight widget to my website?

No, you don’t need technical knowledge at all. Read this tutorial and you’ll definitely be able to do it! Fingers crossed!

Do I have to enter a payment card number?

No – the Elfsight service does not require a payment card to be filled in when using the Free (LITE) version.

More awesome tutorials