13. Counter

In the ever-evolving digital space, every element on your website can contribute to the user experience and the overall perception of your brand. One such feature is the counter element, a popular tool often utilized to indicate how much has occurred, such as the number of units sold. In this article, we will walk you through how to use and customize the counter element effectively.

Standard Counters: From Start to Finish

To begin, drag and drop the counter element to your desired location. The counter settings offer options for both a start and end point, allowing you to demonstrate growth or progress. For instance, if your counter needs to reach a million, it may be beneficial to start from 500,000, ensuring a quicker transition to the end point.

The duration option determines how long the counter will take to complete its run. It's recommended to keep the duration at two seconds or less, particularly considering the quick scrolling habits of mobile users.

Advanced Features: Prefixes and Separators

Advanced settings allow you to customize the counter even further. A prefix can be added to denote specific units such as currency or quantities. Additionally, separators can be included to improve readability, particularly with larger numbers. You can choose from several options, including a full stop or comma after every three units.

Pie Chart Counters: Visualizing Percentages

For a different visual appeal, you might opt for pie chart counters. These express values as percentages and provide a fresh perspective on the data you're displaying.

Just as with standard counters, you can adjust the duration and utilize advanced settings such as prefixes and separators. A unique feature with pie chart counters is the ability to adjust the width of the chart either by entering a specific value or manually dragging the corners.

You can also change the colors of the chart to align with your brand aesthetics, adjusting both the background and progress colors. Additional options include adding a shadow and setting hover options for an interactive experience.

Ensuring Responsiveness

Regardless of the counter style you choose, always remember to preview how it appears on different devices, including tablets and mobiles. This ensures that the counter is not just visually appealing but also functional across all platforms.

In conclusion, the counter element is a dynamic feature that can enhance your website's user experience and provide valuable insights in an engaging way. Remember to adjust settings for optimal readability and mobile-friendliness, while also aligning the design with your brand's aesthetic.