Submit a ticket My Tickets
Login  Sign up
Open navigation

How to Add and Customize Animated Counters Widget/Section

Add an animated numeric or circle counter to your school's pages to showcase relevant data to your site visitors. To add an animated counter widget to any section of your pages:

1. Go to Website → Design →  Edit Website.

2. Choose the page you want to edit from the Pages Manager.

3. Click on the +Add section if you prefer having the event displayed in a whole section, or the +icon/Add Widget if you want to add it as a widget as part of a section.

You can choose between two styles, a circular counter, and a simple numeric counter. To edit any of the Counter elements of that template, click on Edit Counter and you can edit the counters settings on the sideform.

Appearance: Here you can alter the appearance of your widget.

Settings: You can:

  • Add a Starting Value
  • Add an Ending value
  • Set a Max value
  • Add a Number prefix
  • Add a Number suffix
  • Choose to convert to a percentage
  • Choose to show decimals

If you activate the Convert to percentage option, the Number suffix is automatically set to "%".

Additional appearance settings for circular counter widgets: You can alter the settings of the appearance of your counter widget.

  • Circle's size
  • Circle's thickness
  • Bar color
  • Background color

Animation: You can change the settings of the animations for the counter widget.

  • Animations easing
  • Animations duration
  • Choose to only animate the circle 
  • Replay the animation on scroll

If you want to preview your animation, don't forget to click on play.

After adding a section to your page, you may want to make alterations to the section's general settings, actions, and layout settings in the editing Sideform.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.