Counter Circles Element

07/08/2019

Avada includes multiple animated counter elements, including the Counter Circles Element. These are great for displaying varying types of data to your viewers. The Counter Circles have several options that allow you to easily customize them to fit your needs. Whether it’s sales percentages, skill levels, promotional levels or other data sets, the Counter Circle Element is a great way to visually attract the viewer’s attention and display content. Read below to discover more about this useful little element.

96%
of users
Avada

How To Use The Counter Circles Element

The Counter Circles Element allows you to add animated counter circles anywhere on your site.

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Counter Circles’ element and click it to bring up its options window.

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 7 – 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 8 – Once you have completed adding your counter circles, click Save. You will be returned to the edit page. You can preview the page to view the counter circles, and you can always edit the element again to make changes.

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Counter Cricles Element section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Parent Options

  • Offset of Animation – Controls when the animation should start. Choose between Top of Element hits bottom of viewport, Top of Element hits middle of viewport, or Bottom of element enters viewport.

  • Element Visibility – Allows you to control the element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Add a custom class to the wrapping HTML element for further css customization.

  • CSS ID – Add a custom id to the wrapping HTML element for further css customization.

Add / Edit Settings

  • Add / Edit Items – This is where all your child element’s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.

  • Edit Item Icon – Allows you to edit an item.

  • Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.

  • Delete Item Icon –  Allows you to delete an item.

  • Re-order Feature –  Allows you to drag and drop the item to your desired order to rearrange them.

  • Add New Counter Circle Button –  Allows you to add a new Counter Circle.

View The Options Screen

Child Options

  • Filled Area Percentage – From 1% to 100%.

  • Filled Color – Controls the color of the filled in area.

  • Unfilled Color – Controls the color of the unfilled in area.

  • Size of the Counter – Insert size of the counter in px. ex: 220.

  • Show Scales – Choose to show a scale around circles. Choose Yes, or No.

  • Countdown – Choose to let the circle filling move counter clockwise.Choose Yes, or No.

  • Animation Speed – Insert animation speed in milliseconds.

  • Counter Circle Text – Insert text for counter circle box. It’s a good idea to keep it short.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Counter Circles Element

The Avada Advanced Options Network gives you amazing flexibility with additional Global Element Options that allows you to control individual Element default settings.

  •  Counter Circle Filled Color – Controls the color of the filled circle.

  • Counter Circle Unfilled Color – Controls the color of the unfilled circle.

View The Options Screen

Counter Circles Element Parameters

Copy to Clipboard

Parent Settings

  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization.

  • id – Add a custom id to the wrapping HTML element for further css customization.

Child Settings

    • value – Accepts a numerical value. For example, 100. Sets the value the counter will count up or down to.
    • filledcolor – Accepts a hexcode ( #000000 ). Sets the filled area’s color.
    • unfilledcolor – Accepts a hexcode ( #000000 ). Sets the unfilled area’s color.
    • size – Accepts a numerical value. For example, 220. Set the circle’s size.
    • scales – Choose from yes, or no. Show or hide the scale around the circle.
    • countdown – Choose from yes, or no. Select yes to animate the fill animation counter clockwise. Select no to animate it clockwise.
    • speed – Accepts a numerical value. For example, 1500. Set how fast the fill animation animates.
    • custom content – Insert the counter circle’s content between the
      Copy to Clipboard

      tags.