Counters

Inserting counters in your page consist of two steps.

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

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.

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;
}