Getting StartedTheme Options Page OptionsPost TypesElementorWPBakeryTemplates BuilderExtrasDynamic Content How To
TheGem Documentation
General Elements
Counters

Counters

Inserting counters in your page consist of two steps.

1

STEP

Select “Counter box” shortcode from the shortcode list. Counter box will be immediately added to your page

Additionally you can make general settings for your counter:

Style: choose the style for displaying your counter.TheGem comes with two horizontal counter styles and one vertical

Columns: for horizontal counters. Here you can choose number of columns in one row

Lazy loading enabled: here you can activate lazy loading animation for your counters

Number format: select the format for displaying your numbers in counter

For Vertical Counters

Vertical counters look like this:

You can make following settings:

Connector color: select the color for vertical connector

Team Person: here you can select a team person to be displayed above. If „none“, team member box will not be displayed.

2

STEP

Now click on “+” symbol on the added counter box. And then click on “Counter” shortcode

You will get following settings dialog:

From: starting number to start counting animation, for example 0

To: final number to finish counting animation, for example 100

Text: title to be displayed under the number

Suffix: you can use it to display some symbol or unit for the numbers

Background Color: select background color for your counter element

Numbers Color: select font color for numbers

Text Color: select font color for title / text

URL (Link): you can link one counter element by defining a link here

To set some icon for your counter element, click on „Icon“ Tab above:

Here you have all same settings as in „Icon“  shortcode (explained above)


Useful CSS

Fonts, colors:

.gem-counter .odometer.odometer-auto-theme {

font-size: 33px;

font-weight: 100;

color: #eeeeee;

}

.gem-counter span.gem-counter-suffix {

font-size: 22px;

font-weight: 100;

display: block;

color: #eeeeee;

}

.gem-counter-text.styled-subtitle {

font-size: 14px;

font-weight: 100;

color: #eeeeee;

}

You can modify this css and insert it in Theme Options -> Custom CSS to apply on all counters:

To apply this custom CSS on a single content element only, use the "Extra class name" field in this element in WPBakery:

The example of the css selector for the "custom-counter" class name in this case:

.custom-counter .gem-counter .odometer.odometer-auto-theme {

font-size: 33px;

font-weight: 100;

color: #eeeeee;

}