Counters
Inserting counters in your page consist of two steps.
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.
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;
}