Counter

Counter is a very popular content element which helps to highlight some facts and achievements in an attractive way. Counters may consist of number, description and icon. 

Check this demo page showing different contact form styles:

https://codex-themes.com/thegem-elementor/elements/counters/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Countdown” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: TheGem comes with 3 style presets for counters, one of which has a vertical layout.

Numbers Format: in this field you can set a pattern for displaying the counter number. Depending on your number format standard (American, European, British etc.), you can specify here your decimal separator pattern.

Counter

Starting number: this number is used in case you have enabled animated counting effect in “Additional Options”

Ending number: resulting end number of your counter

Number suffix: optionally you can specify some suffix for your number, for example %, $ etc.

Spacing: activate in case you need spacing between suffix and number

Description: here you can type in description for your counter

Link: you can also set a link to your counter

Icon: select icon for your counter. You can also remove an icon, leaving just number and description.

Additional Options

In this section you can enable the animated counting effect for your counter

In case you have selected “Vertical Style” in Layout-> Skin, additionally you will get a “Team Person” section

“ Vertical Style” allows you to add a team person on top of the counter: 

Show Team Person: activate this setting in case you wish to display some team person on top of your counter

Select Team Person: here you can select which team person should be displayed.

After that you can optionally show/hide different content parts of team person like image, name, position etc. 

Connector: this setting allows you to activate a connector between two vertical counters (see description below “Vertical Style – How To”). 

Style Tab

Container Style

In this section you can customize styles of your counter’s container.

Number Style

Style settings for number in counter.

Description Style

Style settings for description in counter.

Icon Style

In this styling section you can customize the look of the icon used in counter (in case you have added some icon).

Connector Style

This section appears only in case you have selected “Vertical Style” in Layout->Skin and have enabled “Connector” in “Team Person” section in “Content Tab” (see description below), In this section you can customize connector between two counters in vertical layout.

Vertical Style – How To

How to create a vertical counter, consisting of multiple counters, placed one below the other? Very easy: 

1. Add first “Counter” element to your section/column and select “Vertical Style” in Layout->Skin

2. Style your counter, as you wish

3. Now duplicate this element by right clicking on blue pencil icon and selecting “Duplicate”

4. Duplicated counter will appear below the first one. Click on this second counter to open its editing options in the left Elementor panel

5. Now open “Team Person” section and enable “Connector” setting. After this the second counter will be automatically connected with the first one using a connector.