Loading...
Counter Box2018-10-26T01:05:44+00:00

Counter Boxes Element

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 Element includes 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.

0
Wonderful Users & Counting
0
Support Tickets Resolved
0
Cups of Hot Coffee

Control all text styles

Counter boxes allow you to control every color needed from borders, to title and body text and also font awesome icons. In addition, you can also control the sizes of fonts and icons.

0
WONDERFUL USERS & COUNTING
0
CUPS OF COFFEE
0
Support Threads Resolved
0
Hours of Development

Font Awesome Icons

Each counter box instance can display a font awesome icon with the content.

0
Hours of Development
0+ Vector Icons
Use Any of The Font Awesome Icons
0
Cups of Coffee
0
Wonderful Users & Counting
0
Support Threads Resolved
0
Hours of Development

Unit Control

Each counter box instance can have a different unit and unit position.

$0
Use Any Symbol Or Text For The Unit
0%
Use Any Symbol Or Text For The Unit
0lbs
Use Any Symbol Or Text For The Unit

Count Up or Down

Each counter box can have the animation number start up or down.

0
This Counts Up
13000
This Counts Down

Border Control

Each counter box instance can display a border around the box, also you can change the border color.

0
This Counter Box Displays A Border
0
This Counter Box Displays No Border

Mobile Visibility Settings

Our mobile visibility system gives you full control over what displays based on 3 customizable screen sizes. Every Fusion Builder Element has these settings and they allow you to show or hide elements on various screen sizes. In addition, you can choose what those screen sizes are! This gives you maximum control to set the exact point when an element should show or hide. Resize the page to see the elements appear or disappear based on what we set.

Only Show on Desktop

Only Show on Tablet

Only Show on Mobile

Complete Set of Options

Every option and description included with the Counter Boxes Element is listed below.

  • 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 Option selection.
  • title_size – Accepts a pixel value. For example, 20px. Sets the title’s font size.
  • 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 color of the counter body text. Leave blank for Theme Option selection.
  • 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.
  • 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.
  • element visibility – Choose to show or hide the element on small, medium or large screens. Show them on all, or just some, givine 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. Please refer to this documentation section.
  • id – Add a custom id to the wrapping HTML element for further css customization. Please refer to this documentation section.

Join The 450,000+ Satisfied Avada Users!

BUY AVADA NOW!

Sliding Bar Section For Widgets

This is the sliding section that can be enabled or disabled on any demo. You can insert anywhere from 1-6 columns along with any widget that comes with Avada, WordPress or additional 3rd party plugins. It's perfect for placing additional information on your site.

Recent Works

Contact Info

12345 North Street, New York City, NY 555555

Phone: 1-800-555-5555

Mobile: 1-234-567-8910

Fax: 1-234-879-5641

Web: http://yourwebsite.com