---
title: How To Use The Advanced Counter Widget By Wow Elements
description: "The [Advanced Counter widget](https://wowelements.com/widgets/advanced-counter-widget-for-elementor/) from [Wow Elements](https://wowelements.com/) allows you to present animated numbers in a sleek and visually engaging way. It’s ideal for showcasing key statistics, milestones, or achievements while capturing user attention. With flexible styling options and smooth animation…"
url: "https://wowelements.com/docs/advanced-counter-widget/"
updated: "2026-07-27"
category: Free Widgets Customization Guide
tags:
  - Elementor
  - Elementor Addon
  - Elementor Widgets
---

# How To Use The Advanced Counter Widget By Wow Elements

The [Advanced Counter widget](https://wowelements.com/widgets/advanced-counter-widget-for-elementor/) from [Wow Elements](https://wowelements.com/) allows you to present animated numbers in a sleek and visually engaging way. It’s ideal for showcasing key statistics, milestones, or achievements while capturing user attention. With flexible styling options and smooth animation controls, you can easily tailor the counter to match your design. This guide will walk you through how to use and customize the Advanced Counter widget in Elementor.

## **Enable The Advanced Counter Widget**

![Enable the Advanced Counter Widget](https://wowelements.com/wp-content/uploads/2026/04/Enable-the-advanced-counter-widget-1024x519.webp)

To use the Advanced Counter widget from Wow Elements, first, you have to enable the widget.

1. Go to **WordPress dashboard → Wow Elements** Plugin dashboard.
2. Then, Click the **Core Widgets** Tab.
3. Search the **Advanced Counter** Widget Name.
4. Enable the **Advanced Counter** Widget.
5. Hit the **Save Settings** Button.

## **Inserting The Advanced Counter Widget**

![Inserting the Advanced Counter Widget](https://wowelements.com/wp-content/uploads/2026/04/Drag-Drop-the-widget-1024x595.webp)

**1.**Go to the Elementor Editor Page and hit the “+” icon Button.
**2.** Search the **Advanced Counter** name.
**3.** Drag the widget and drop it on the editor page.

## **The Content Tab** **Overview**

### **Counter Layout Section**

Go to **Content**→ **Counter Layout**

![Content Layout 01](https://wowelements.com/wp-content/uploads/2026/04/Content-Layout-01-1024x600.webp)

**1. Show Icon/Image:** Enable/disable the show icon/image switcher button to show/hide the icon/image from the counter.
**2. Icon Type:** Here, you can choose the icon type- icon and image. Here, we select the icon type – icon.
**3. Icon:** This option lets you set the counter icon.
**4. Counter Start Number:** You can set the counter start number from here.
**5. Counter End Number:** You can set the counter end number from here.

![Content Layout 02](https://wowelements.com/wp-content/uploads/2026/04/Content-Layout-02-1024x586.webp)

**6. Separator:** Enable/disable the show separator switcher button to show/hide the separator from the counter.
**7. Counter Text:** This option lets you change the counter text.
**8. Title HTML Tag:** You can adjust the title HTML Tag with this option.
**9. Text Inline:** If you enable the text inline switcher button, then your counter texts will appear in a single line.
**10. Icon Position:** You can set the icon position left, Top and right.

![Content Layout 03](https://wowelements.com/wp-content/uploads/2026/04/Content-Layout-03-1024x582.webp)

**11. Alignment:** You can set the counter text alignment- left, center, right, and justify with this option.
**12. Offset:** You can set the icon’s horizontal and vertical offset from here.

### **Additional Options Section**

Go to **Content**→ **Additional Options**

![Additional Option 01](https://wowelements.com/wp-content/uploads/2026/04/Additional-Options-01-1024x566.webp)

**1. Language:** You can put your preferred language inside the language field.
**2. Decimal Symbol:** You can add your preferred decimal symbol inside the decimal symbol input field.
**3. Decimal Place:** You can set the counter’s decimal place from here.
**4. Duration:** You can add the counter animation duration from here.

![Additional Option 01](https://wowelements.com/wp-content/uploads/2026/04/Additional-Options-02-1024x607.webp)

**5. Use Easing:** Enable this option to apply a smooth animation effect to the counter while it increments.
**6. Use Grouping:** Enable this option to separate large numbers with a grouping symbol (e.g., 1,000) for better readability.
**7. Prefix:**  You can set the additional information to the counter that will place before the counter from here. We have used the symbol but if you want you can add the text as well.
**8. Suffix:** You can set the additional information to the counter that will place after the counter from here.

## **Work with The Style Tab**

### **Icon/Image Section**

Go to **Style → Icon/Image**

![Icon Image 01](https://wowelements.com/wp-content/uploads/2026/04/Icon-Image-01-1024x591.webp)

In this section, you will get two customization options- **Normal** and **hover**. Let’s proceed with the **normal** tab section-

**1. Icon Color:** This option lets you change the icon color.
**2. Background Type:** You can change the color of the icon/image background to **classic** or **gradient**. Here we choose the Background type Classic.
**3. Color:** This option lets you change the icon background color.
**4. Image:** You can change the background image with this option.

![Icon Image 02](https://wowelements.com/wp-content/uploads/2026/04/Icon-Image-02-1024x516.webp)

**5. Padding:** You can add the icon/image padding from here.
**6. Border Type:**You can set the Border Type to Default, None, Solid, Double, Dotted, Dashed, or Groove**.** We choose here the Border Type None**.**
**7. Border Radius:** You can control the roundness of the border with this option.

![Icon Image 03](https://wowelements.com/wp-content/uploads/2026/04/Icon-Image-03-1024x627.webp)

**8. Advanced Radius:**You can enable the switcher to get advance option to control the roundness of the border and implement it.**9. Box Shadow:**You can add a shadow effect to the icon with this option.
**10. Typography:** Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
**11. Spacing:**You can adjust the space between the icon and the counter with this option.

![Icon Image 04](https://wowelements.com/wp-content/uploads/2026/04/Icon-Image-04-1024x633.webp)

**12. Size:** This option lets you change the icon/image size.
**13. Rotate:** You can adjust the icon/image normal rotation from here.
**14. Background Rotate:** You can rotate the the icon background with this option.

![Icon Image 05](https://wowelements.com/wp-content/uploads/2026/04/Icon-Image-05-1024x640.webp)

Now, let’s proceed to the **Hover** Tab – 

**15. Icon Color:** This option lets you change the icon/image hover color.
**16. Background Type:** This option lets you change the background hover type to classic or gradient. Here, we select the background type- classic.
**17. Color:** This option lets you change the background hover color.
**18. Image:** You can change the background image with this option.
**19.  Effect:** You can add the counter icon/image hover effect from here. (This option will work only on image)

![Icon Image 06](https://wowelements.com/wp-content/uploads/2026/04/Icon-Image-06-1024x600.webp)

**20. Radius:** This option lets you change the icon/image hover radius.
**21. Box Shadow:** You can add the icon/image hover box shadow from here.
**22. Rotate:** You can adjust the icon/image hover rotation from here.
**23. Background Rotate:** This option lets you rotate the icon/image hover background.

### **Counter Number Section**

Go to **Style → Counter Number**

![Counter Number 01](https://wowelements.com/wp-content/uploads/2026/04/Counter-Number-01-1024x583.webp)

Come to the Counter Number section, you will get two tabs- **Normal** and **Hover**. Let’s proceed with the **Normal** tab section-

**1. Spacing:** You can adjust the counter number spacing from here.
**2. Margin:** You can adjust the counter number margin from here.
**3. Color:** This option lets you change the counter number normal color.
**4. Typography:** Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.

![Counter Number 02](https://wowelements.com/wp-content/uploads/2026/04/Counter-Number-02-1024x594.webp)

Let’s proceed with the **Hover** tab-

**5. Color:** This option lets you change the counter number hover color.
**6. Typography:** Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here

### **Counter Text Section**

Go to **Style → Counter Text**

![Counter Text 01](https://wowelements.com/wp-content/uploads/2026/04/Counter-Text-01-1024x623.webp)

Come to the Counter Text section, you will get two tabs- **Normal** and **Hover**. Let’s proceed with the **Normal** tab section-

**1. Color:** This option lets you change the counter text normal color.
**2. Margin:** You can adjust the counter text margin from here.
**3. Typography:** Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.

![Counter Text 02](https://wowelements.com/wp-content/uploads/2026/04/Counter-Text-02-1024x579.webp)

Let’s proceed with the **Hover** tab-

**4. Color:** This option lets you change the counter text hover color.
**5. Typography:** Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.

### **Separator Section**

Go to **Style → Separator**

![Separator](https://wowelements.com/wp-content/uploads/2026/04/Separator-1024x594.webp)

**1. Separator Type:**Here, you will get many separator styles, and you can choose one of them that you prefer.
**2. Separator Style:** You can make changes to the separator style with this option.
**3. Color:**You can change the separator color with this option.
**4. Height:**You can adjust the height of the separator with this option.
**5. Width:**You can adjust the width of the separator with this option.
**6. Separator Spacing:**You can adjust the space between the counter text and the separator with this option.

### **Additional Section**

Go to **Style → Additional**

![Style Additional ](https://wowelements.com/wp-content/uploads/2026/04/S.-Additional-1024x565.webp)

**Content Inner Padding:** You can adjust the overall content inner padding from here.

All done! You have successfully customized the **Advanced Counter**widget on your website.

## Video Assist

[How to Use the Advanced Counter Widget in Elementor | Wow Elements Tutorial](https://www.youtube.com/embed/SaxO7Pno1zg?feature=oembed&enablejsapi=1)

You can also watch the video tutorial to use the Advanced Counter widget. Please visit the [demo page](https://wowelements.com/widgets/advanced-counter-widget-for-elementor/) for examples.

Thanks for being with us.