# Countdown

You can use the Countdown timer when you have a promotion with a set date. Having a timer countdown helps visitors/clients know how much time they have left to the end of the said promotion.

## 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.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FjSV6Ct05EWqLSRyxbVbY%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-256b01c12082131a4eb28cfaba70b1fa5536f5cf_Countdown%20-%20Title.png?alt=media&#x26;token=cf340eb7-dc0d-48e9-ab3d-733eca294bec" alt=""><figcaption></figcaption></figure>

### 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".

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2Fjj9GIIOKW9WYuGlmp0nS%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-f716e9a51bfb8dba364cdfe14744c84283352818_Countdown%20-%20Color.png?alt=media&#x26;token=e7d2a3c3-3f36-4b62-96c1-51de5858f2c2" alt=""><figcaption></figcaption></figure>

### 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".

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F1AR6bCc1SruqyY1m0weI%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-425002e7db782818066a2054560e6babcc6e2aee_Countdown%20-%20label%20Color.png?alt=media&#x26;token=9967964a-249f-43d4-a9e6-fa6f1622b3c3" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FUFI0D5IWg3Lp06RUx195%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-c86b9f937c368eccb7f3e161eaca163ff3e2386a_Countdown%20-%20Float.png?alt=media&#x26;token=a9dfe663-8d87-4e84-b1ea-02fdec327279" alt=""><figcaption></figcaption></figure>

### Typography Type

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

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FYvSDQw6MeZCYN9POv3NN%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-0515f1869d8ebb1b94021e3bb5cbc8ffe6793a27_Countdown%20-%20Typography%20type.png?alt=media&#x26;token=15e83a49-79e1-4841-8b5b-bd3f6144693a" alt=""><figcaption></figcaption></figure>

### 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 6 am.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FcbdG6n64qDG1NcNwQk6U%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-b5ea7ea171c832ae9b33d50fb4d48bb09ca7ac36_Countdown%20-%20End%20date.png?alt=media&#x26;token=6221ce51-d686-4445-9525-11cec2958e4f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FpLWrSFZ3Nz8ra9aRqgX6%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-ab38e80e130d4b36e0053bf2093b6e40ad3bf5f6_Countdown%20-%20End%20time.png?alt=media&#x26;token=b7585c48-534b-4935-9c1b-3be0644f4de3" alt=""><figcaption></figcaption></figure>

### Translate

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

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FS464uMsxdOGrFtkfTZyZ%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-4073b40f33acc15f059a05b618bbe9531356bc5b_Countdown%20-%20Trranslate.png?alt=media&#x26;token=bbeee2b6-2fff-4af9-8833-dcbc08ce9ece" alt=""><figcaption></figcaption></figure>

### Time Zone

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

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FSyQYrkfBT0PKDEeRJA9s%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-0d9017b1d7f94e163c5bc7e76b8f9b325304a534_Countdown%20-%20Time%20zone.png?alt=media&#x26;token=9e7b5b5e-a7d1-4c69-8905-f546ae1c2e82" alt=""><figcaption></figcaption></figure>

### Mobile and Desktop Font Size

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

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FPVyomXcilhXo0DsnIYFT%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-9bff1ca843e4d4eaa5c0a76b3f95d5280d0fac37_Countdown%20-%20Desktop%20Font%20Size.png?alt=media&#x26;token=c7a63037-ffc7-48ee-8fbb-0e2bb64a71f7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FZg2RQr7NvqnOnHHtfRIT%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-d55a9559b76a5a47e73351889780bacee2f79b9e_Countdown%20-%20Mobile%20Font%20Size.png?alt=media&#x26;token=ee31836f-8345-4c24-815c-950eda70da76" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FfMOi1hOJ0cku84MmcG2w%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-7cc839e9015110951c5fbec3894541757529b6f3_Countdown%20-%20Desktop%20subtext%20Font%20Size.png?alt=media&#x26;token=c97c6667-90b2-45ef-ad2f-ea0c82dc9ea5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2Fn7IP3RYj3MSdq6ItGOdh%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-19bba2066c1d02479134abda92f6218e9061d2bb_Countdown%20-%20Mobile%20subtext%20Font%20Size.png?alt=media&#x26;token=d3be7255-51f1-4507-a384-4e041601b2e4" alt=""><figcaption></figcaption></figure>

### Expire Action

#### Redirected URL

You can add a redirected URL here.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FWJuzqJ4dHJoec1S7laDn%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-c61c6d2ea9a2dd7a6293b151baa6934d84b5fb93_Countdown%20-%20Expired%20Action%20R.png?alt=media&#x26;token=7d5af055-0a49-4e28-956f-d557a63eb1e6" alt=""><figcaption></figcaption></figure>

#### Show & Hide Element

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

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2F5PvosCYcSh4QppzpkGET%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-a9b004e07d74e73eacd3a295123615b524cf0157_Countdown%20-%20Expired%20Action%20H.png?alt=media&#x26;token=4706a64f-53cc-4914-b89f-14de7cadffd0" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FiQUZcxbImDabfy77nXo5%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-d0f208a027884a00587b82415d19b53087acc483_Countdown%20-%20Spacing%20Option.png?alt=media&#x26;token=60b173ed-40bf-45f2-8949-d00d61312b9b" alt=""><figcaption></figcaption></figure>

## 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.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FPLYb15TsxDahfSTmS4Vk%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-4b51422a2ef7b5ba052a95776a4057285cf9178a_Countdown%20-%20Visibility.png?alt=media&#x26;token=201cb631-ea99-4b60-b7cf-19329955b082" alt=""><figcaption></figcaption></figure>

### Custom Class

Input your custom class here.

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2FxSq16WXfGXEIp3PpnO7Y%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-29e3132b067ad2dddffc2e27391c94cfd329cf94_Countdown%20-%20Custom%20Class.png?alt=media&#x26;token=3483cca3-54b1-4a7e-b1cf-6befbbabe34a" alt=""><figcaption></figcaption></figure>

### CSS Selector

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

<figure><img src="https://3379043218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhRoDQv6gyGL2CyFV4Oob%2Fuploads%2Fkm6WvWUA48JC9PSgi7TX%2Fspaces_SpDxRsrRdNpxcuWtIMiA_uploads_git-blob-565251a416c8628d8ef03760b99dabda96e2c414_Countdown%20-%20CSS%20Selector.png?alt=media&#x26;token=ea0f2e91-fbf2-4637-84ca-6f2876bd1b3b" alt=""><figcaption></figcaption></figure>
