Counter Boxes Element

Last Update: March 30, 2024

Avada includes multiple animated counter elements, including the Counter Boxes Element. These are great for displaying varying types of data and content to your viewers. The counter boxes include several options for easy customization, and they are a great way to display content and attract the viewers eyes as they animate into the screen viewport. Read below to discover more about this useful little element.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Counter Boxes Element

The Counter Boxes Element allows you to add animated counters anywhere on your site. Just add the Element to your desired column.

The options on the right hand side are Parent Options, which are largely styling options, and affect the whole series of counter boxes, while the individual counter boxes are configured on the left hand side. Make sure to view the Element Demo page, to fully appreciate the options on offer. If you want your counter boxes to fill the width of the column they are in, make sure the number of columns equals the number of counter boxes. If you have fewer, they won’t fill the column, and if you have more, they will display on a second row.

Once you have set all 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 Boxes. The initial option is the Counter Value, plus there are options for Delimiters, Units, Unit Position, Icon, Counter Direction, and the Counter Box Text.

Once you have added content to one counter box, you can then set up other counter boxes, either by duplicating existing ones or creating new ones, by clicking on the Clone Item icon, or the + Counter Box button respectively.

Read below for a detailed description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in the Options > Avada Builder Elements > Counter Boxes 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.

Counter Box Options

HeadingDescription
Counter ValueThe number to which the counter will animate. Decimal numbers are supported by using the "." (period) delimiter.
Delimiter DigitInsert a delimiter digit for better readability. ex: ,
Counter Box UnitInsert a unit for the counter. ex %
Unit PositionChoose the positioning of the unit.
IconClick an icon to select, click again to deselect.
Counter DirectionChoose to count up or down.
Counter Box TextInsert text for counter box.

Counter Boxes Options

HeadingDescription
Number of ColumnsSet the number of columns per row.
Counter Box Value Font ColorControls the color of the counter 'value' and icon.
Counter Box Value Font SizeControls the size of the counter 'value'. Enter the font size without 'px' ex: 50.
IconGlobal setting for all counter boxes, this can be overridden individually. Click an icon to select, click again to deselect.
Counter Box Icon SizeControls the size of the icon. Enter the font size without 'px'. Default is 50.
Counter Box Icon TopControls the position of the icon.
Counter Box Body Font ColorControls the color of the counter body text.
Counter Box Body Font SizeControls the size of the counter body text. Enter the font size without 'px' ex: 13.
Counter Box Border ColorControls the color of the border.
Offset of AnimationControls when the animation should start.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

In this article