Countdown Element

Countdown

You can use the "Countdown promo" when you have a promo with a set date, having your timer countdown help visitors/clients know how much time they have left to the end of the said promo.

General Settings

Element Name/Title

Here you will see the default name/title of the Edit option you are working on. You can decide to leave at that or rename it.

Color Options

Color

If you want to change the **** color of your timer itself, you can do that by clicking on the color you want.

If you didn't find your color, you can also add custom colors if you have the color code of the exact color you are going for, just type it in the space provided and click "add color".

Label Color

If you want to change the **** color of your timer label, you can do that by clicking on the color you want.

If you didn't find your color, you can also add custom colors if you have the color code of the exact color you are going for, just type it in the space provided and click "add color".

Float

You can move your timer in different positions as you deem fit, you can position it to the Left, Center, Right, space around, space evenly, or space between.

Typography Type

Here you can edit the font of your text/content.

End Date and Time

Here you can set the date and time you want your countdown to end. For instance, you can set the date and time for the timer to end on the 11th of July at 6am.

Translate

You can decide to set your timer language to your preferred language by simply selecting the language we want from the available options.

Time Zone

You can select the timezone you want the countdown timer to work on. For instance, you if have chosen July 11, at 6am, you have to choose the timezone you want this timer to work with.

Mobile and Desktop Font Size

You can adjust the mobile and desktop font sizes of your countdown timer simply by adjusting the size bars.

Desktop and Mobile Subtext Font Size

You can adjust the mobile and desktop subtext font sizes of your countdown timer simply by adjusting the size bars.

Expire Action

Redirected URL

You can add a redirected URL here.

Show & Hide Element

You can decide to hide or show your section, column, row, or element.

Spacing Options

There are different spacing options available for adjusting the top or bottom margin of your content by toggling its bars. Depending on the Edit option you are working on, the settings will only be applicable to that option. For example, if you are editing a particular Row (the BLUE box), only every content in that Row will follow the command of what settings you make.

Additional General Settings

Visibility

You can decide if you want this particular Edit option to be visible on only mobile devices, desktops, or both by clicking on it to highlight the icon.

Custom Class

Input your custom class here.

CSS Selector

If you need to copy the Custom CSS, just click on the "Copy" icon on the right side of the reference code.