Counter Boxes Element
The Counter Boxes Element shows key figures as numbers that count up (or down) when they scroll into view, each with a short line of text below. Typical uses are years in business, projects completed, customers served or a satisfaction rate.
Every counter can have a unit such as % or + before or after the number, a thousands delimiter for large values, and an icon. The boxes sit side by side in up to six columns and share one set of colors and font sizes.
In this article: How To Use · Element Options · Counter Box Options · Tips · Related Elements · Example
How To Use The Counter Boxes Element
Add the Counter Boxes Element to a column and add one Counter Box per figure. In each box enter the Counter Value, an optional Delimiter Digit (for example a comma for 12,500), a Counter Box Unit with its Unit Position, and the Counter Box Text shown under the number.
On the parent element set the Number of Columns; leave it empty to place all boxes in one row, up to six. The value and icon share the Counter Box Value Font Color; font sizes are set with Counter Box Value Font Size and Counter Box Body Font Size. An Icon chosen here is shown in every box without its own icon, and Counter Box Icon Top places it above the number instead of beside it.
The counting starts when the box comes into view; Offset of Animation sets exactly when. Count Up runs from zero to the value, Count Down from the value to zero. Decimal values work with a period, for example 4.8; the counter keeps the same number of decimals while it runs.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Counter Boxes. Change them there to style every Counter Boxes at once.
General
| Heading | Description |
|---|---|
| Content | Enter some content for this counter box. |
| Number of Columns | Set the number of columns per row. |
| Counter Box Value Font Color | Controls the color of the counter ‘value’ and icon. |
| Counter Box Value Font Size | Controls the size of the counter ‘value’. Enter the font size without ‘px’ for example 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. |
| 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’ for example 13. |
| Counter Box Border Color | Controls the color of the border. |
| Offset of Animation | Controls when the animation should start. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Counter Box Options
Each Counter Box holds one figure: its value, delimiter, unit, count direction, an optional icon of its own and the text below the number.
General
| Heading | Description |
|---|---|
| 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. for example ,. |
| Counter Box Unit | Insert a unit for the counter. ex %. |
| Unit Position | Choose the positioning of the unit. |
| Icon | Click an icon to select, click again to deselect. |
| Counter Direction | Choose to count up or down. |
| Counter Box Text | Insert text for counter box. |
Tips
- With Count Up the number in the page source is zero until the animation runs. If a figure matters for search engines, repeat it in the Counter Box Text or in nearby text.
- Keep the text under each number to a few words. The number is the message.
- Use the same unit style in every box, for example all with + or all without, so the row reads evenly.
- The counting speed is the same for all counter boxes on the site and is set with Counter Boxes Speed in the Global Options section Counter Boxes.