This element has just the right options to design any kind of number counters, with icons or up-to a certain decimal points or can even add prefix/suffix texts all provided under the main General tab.
In the General tab we have the following options:
- Icon- Add an icon to the counter.
- Title- Enter the title that will appear below the numbers, or choose its position under title settings tab.
- Start & End Numbers- Set the starting & ending number of the counter.
- Prefix & Suffix Texts- Enter texts that appear before & after the numbers, if any, such as a dollar sign or a plus sign.
- Thousand Separator- Show or hide the thousands separator.
- Decimal Places- Choose the decimal position of the counter.
After adding an icon you can easily style it under Icon Setting tab options:
- Icon Size- Set the size of the icon.
- Icon Colors- Set the icon’s color, its background color, border color or you can also add a gradient.
- Icon Padding- Set the icon padding with respect to its background.
- Icon Background Shape- Choose the icon’s background shape either circle, square or rounded edges.
- Icon Border Style options- Choose an icon border & manage its width.
- Icon Shadow- You can easily set the icon’s shadow here.
Style the title under Title Settings tab:
- Position- Choose where to place the title within the counter above or below the numbers.
- Color- Set the title in a different color.
- Typography- Style the title differently each time using the typography field.
Style the numbers under the Number Settings tab options, that are:
- Duration- Set the time in milliseconds for the running animation to complete.
- Space Between- Manage the space between the number & title of the counter.
- Color- Set a different color to the numbers.
- Typography- Style the numbers differently each time via the typography field.
