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