The Advanced Counter widget from Wow Elements 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 #
To use the Advanced Counter widget from Wow Elements, first, you have to enable the widget.
- Go to WordPress dashboard → Wow Elements Plugin dashboard.
- Then, Click the Core Widgets Tab.
- Search the Advanced Counter Widget Name.
- Enable the Advanced Counter Widget.
- Hit the Save Settings Button.
Inserting The Advanced Counter Widget #
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
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.
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.
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
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.
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
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.
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.
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.
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.
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)
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
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.
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
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.
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
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
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 #
You can also watch the video tutorial to use the Advanced Counter widget. Please visit the demo page for examples.
Thanks for being with us.
