# Countdown timer

A **Countdown timer** on a website creates urgency, promotes offers, engages users, enhances visuals, boosts conversions, and supports data collection, contributing to an enriched user experience and website success.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2F0mXdifMdvWHuptsAcqVt%2Fimage.png?alt=media&#x26;token=b70d6011-e97a-413a-9415-dd600569af26" alt=""><figcaption></figcaption></figure>

## Section settings

### General setting

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td><p></p><p>3 options for container</p><ul><li>Stretch width: span the section width regardless of screen size.</li><li>Fix width: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li>Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td>Color scheme</td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr><tr><td>Layout</td><td><p>The position of the content</p><ul><li><strong>Horizontal</strong>: Horizontal layout positions elements side by side</li><li><strong>Vertical:</strong> Vertical layout stacks elements from top to bottom,</li></ul></td></tr></tbody></table>

### Content settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Subheading</td><td>Subheading content</td></tr><tr><td>Heading</td><td>Heading content</td></tr><tr><td>Description</td><td>Description content</td></tr><tr><td>Button label</td><td>The title of button</td></tr><tr><td>Button link</td><td>The link URL you want to add</td></tr><tr><td>Button style</td><td><p>The style of the button</p><ul><li>Fill</li><li>Outline</li></ul></td></tr><tr><td>End time</td><td>Set the countdown timer in the format month-day-year</td></tr><tr><td>Size</td><td><p>Size: Customize the font size of the content with 3 options</p><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr></tbody></table>

### Vertical content setting

This setting only works when you choose the vertical layout

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Desktop content position</td><td><p></p><p>9 options for the desktop content position</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul><p>-> Position is automatically optimized for mobile.</p></td></tr><tr><td>Content alignment</td><td><p>3 options for the content alignment</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

### Background image

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Upload desktop background image, and it will be displayed for mobile if no mobile image is uploaded</td></tr><tr><td>Mobile image</td><td>Upload mobile background image</td></tr><tr><td>Image overlay opacity</td><td>Customize the image overlay opacity</td></tr><tr><td>Image height</td><td><p>Image height: Adjust the height of the background images</p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr></tbody></table>

### Mobile layout

* **Show text bellow on mobile:** Content beneath the image
* **Reset color scheme setting on mobile:** When enabled, the content color will be displayed in the default color scheme

### Section padding

* **Top padding:** Customize the top margin of the section
* **Bottom padding:** Customize the bottom margin of the section