How to Use the Counter Element

Die Toonbank element is a great way to display statistics, achievements, milestones, or dynamic values on your website. It automatically animates from a starting number to an ending number, making it eye-catching and interactive.

1. Voeg 'n teller by

1. Open the Elements Panel on the left.
2. Find Toonbank under "Basic Elements."
3. Click, hold, and drag it to your desired position on the page.

2. Configuring the Counter

Basic Settings

1. Click on the Counter to open the settings panel.
2. Set the starting value (e.g., 0 or 500,000).
3. Set the ending value (e.g., 1,000 or 1,000,000).
4. Adjust the duration (1–2 seconds is ideal for visibility).

3. Adding Prefix & Suffix

• If displaying currency, add a prefix (e.g., "$1000").
• For percentages, add a suffix (e.g., "80%").
• Adjust the thousand separator (comma, dot, or space).

4. Choosing a Counter Style

Standard Number Counter

• Displays a simple number animation from start to end.
• Works well for stats like sales, customers, downloads, etc.

Circular Progress Counter

• Displays a pie chart-style progress bar.
• Set the percentage (e.g., 65%) for progress-based visuals.
• Increase the progress width aan control thickness.

Line Progress Counter

• Displays a horizontal progress bar.
• Adjust the bar thickness and color for a modern look.

Pie Chart Counter

• Shows a circular graph without text.
• Change the background color en progress color for styling.

5. Styling & Customization

Size & Alignment

• Drag the handles to resize the counter manually.
• Gaan na Instellings → Adjust width & height in pixels or percentage.
• Align to left, center, or right based on your layout.

Color & Effects

• Change progress color, background color, en shadow effects.
• Enable hover effects to make it interactive.

6. Optimizing for Mobile & Tablet

• Check the counter display on tablet & mobile views.
• Resize & adjust alignment for better readability.
• Ensure the duration is not too long, so users see the effect before scrolling past.

Why Use the Counter Element?

Engaging & interactive way to display key statistics.

Customizable styles (number, progress bar, pie chart).

Dynamic animation grabs attention.

Perfect for milestones, stats, and achievements.

Die Toonbank element is a simple yet powerful tool to visually enhance your website with dynamic statistics.