V4 Elements Counter Estimated reading: 5 minutes 7 views Show a number that counts up when it scrolls into view. Great for stats like happy clients, projects done or satisfaction rate. No code needed. WIDGET Counter PARTS Prefix, Number, Suffix PLAN Free BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons before you start. Note: In the screenshots, the orange boxes and numbers show you where to click or what to check. STEP 1 Enable the Widget The Counter is on by default. If it is off, turn it on from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under General Widgets, turn on Counter. Click Save Settings. The Counter widget in the dashboard (click to zoom) STEP 2 Add the Counter Add the Counter to your page and look at its parts. Open your page with the Elementor Editor. Click the + button at the top to open the Elements panel. Under AAE General, find Counter. Drag it onto your page. Open the Structure panel. You see three parts inside the Counter: Prefix, Number and Suffix. The Counter in the Elements panel (click to zoom) Prefix, Number and Suffix (click to zoom) Tip: A new Counter shows 50 +. Prefix is empty, Number is 50 and Suffix is +. STEP 3 Set the Number The Number part is the number the counter stops at. Type your own value into it. Select the Number part. Click it on the page or in the Structure panel. In the General tab, open Content. Type the final number in Paragraph, for example 1,250. Type the final number in the Number part (click to zoom) Tip: The counter keeps the shape you type. 1,250 counts with a comma. 99.5 counts with one decimal. STEP 4 Set Start and Duration Choose where the counter starts and how long it takes. Select the Counter. Click it in the Structure panel. In the General tab, open the Counter section. Set Start Number, for example 0. Set Duration (ms). 2000 is 2 seconds. Click Update to save your page. Start Number and Duration (click to zoom) STEP 5 Add a Prefix or Suffix Use the Prefix and Suffix parts for symbols like $, % or +. Select the Prefix or the Suffix part. Type your text in Paragraph, for example $ or %. Leave it empty if you do not need it. STEP 6 Style the Counter Select the Counter and open the Style tab. Typography here changes all three parts together. Open the Typography section. Change Font family, Font weight, Font size or Text color. To style one part only, select that part and use its own Style tab. Typography changes all three parts (click to zoom) Tip: The default look is 48px, bold, color #0C0D0E. Prefix, Number and Suffix sit on one line. SETTINGS Options Start Number Default: 0The number the counter starts from. Set it above 0 to count from a higher number. Duration (ms) Default: 2000How long the count takes, in milliseconds. From 100 to 10000. Number (part) Default: 50The text of the Number part. This is the final value. Prefix (part) Default: emptyText before the number. Suffix (part) Default: +Text after the number. ID Optional CSS ID for the Counter. RESULT Final Result Four counters on a live page. They start counting when they scroll into view, and stop at the number you typed. Four counters counting up on the live page 50 + Default settings. Starts at 0, takes 2 seconds. $ 1,250 Prefix is $ and Number is 1,250. Takes 2.5 seconds, with a comma while it counts. 99.5 % Number is 99.5 and Suffix is %. Keeps one decimal. 500 + Start Number is 100 and Duration is 4000. It counts from 100 up to 500. GOOD TO KNOW More Details When it starts On your live page, the count starts once, when about a third of the Counter is on screen. In the editor The count plays again each time you change something, so you can see the effect while you build. Reduced motion If a visitor has reduced motion turned on in their system, the counter shows the final number at once. Same start and end If Start Number is the same as the Number, there is nothing to count, so it just shows the number. Numbers only The Number part must be a number. Spaces and commas are fine, for example 1,250. HELP Troubleshooting I do not see the Counter in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Counter. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. The counter does not move Check that Start Number is not the same as the Number. Also check that the Number part has a real number in it, and not text. It stops at the wrong number The counter stops at whatever is typed in the Number part. Select that part and fix the value. The counter starts before I scroll to it On a live page, it starts when it is on screen. If it is at the top of the page, it starts right away. I want a bigger or colored number Select the Counter, open the Style tab, then Typography. Change Font size and Text color. You Did It Your page now has a number that counts up. If you face any problem, please contact our support team. We are happy to help.
