• Overview
  • Adding Counter
  • Changing Counter Style
  • Count Animation

Counter Overview

The Counter Element allows you to add on the page an animated number that will be incremented from zero to the entered value once the site visitor scrolls to this element.

counter-overview.gif

Adding Counter

You can add the Cunter Element from the "Element" menu on the Top Bar. You can add a new Counter element to the existing Block or choose one of the current Block presets or Designs with Counter.

counter-add.png

Changing Counter Style

With the options available in the property panel, you can change the counter Alignment, Width, Margins.

counter-style-1.png

You can select the Counter to use one of the styles for Text and Headings that you have specified in the Theme settings or choose your own Font, Font Family, and other options available for the text.

counter-style-2.png

The Text Shadow option allows you to add a shadow to the numbers in the Counter, choose one of the available Presets or create your own using the Settings instruments for customizing the shadow.

counter-shadow.png

The standard CSS Class and Hide On Devices options are also available for the Counter Element in the property panel.

Count Animation

In the Count Animation section in the Property Panel, you can specify the Duration and Delay for the Counter. The Duration option controls how long the Counter will be incrementing numbers from zero to the chosen value.

The Delay option specifies the pause between the moment when the page is scrolled to the Counter control and the moment when it starts counting.

counter-animation.png

- Overview - Adding Counter - Changing Counter Style - Count Animation ## Counter Overview The Counter Element allows you to add on the page an animated number that will be incremented from zero to the entered value once the site visitor scrolls to this element. !counter-overview.gif! ## Adding Counter You can add the Cunter Element from the "Element" menu on the Top Bar. You can add a new Counter element to the existing Block or choose one of the current Block presets or Designs with Counter. !counter-add.png! ## Changing Counter Style With the options available in the property panel, you can change the counter Alignment, Width, Margins. !counter-style-1.png! You can select the Counter to use one of the styles for Text and Headings that you have specified in the Theme settings or choose your own Font, Font Family, and other options available for the text. !counter-style-2.png! The Text Shadow option allows you to add a shadow to the numbers in the Counter, choose one of the available Presets or create your own using the Settings instruments for customizing the shadow. !counter-shadow.png! The standard CSS Class and Hide On Devices options are also available for the Counter Element in the property panel. ## Count Animation In the Count Animation section in the Property Panel, you can specify the Duration and Delay for the Counter. The **Duration** option controls how long the Counter will be incrementing numbers from zero to the chosen value. The **Delay** option specifies the pause between the moment when the page is scrolled to the Counter control and the moment when it starts counting. !counter-animation.png! ##