How To Use The Advanced Counter Widget By Atomic Addons

The Advanced Counter widget by Atomic Addons shows a number that counts up from a start value when a visitor scrolls to it, with a short label such as “Happy Clients” underneath. You can add an icon or image, a prefix or suffix like “$” or “+”, decimals, thousands separators and even numerals in another script. This guide covers adding the widget, setting the number and laying out the counter.

Enable the Advanced Counter Widget

Advanced Counter is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Advanced Counter. You can also open the Content category.

4. 4

   Turn the Advanced Counter widget on.

5. 5

   Click Save Settings.

Add the Advanced Counter Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Advanced Counter. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Counter Layout

Open the widget and go to Content → Counter Layout:

1. 1

   Show Icon / Image: Adds an icon or an image to the counter. Off by default.

2. 2

   Icon Type: Icon (the default) or Image.

3. 3

   Icon: With the Icon type: the icon to show, a star by default.

4. 4

   Image Icon: With the Image type: the image to show, and an Image Resolution (Full by default). Its alt text is the Counter Text.

5. 5

   Counter Start Number: The number the count starts from, 1 by default.

6. 6

   Counter End Number: The number the count stops at, 2020 by default. It accepts dynamic tags. Leave it empty to show no number.

7. 7

   Separator: A line between the number and the text. Its style, color and size are in Style → Separator.

8. 8

   Counter Text: The label, “Cool Number” by default. Leave it empty to show only the number.

9. 9

   Text HTML Tag: The label's markup: H1 to H6, div, span or p. H4 by default.

10. 10

    Text Inline: Places the label beside the number instead of below it.

11. 11

    Icon Position: With an icon or image: Left, Top (the default) or Right of the content.

12. 12

    Icon Inline: With the Left or Right position: puts the icon in one row with the number only, so the label runs under both.

13. 13

    Icon Vertical Alignment: With the Left or Right position and Icon Inline off: lines the icon up with the Top (the default), Middle or Bottom of the content.

14. 14

    Alignment: Left, center, right or justified, per screen size.

15. 15

    Offset: With an icon or image: click Custom to nudge the icon with a Vertical Offset and Horizontal Offset, per screen size. Useful to let the icon overlap the box's edge.

Additional Options

Content → Additional Options sets how the number is counted and written:

1. 1

   Language: The ten characters used for the digits 0 to 9, separated by commas. The default, 0,1,2,3,4,5,6,7,8,9, shows ordinary digits; replace them with another script's numerals, such as ০,১,২,৩,৪,৫,৬,৭,৮,৯ for Bengali. The list must have exactly ten entries, otherwise ordinary digits are used.

2. 2

   Decimal Symbol: The character before the decimals, a dot by default.

3. 3

   Decimal places: How many decimals to show, 0 by default. Set 1 to show 4.5 rather than 5.

4. 4

   Duration: How long the count takes, in seconds. 2 by default.

5. 5

   Use Easing: On by default: the count slows down as it nears the end number. Turn it off for an even pace.

6. 6

   Use Grouping: Splits large numbers into groups of thousands, such as 12,500.

7. 7

   Separator Symbol: With Use Grouping on: the character between the groups, a comma by default.

8. 8

   Prefix: Text before the number, such as $.

9. 9

   Suffix: Text after the number, such as + or %.

The count starts once the counter scrolls into view and runs once per page view. Visitors who have reduced motion turned on in their system settings see the end number straight away.

Style the Advanced Counter

Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.

• Icon/Image — with an icon or image: color, background, border, radius, padding, size, spacing and rotation in Normal and Hover states, CSS filters and opacity for images, and a hover Effect (Effect A to E).
• Counter Number — the number's color, hover color, spacing, margin and typography.
• Counter Text — the label's color, hover color, margin and typography.
• Separator — with Separator on: the line's style (solid, dotted or dashed), color, height, width and spacing.
• Additional — the content's inner padding, the gap used by Text Inline and the spacing used by Icon Inline.