This element has just the right options to design any kind of number counters, with icons or numbers up-to a certain decimal points or can even add prefix/suffix texts are provided under the main General tab, where as now the styling changes are all under the main Design 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.
