Article sections

    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.


    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


    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


    In the Advanced tab, you have the more advanced options for your component, which consists of:

    • Background
    • Spacing
    • Border
    • Admin
    • Typography
    • Responsive
    • Manage styles

    in Tutorials