Stat Counter widget

The Stat Counter widget lets you highlight important numbers, metrics, achievements, or key results in a visually prominent way.

Each stat can include a number, prefix, suffix, and label, and the widget includes several different layouts for presenting the information.

It works particularly well for displaying:

  • Customer numbers
  • Projects completed
  • Satisfaction rates
  • Revenue or sales figures
  • Years of experience
  • Members or subscribers
  • Performance metrics
  • Other key statistics

You can also animate the numbers when they enter the visitor's view, making the values count up to their final result.

Stats

The main Settings view contains all statistics currently included in the widget.

From here, you can:

  • Add stats
  • Edit existing stats
  • Reorder stats
  • Delete stats

Add a stat

Click Add to create another statistic.

Reorder stats

Use the drag handle next to a stat to change its position.

The order shown in the settings determines the order in which the statistics appear on the page.

Edit a stat

Click the settings icon next to a stat to edit its number and supporting information.

Delete a stat

Click the trash icon to remove it.

💡 Tip

Keep the number of statistics focused. A few strong metrics are usually easier to understand and more convincing than a large collection of numbers competing for attention.

Stat content

Each statistic contains four fields that together determine what is displayed.

Number

Enter the numerical value you want to display.

For example:

10000  

The number itself should be entered without additional symbols or explanatory text.

Prefix

Use Prefix to add text or a symbol before the number.

For example:

  • $  
  • €  
  • SEK  
  • ≈  

A prefix is optional.

Suffix

Use Suffix to add text or a symbol after the number.

For example:

  • +  
  • %  
  • k  
  • M  
  • years  

For example, entering:

  • Number: 10000  
  • Suffix: +  

displays:

10,000+  

Label

Use Label to explain what the number represents.

For example:

Happy Customers  

Other examples could include:

  • Projects Delivered
  • Satisfaction Rate
  • Active Members
  • Years of Experience
  • Courses Sold

Keep the label short enough to be understood at a glance.

💡 Tip

The number should attract attention, while the label explains its meaning. Avoid putting the full message into the number itself when it can be communicated more clearly through the label.

Layout

The Layout setting controls the visual style used to present the statistics.

Available layouts include:

  • Minimal
  • Radial Ring
  • Spotlight
  • Editorial Index
  • Neon Glow
  • Gradient Number

Each layout uses the same underlying stats but presents them differently.

Minimal

Uses a clean and simple presentation with minimal decorative styling.

This works well when the numbers should fit naturally into a restrained or content-focused page design.

Radial Ring

Uses a circular or ring-based visual treatment around the statistic.

This can work particularly well for percentages, scores, progress-style metrics, or individual KPIs.

Spotlight

Gives each statistic stronger visual emphasis.

Use this when the numbers should become a prominent design element rather than simply supporting the surrounding content.

Editorial Index

Uses a more editorial, structured presentation.

This can work well for brand storytelling, reports, achievements, or pages with a more typography-led design.

Neon Glow

Uses a more expressive glow-style visual treatment.

This is suitable when the page design calls for a stronger, more stylized presentation.

Gradient Number

Applies a gradient effect to the displayed numbers.

This makes the numerical values particularly prominent while keeping the supporting labels more understated.

💡 Tip

Choose the layout based on the surrounding page rather than treating each statistic as an isolated design element. The stats should reinforce the visual style of the section they appear in.

Typography

The Styling settings let you control how the numbers and labels are displayed.

Text Font Family

Controls the font family used throughout the widget.

For consistency, it is usually best to use typography that matches the rest of your website.

Number Size

Controls the size of the numerical values.

Larger numbers create stronger visual emphasis.

The ideal size depends on:

  • Selected layout
  • Number of stats
  • Length of the values
  • Available page width

Label Size

Controls the font size of the supporting labels.

Labels should normally be noticeably smaller than the numbers so the visual hierarchy remains clear.

💡 Tip

The stat should be readable in this order: number first, meaning second. If the label becomes as visually dominant as the number, reduce the label size or increase the number size.

Colors

You can customize several colors used by the widget.

Number Color

Controls the color of the main numerical values.

Label Color

Controls the color of the supporting labels.

Choose a color with sufficient contrast against the surrounding background.

Accent Color

Controls accent elements used by layouts that include additional decorative styling.

Depending on the selected layout, the accent color may be used for elements such as:

  • Rings
  • Highlights
  • Gradient or glow effects
  • Decorative details

For consistency, use colors from your website's Global Colors whenever possible.

Dividers

Enable Show Dividers to display separators between individual statistics where supported by the selected layout.

Dividers can help visually separate stats when several are displayed next to each other.

Divider Color

Controls the color of the dividers.

A subtle color usually works best, as the divider should separate the content without drawing more attention than the statistics themselves.

Number formatting

Thousands Separator

Enable Thousands Separator to automatically format larger values for easier reading.

For example:

10000  

can be displayed as:

10,000  

This is particularly useful for larger customer counts, revenue figures, or other multi-digit values.

💡 Tip

Enable the thousands separator for large numbers unless there is a specific reason not to. 10,000   is considerably easier to read at a glance than 10000  .

Count animation

The Stat Counter can animate numbers as visitors scroll to the section.

Animate on Scroll

Enable Animate on Scroll to start the counting animation when the widget enters the visitor's view.

Instead of immediately showing the final number, the value counts up until it reaches the configured result.

For example:

0 → 10,000  

Count Duration

Controls how long the count-up animation takes.

The value is measured in milliseconds (ms).

For example:

2000ms  

means the animation takes approximately two seconds to reach the final value.

  • Lower value = faster count
  • Higher value = slower count

💡 Tip

Keep the count animation relatively quick. Visitors should notice the movement without having to wait for the final number to appear.

Common use cases

The Stat Counter widget works particularly well for:

  • Customer counts
  • Member numbers
  • Projects delivered
  • Satisfaction rates
  • Review scores
  • Sales figures
  • Revenue milestones
  • Years of experience
  • Courses completed
  • Countries served
  • Business achievements
  • Performance metrics
  • Conversion or success rates

Best practices

  • Focus on metrics that are genuinely meaningful to visitors
  • Use short labels
  • Use prefixes and suffixes instead of including symbols inside the number
  • Enable Thousands Separator for large values
  • Keep number formatting consistent across all stats
  • Make the numbers visually more prominent than the labels
  • Avoid displaying too many stats in one section
  • Choose one layout that fits the surrounding page design
  • Use accent colors consistently
  • Keep count animations relatively short
  • Check long numbers and labels on both desktop and mobile
  • Use accurate and supportable statistics

💡 Tip

Strong stats answer a meaningful question for the visitor. Instead of adding numbers simply because they look impressive, prioritize metrics that demonstrate experience, scale, results, or trust.

Summary

  • The Stat Counter widget highlights important numbers and metrics
  • Add, edit, reorder, or remove individual statistics
  • Each stat can include a number, prefix, suffix, and label
  • Choose between Minimal, Radial Ring, Spotlight, Editorial Index, Neon Glow, and Gradient Number layouts
  • Customize font, number size, label size, and colors
  • Add optional dividers between stats
  • Use Thousands Separator to format large numbers
  • Enable Animate on Scroll to count values up when they enter the viewport
  • Control the animation speed using Count Duration

Used well, the Stat Counter widget provides a quick and visually engaging way to communicate important achievements, results, and proof points.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.