Submit a ticket My Tickets
Welcome
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 Site Builder → Edit School Site.

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

3. Click on +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.

You can edit the counters settings on the sideform.

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

Settings: Υou 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 percentage
  • Choose to show decimals


Note: Ιf 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


Click on play to preview the animation.

Note: 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 Sideform.

Did you find it helpful? Yes No

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