Countdown

This element is useful to display a countdown timer for some event which will take place in future. It is widely used on landing pages for some events and on coming soon pages”.

Check this demo pages showing different contact form styles:

https://codex-themes.com/thegem/coming-soon/coming-soon-01/
https://codex-themes.com/thegem/coming-soon/coming-soon-02/
https://codex-themes.com/thegem/coming-soon/coming-soon-03/
https://codex-themes.com/thegem/coming-soon/coming-soon-04/
https://codex-themes.com/thegem/coming-soon/coming-soon-05/
https://codex-themes.com/thegem/coming-soon/coming-soon-06/

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: here you can choose between 5 different style presets for countdowns

Countdown

Due Date: specify the due date of the event (i.e. the date on which the event will take place).
In case you have selected “Circles” in “Layout->Skin”, you will get one additional field to specify – “Starting Date”. Here you need to specify the date on which the circles progress should start. You can select some date in the past or current date. Please note: “Starting Date” should not be later than the “Due Date”, i.e. it cannot be after the “Due Date”.

Labels

In this section you can decide, which labels should be shown in countdown timer. You can also change the default label text to your own.

Link

Here you can link your counter with some internal or external link.

 Once activated, additional styling section appear in Style tab

Style Tab

Depending on the skin you have selected in Layout -> Skin, you will get different sections here.

Container Style

Customization options for countdown containers. By default, all settings made here are simultaneously applied to all container. However, if you wish to style each container individually, you can use “Customize separately” switch.

Once activated, additional styling section appear in Style tab.

In this section you can then customize the look of each container individually.

Numbers Style

Styling options for numbers in countdown timer. Similar to container style, by default this settings are simultaneously applied to all numbers. For individual customization of each number, use “Customize separately” switch. Once activated, individual styling settings for numbers will appear in additional styling sections in Style tab (see screenshot above).

Labels Style

Styling options for labels in countdown timer. Similar to container style, by default this settings are simultaneously applied to all labels. For individual customization of each label, use “Customize separately” switch. Once activated, individual styling settings for labels will appear in additional styling sections in Style tab (see screenshot above).