The Counter element allows you to show some statistic data with animation. There are a lot of settings you can use to style and configure the element to your needs.
- Show customer count
- Show the project completed
- Happy Clients
- Total Number of team
- Downloads count
- Members count
In this article
Displaying a counter element
To add a Counter element to a page:
You can add your counter items in this section by clicking on “ADD ITEM” button. After adding the item you will see the below properties:
|Icon||Adds an icon above the Counter element.|
|Starting Number||Adds the starting number.|
|Ending Number||Sets the milestone number.|
|Number Prefix||Adds the text that goes before the number.|
|Number Suffix||Adds the text that goes after the number.|
|Title||The title that shows below each counter.|
|Columns||Sets the Counter element columns. (Responsive options available, means that you can set different columns in mobile and desktops)|
|Thousand Separator||Adds a ‘,‘ sign to numbers larger than 1000.|
|Animation Duration||Sets the time that should take from starting number to ending number.|
The Counter element like any other Raven elements has several styling options.
|Alignment||Sets the counter items alignment.|
|Color Type||Sets a solid color or a gradient color for icon.|
|Size||Sets the icon size of the Counter element.|
|Padding||Sets the paddings just for the icon.|
|Color Type||Sets a solid color or a gradient color for the numbers.|
|Typography||Set the Number’s typography like font size, letter spacing and so on.|
|Padding||Sets the paddings just for the numbers.|
|Color Type||Sets a solid color or a gradient color for the counter titles.|
|Typography||Sets the title’s typography like font size, letter spacing and so on.|
|Padding||Sets the paddings just for the titles.|
You can choose to have different settings on different screen sizes for some of the Counter element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.
At first you’ll see the icon for desktop layout only
But when you click that icon, you’ll get two more layouts: for tablet and phone.
To learn more about it, please check this article.