|

Counter widget

The Counter widget in UAE Lite helps you display numerical data with an engaging animated count effect. It is ideal for showing achievements, user counts, milestones, or any metric that benefits from a smooth rising number.

How to Use the Counter Widget

Step 1: Add the Widget

  1. Open your page in the Elementor editor.
  2. Look for the Counter widget in the UAE Lite panel.
  3. Drag it into your chosen section.

Step 2: Set Up Content
Open the Content tab to configure what the counter will show.

General

  • Title: The label that appears above or beside the animated number.
  • Title HTML Tag: Choose the semantic heading tag such as H1 or H2.
  • Start: The starting value for the count animation.
  • End: The final value the counter will reach.
  • Before Number: Add custom text that appears before the number like a currency symbol.
  • After Number: Add text that appears after the number such as a unit or suffix.
  • Digit Separator: Choose how large numbers are formatted, for example with a comma.
  • Counter Speed (seconds): Set how long the animation takes from start to finish.

Step 3: Style the Widget
Switch to the Style tab to control the appearance.

Title

  • Position: Set the placement of the title relative to the number.
  • Horizontal Alignment: Choose left, center or right alignment.
  • Gap: Adjust spacing between the title and the number.
  • Typography: Customize font, weight and size.
  • Color: Choose a color for the title text.
  • Margin: Define external spacing around the title.

Number

  • Position: Align the animated value horizontally.
  • Text Color: Select a color for the number.
  • Typography: Adjust font settings to match your design.

Step 4: Responsive Adjustments
Use Elementor’s device options to fine tune font sizes, spacing and alignment so the counter looks neat on tablet and mobile views.

Use Cases

  • Highlight total users, downloads or orders.
  • Display key performance metrics on landing pages.
  • Present milestone achievements in statistics sections.
  • Show real time or seasonal figures for marketing content.

Tips

  • Keep titles short so the number remains the focal point.
  • Use separators for large values to maintain readability.
  • Pair multiple counters in a grid to create a clean statistics section.
Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

On this page
Scroll to Top