Content Controls
Counter
These controls let you customize the counter’s content, including its title, numerical range, and formatting options to match your design needs.
- Title – Set a title for your counter to provide context or label.
- Prefix – Add text before the counter number for additional information or styling.
- Suffix – Include text after the counter number for units or context.
- Start – Define the starting number for your counter animation.
- End – Set the end number to which the counter will animate.
- Duration – Specify how long it takes for the counter to reach the end number.
- Ease Count – Toggle this to smooth out the counting animation.
- Format Number – Turn this on to enable number formatting features.
- Separator – Choose a separator style for the number, available when Format Number is enabled.
- HTML Tags – Customize the HTML tags used for the Title and Number for advanced styling and structure.
- Title – Select the HTML tag for the counter title.
- Number – Choose the HTML tag for the displayed number.
Design Controls
Wrapper
These design controls allow you to adjust the overall appearance of the counter, including alignment, background, and padding for a cohesive look.
- Content Alignment – Align the content within the counter wrapper to your preference.
- Background – Choose a background color for the counter area.
- Width – Set the width of the counter wrapper for better layout control.
- Padding – Adjust the padding around the content for spacing and aesthetic balance.
- Padding – Define the specific padding values for all sides of the wrapper.
- Borders – Customize the border properties of the wrapper for enhanced visual appeal.
- Radius – Set the border radius for rounded corners.
- Styling – Choose border style, width, and color for a distinct look.
- Shadow – Add a shadow effect to the wrapper for depth and emphasis.
Typography
Adjust the typography settings for each element of the counter, ensuring the text is visually appealing and matches your design theme.
- Number – Customize the font style, size, and color of the counter number.
- Prefix – Tailor the typography of the prefix for consistency and emphasis.
- Suffix – Style the suffix text to complement the counter and overall design.
- Title – Modify the title’s typography to stand out or blend with your layout.
Spacing
These controls provide options to manage spacing around and within the counter, ensuring it fits seamlessly into your page layout.
- Below Number – Adjust the space below the counter number for clear separation.
- Around Number – Set the spacing around the number for balanced positioning.
- Wrapper – Control the overall margin around the counter wrapper for proper placement and alignment.
- Margin Top – Define the top margin of the counter wrapper.
- Margin Bottom – Set the bottom margin for spacing below the counter.
