Counter Boxes Element

07/08/2019

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.

0
Wonderful Users & Counting
0
Support Tickets Resolved
0
Cups of Hot Coffee
View More Examples!

How To Use The Counter Boxes Element

The Counter Boxes Element allows you to add animated counters 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 Boxes’ element and click it to bring up its options window.

Step 4 – 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.

Step 5 – 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.

Step 7 – 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.

Step 8 – Once you have completed adding your counter boxes, click Save. You will be returned to the edit page. You can preview the page to view the counter boxes, 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 Boxes 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

  • Number of Columns – Set the number of columns per row. Choose from 1 – 6 columns.

  • Counter Box Title Font Color – Controls the color of the counter “value” and icon.

  • Counter Box Title Font Size – Controls the size of the counter ‘value’ and icon. Enter the font size without ‘px’ ex: 50.

  • Icon – Global setting for all counter boxes, this can be overridden individually. Click an icon to select, click again to deselect.

  • Counter Box Icon Size – Controls the size of the icon. Enter the font size without ‘px’. Default is 50.

  • Counter Box Icon Top – Controls the position of the icon. Choose from Default, No, or Yes.

  • Counter Box Body Font Color – Controls the color of the counter body text.

  • Counter Box Body Font Size – Controls the size of the counter body text. Enter the font size without ‘px’ ex: 13.

  • Counter Box Border Color – Controls the color of the border. Default value is otherwise selected.

  • Offset of Animation – Controls when the animation should start. Choose from Default, 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 Box Button –  Allows you to add a new Counter Box.

View The Options Screen

Child Options

  • Counter Value – The number to which the counter will animate. Decimal numbers are supported by using the “.” (period) delimiter.

  • Delimiter Digit – Insert a delimiter digit for better readability. ex: ,

  • Counter Box Unit – Insert a unit for the counter. ex %.

  • Unit Position – Choose the positioning of the unit. Choose from After Counter, or Before Counter.

  • Icon – Click an icon to select, click again to deselect.

  • Counter Direction – Choose count up or down.

  • Counter Box Text – Insert text for counter box.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Counter Boxes 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 Boxes Speed – Controls the speed of the counter boxes elements. ex: 1000 = 1 second.

  • Counter Boxes Title Font Color – Controls the color of the counter values and icons.

  • Counter Boxes Title Font Size – Controls the size of the counter value and icon. Enter value including any valid CSS unit, ex: 50px.

  • Counter Boxes Icon Size – Controls the size of the icon. Enter value including any valid CSS unit, ex: 50px.

  • Counter Boxes Body Font Color – Controls the color of the counter boxes body text.

  • Counter Boxes Body Font Size – Controls the size of the counter boxes body text. Enter value including any valid CSS unit, ex: 13px.

  • Counter Boxes Border Color – Controls the color of the counter boxes border.

  • Counter Boxes Icon On Top – Turn on to display the icon on top of the counter value.

View The Options Screen

Counter Boxes Element Parameters

Copy to Clipboard

Parent Settings

  • columns – Can be one of these values: 1, 2, 3, 4, 5 or 6. Sets the number of columns per row.

  • color – Accepts a hexcode ( #000000 ). Sets the color of the counter value and icon. Leave blank for Theme Options default value.

  • title_size –  Accepts a pixel value. For example, 20px. Sets the title font size.

  • icon – A font awesome icon value. For example, fa-glass.
  • icon_size – Accepts a pixel value. For example, 5px. Sets the size of the icon.

  • icon_top – Can be one of these values: default, no or yes. Sets the position of the icon.

  • body_color – Accepts a hexcode ( #000000 ). Sets the body’s font color.

  • body_size – Accepts a pixel value. For example, 5px. Sets the font size of the counter body text.

  • border_color – Accepts a hexcode ( #000000 ). Sets the color of the counter box border. Leave blank for Theme Option selection.

  • animation_offset – Can be one of these values: default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.

  • element visibility – Choose to show or hide the element on small, medium or large screens. Show them on all, or just some, giving you full control over all screen sizes. Each screen size also has a custom width setting in Fusion Theme Options.

  • 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 number to which the counter will animate to.

  • delimiter – Accepts a symbol. For example, , (comma) or . (period). Sets a delimiter digit for better readability.

  • unit – Accepts a symbol. For example, %. Sets the unit for the counter.

  • unit_pos – Can be one of these values: prefix or suffix. Sets the unit’s position.

  • icon – A font awesome icon value. For example, fa-glass.

  • direction – Can be one of these values: up or down. Sets the counter direction.

  • custom content – Insert the Counter Box’s content between the

    Copy to Clipboard
    tags.