A Counter is a fun and dynamic way to show an important number on a page of your site, animating a change from one number to another.
To get started, drag the Counter component to a page of your site. Next, click on the component to open the options panel to the side of the editor.
- Start - This option is the number the animation begins with. By default this is set to zero.
- End - This is the number the animation will end on. Note that you can set this higher or lower than the starting number, so the component will count up or down depending on which number is higher.
- Duration - The length of time it takes to count up or down. 1000ms is equal to one second, so you can fine tune the exact amount of time you want.
- Size & Position
- Align - With this option you can align the number to the right, left, or center of the component.
- Size - This option sets the font size of the number.
- Design
- Text Color - With this option you can set a custom color for the number, choosing front site colors or a fully customized color.
- Spacing
- Margin - Set this option to control how much space there is around the component itself. To set this separately for different screen sizes, click on the desktop/mobile icon.
- Margin - Set this option to control how much space there is around the component itself. To set this separately for different screen sizes, click on the desktop/mobile icon.