help center

Search
Close this search box.
On this page

Counter widget

Last Update: April 14, 2024

The Counter Widget enables you to add an animated numbered counter to your page.


Content

Counter

Content tab Counter widget 1
  1. Starting Number: Set the starting number of the counter.
  2. Ending Number: Set the ending number of the counter.
  3. Number Prefix: Enter text to appear before the number, if any, such as a dollar sign.
  4. Number Suffix: Enter text to appear after the number, if any, such as a plus sign.
  5. Animation Duration: The time in milliseconds for the running animation to complete.
  6. Thousand Separator: Show or hide the thousands separator.
  7. Separator: Select default, dot, or space for the thousand separator character.
  8. Title: Type the title that will appear below the number.
  9. Title HTML tag: Choose the HTML tag for your heading. Choices include H1 to H6, div (default), span, or p (paragraph).

Style

Counter

Style Counter tab Counter widget 3
  1. Title Position: Place the title above, below, right of or left of the number on the counter.
  2. Title Horizontal Alignment: Place the title on the right, left or center of the Counter widget.
  3. Title Gap: Determine the space between the title of the counter and the number on the counter.
    Note
    This above options will not appear if there is no title.
  4. Number Position: Place the number on the counter to the right, left or center of the Counter widget. There is also a stretch option which will affect the spacing if you use a Number prefix or suffix. These options are found in the Content tab.

Number

Style Number tab Counter widget 5
  1. Text Color: Choose the color of the number text.
  2. Typography: Set the typography options for the number text.
  3. Text Stroke: Color the outline of your text and images. Learn more about text stroke.
  4. Text Shadow: Add depth to the text. For more details, see, What is Shadow?

Title

Note
This section will not appear if there is no title.
Style title tab Counter widget 7
  1. Text Color: Choose the color of the title text.
  2. Typography: Set the typography options for the title text.
  3. Text Stroke: Color the outline of your text and images. Learn more about text stroke.
  4. Text Shadow: Apply a shadow using color, blur, and offset options. For more details, see, What is Shadow?

Advanced

Advanced tab Counter widget 9

Set the Advanced options that are applicable to this widget


Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!