Content Controls
Counter
Within this section, you can set the parameters for the numerical values the circle counter will display. This includes the actual value, the maximum possible value, and any text or symbols you’d like to appear before or after the number itself.
- Value – Set the number that the counter displays.
- Max Value – Establish the highest number that the counter can reach.
- Prefix – Choose text or symbols to display before the number (e.g., currency symbols, a hashtag, etc.).
- Suffix – Choose text or symbols to display after the number (e.g., “%”, “K”, etc.).
Design Controls
Size
This section lets you adjust the overall size of the circle counter, the padding inside the circle, and the thickness of the progress and background bars, providing control over how the counter looks and feels on your page.
- Size – Alter the overall diameter of the circle counter.
- Padding – Adjust the space between the number and the circle’s edge.
- Progress Bar – Control the thickness of the circular bar that shows progress.
- Background Bar – Modify the thickness of the circle’s background bar, which sits behind the progress bar.
Style
Customize the aesthetic elements of your circle counter here. Change the circle’s position, style the progress bar, and even add a gradient or solid color. Certain options only become available depending on previous selections, allowing for a personalized and dynamic design experience.
- Value Position – Decide whether the number sits inside or outside the circle.
- Space Above – Add extra space above the circle counter. Note: This control is only available when the Value Position is set to “outside”.
- Line Cap – Choose the style of the progress bar’s ends (e.g., flat, round).
- Background – Select a color for the circle’s backdrop.
- Background Bar – Pick a color for the background bar within the circle.
- Bar Style – Choose between a solid color or gradient for the progress bar.
- Gradient – If you’ve opted for a gradient, select the start and end colors here. Note: This control is only available when Bar Style is set to “gradient”.
- Start – Choose the initial color of your gradient.
- End – Decide the final color of your gradient.
- Color – If a solid color is more your style, choose that here. Note: This control is only available when Bar Style is set to “color”.
- Progress Bar – Select a color for the progress bar.
Typography
Here, you can manipulate the text style within your circle counter. Customize the font, size, and formatting for the value, prefix, and suffix to match your site’s branding and aesthetic.
- Value – Adjust the typography of the number displayed by the counter.
- Prefix – Customize the typography of any text or symbols that appear before the number.
- Suffix – Tweak the typography of any text or symbols that appear after the number.
Spacing
Control the circle counter’s placement on the page by modifying the space above and below the element, ensuring it integrates smoothly with other page content.
- Margin Top – Set the amount of space between the circle counter and the elements above it.
- Margin Bottom – Define the distance between the circle counter and the elements below it.
