The Counter Circles Element allows you to add animated counter circles anywhere on your site.
Step 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Counter Circles from the Elements List.
Step 4. The options on the right hand side are Parent Options, and affect the whole series of counter circles, while the individual counter circles are configured on the left hand side. With this element, there is only one main Parent Option, and that is to control when the counter circles starts to animate. The default is when the top of the element hits the bottom of the viewport, but you can choose from two other options as well. Make sure to view the Element Demo page, to fully appreciate the options on offer. One thing to note, is that if you want your counter circles to fill the width of the column they are in, make sure the number of columns equals the number of counter circles. If you have fewer, they won’t fill the column, and if you have more, they will display on a second row.
Step 5. Once you have set your Parent Options, you add Child Items on the left. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. This is where you add the content for the individual Counter Circles. These options allow you to style and populate the individual counter circles.
Step 6. Once you have added content to one counter circle, you can then set up other counter circles, either by duplicating existing ones, or creating new ones, by clicking on the Clone Item icon, or the + Counter Circle button respectively.
Step 7. Once you have completed adding your counter circles, save your changes.
Read below for a detailed description of all element options.