🎯 Purpose
Use the Counter widget to display numeric statistics, milestone figures, or key data points in an engaging animated form—ideal for showcasing achievements, business stats, or campaign metrics.
🛠️ Content & Setup
Number & Prefix/Suffix
Define the numeric goal (e.g., “5000”) along with optional text before (e.g., “$”) or after (e.g., “+”) the number.
Duration (Animation Time)
Set how long, in seconds or milliseconds, the number animation runs as the user scrolls into view.
Start Value
Optionally choose where the animation begins (e.g., start from 0 or another number).
🎨 Style & Typography
Number & Text Look
Customize font style, size, color, weight, spacing, and decoration for both the numeric counter and its prefix/suffix.
Alignment & Placement
Choose whether the counter content is aligned left, center, or right.
Colors
Set different text colors for normal and hover states to add interactivity.
⚙️ Advanced Settings
Responsive Controls
Adjust typography, number size, and spacing for desktop, tablet, and mobile for consistent readability.
Container & Spacing
Control margin, padding, and positioning to integrate the counter smoothly into your layout.
Visual Effects
Add entrance animations or scroll-triggered motion to enhance viewing impact.
Use custom HTML attributes, CSS classes, and z-index for further styling or integration.
âś… Best Practices
Use clear, meaningful numbers that represent genuine milestones or data.
Pick animation durations that balance impact with readability (typically 1–3 seconds).
Choose typography and colors that match your brand’s style guidelines.
Ensure responsive readability—large enough to read but not overwhelming on mobile.
Consider pairing other widgets (like icons or headlines) to give context to the numbers.
The Counter widget is a dynamic and visually compelling way to display key statistics or progress figures—complete with styling, animation, and responsive control for seamless integration.
