In the Customizer, click on the + sign on the right side of the screen, and a panel will open with the elements list.
You will find the Counters component in the Components list. To add this element in the web page, simply drag-and-drop the “Counters” element to the page in preview mode.
Once added, the Counters component will have a corresponding customization panel, on the left hand side of the screen.
From there, you have the possibility to edit the three main tabs of your component: Content, Style and Advanced.
Content
The Content tab contains the counter properties, which are :
- Counter type ( which can be number, circle or bar )
- Title
- Title position ( which can be above or under the counter)
- Show icon (which displays an icon you can set from the icon library in front of your counter number)
- Start counter
- Final counter
- Before number
- After number
- Animation duration
- Horizontal align
Style
The Style tab contains the following options:
- Presets
- Title
- Counter
- Icon
In the Presets tab, you can set from one of the predefined presets for your counters.
In the Title tab, you can change the following options:
- Horizontal align
- Color text
- Typography
The next tab is the Counter, where you can also change the color text and typography.
The Icon tab consists of the following options available for your icon:
- Icon color
- Icon size
- Icon spacing
Advanced
In the Advanced tab, you have the more advanced options for your component, which consists of:
- Background
- Spacing
- Border
- Admin
- Typography
- Responsive
- Manage styles
