booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Counter


Preview Widget
Preview Widget
Getting Started
Global Layout
Icon & Text Styling

More Widgets

• Countdown
• Radial Progress
• Skill Bar
• Single Icon

# Getting started

Booster Addons provides the counter widget to create visual statistics about any of your data. From showcasing your number of customers to displaying information about your sales and reviews, you have full control on the content and the design.

Lets go through the options.


In the content section, you can define all the elements of your counter.

  • Heading :  A title text that will represent the data for the visual statistic.
  • Counter Value :  The numeric value that you want to display for your data.
  • Prefix :  Text that will be displayed on the left side of heading and the numeric value.
  • Suffix :  Text that will be displayed on the right side of heading and the numeric value.
  • Counter Separator  : The separator that you want to use for numbers that are above 999.The default value is a comma but you can use a dot or a an empty space. 
  • Counter Decimal  : The separator that you want to use for the decimals.The default value is a dot. 
  • Icon Type : Choose if u want to use an icon, an image or none of the two..
  • Image/Icon : Upload an image or select an icon from our extensive icon libraries.


Under the layout section, you will be able to control the position and the alignment of each element of the counter widget but also control the animation effect.

  • Element & Container Alignment : Align the numeric data next to the heading and setup the positioning of the widget container in your web page.
  • Animation Speed :  Change the animation speed value to have full control on the running time.
  • Repeat Animation : Enabling this will make the animation restart every time the user scrolls back to the widget. For example, if the counter widget is at the top of the web page and the user scrolls down to the footer then scrolls back to the top, the animation will be reset.


Under the styling tab section, you will have the full control over the styling & design of all you interactive icon box widget elements, you can change the sizes, colors, backgrounds...

  • Text Content Styling

Customize the text elements, heading, numeric value, prefix & suffix. Change the font size, letter spacing... choose from hundreds of Google font families.

-Colors & Shadows : Customize the color and add shadows for your text elements.The use of gradient colors is available for all the elements.

-Prefix & Suffix Position : Set up the prefix and suffix position next to the numeric value. The available options are top, middle, and bottom.

-Distances : Control the margins & distances between each element.

  • Icon Area Styling

Control everything about your icon, and change the image settings if you are using that instead.

-Icon and background size : Control the icon size and the background size to create a unique design.

-Colors : Customize the icon color scheme using either a solid or gradient color with the possibility to control the direction of the gradient. The background color can also be changed.

-Hover : Choose from over 20 hover effects and change the hover color to a solid or gradient color to create powerful your own style.

-Borders & Shadows : Control border for your icon & apply custom box shadows.

-Rotation & Margins : Rotate the icon and icon background and control the icon area margins.

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket


We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.




Email :

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020