# Announcement bar

> You have the flexibility to position the Announcement bar either above the Header to display it at the very top of a page or below the specified section. Simply use the drag-and-drop feature to place the section in the desired position.

## Section settings

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FKgKpRwn2zZYw7fJQKQel%2FScreenshot_11.png?alt=media&#x26;token=0bdde189-0c92-49ee-a0cb-eff55608350d" alt=""><figcaption></figcaption></figure>

| Settings                         | Description                                                                                                                                                                                                                                                                                                                                                                                                                        |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show announcement**            | The announcement bar section can be shown or hidden using the settings.                                                                                                                                                                                                                                                                                                                                                            |
| **Page width**                   | <ul><li><strong>Boxed</strong>: With boxed width, page content can be displayed within the maximum width. <strong>The page width can be changed in Theme Settings > Layout.</strong></li><li><strong>Full width:</strong> With the "Full width" option, page content can be displayed in its entirety full-width. <strong>When you show content at full width, you can add padding to the left and right sides.</strong></li></ul> |
| **Enable Offset (left & right)** | <p>It will work if you select the "<strong>Full width</strong>" of the page.<br><br>When you enable this option, the padding on the left and right sides will be removed.</p>                                                                                                                                                                                                                                                      |
| **Color scheme**                 | You can alter the color of the section.                                                                                                                                                                                                                                                                                                                                                                                            |

## Announcement bar blocks

1. Announcement
2. Countdown timer

{% tabs %}
{% tab title="Announcement" %}

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2Flw9XtPCgOwCfhvdYDWUc%2FScreenshot_12.png?alt=media&#x26;token=52014550-12f0-43b8-ac65-14457c6ec095" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Countdown timer" %}

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2Fd2c7qBpEpaslpuK3V0rj%2FScreenshot_13.png?alt=media&#x26;token=355bc104-4b78-4310-bbfd-28df39ac65a8" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Announcement block settings

| Settings                             | Description                                                                  |
| ------------------------------------ | ---------------------------------------------------------------------------- |
| **Show on home page only**           | The Announcement will only appear on the home page.                          |
| **Hide on home page only**           | The Announcement will appear without a home page.                            |
| **Text**                             | You can add a text to announcement bar                                       |
| **Link**                             | You can add a link.                                                          |
| **Social media / Enable**            | In the announcement bar, you can enable or disable social media.             |
| **Country/Region Selector / Enable** | In the announcement bar, you can enable or disable the **Currency selector** |
| **Language Selector**                | In the announcement bar, you can enable or disable the **Language selector** |

### Countdown timer block settings

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2Fd2c7qBpEpaslpuK3V0rj%2FScreenshot_13.png?alt=media&#x26;token=355bc104-4b78-4310-bbfd-28df39ac65a8" alt=""><figcaption></figcaption></figure>

| Settings                                             | Description                                                                                                              |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| **Show on home page only**                           | The Announcement will only appear on the home page.                                                                      |
| **Hide on home page only**                           | The Announcement will appear without a home page.                                                                        |
| **Countdown timer**                                  | You can enabel/dsiable it.                                                                                               |
| **Year/Month/Date**                                  | You can quickly change the year, month, and date.                                                                        |
| **Button**                                           | You have complete control over the button's settings.                                                                    |
| **Button label**                                     | The lable for the button text                                                                                            |
| **Use arrow icon** & **Enable arrow icon on mobile** | You can add a right arrow icon, as well as enable/disable it from a mobile device.                                       |
| **Button link**                                      | You can add a link to the button                                                                                         |
| **Button type**                                      | <ul><li><strong>Primary</strong> (Solid background button)</li><li><strong>Secondary</strong> (Outline button)</li></ul> |
| **Button size**                                      | You can change button size following the settings, **Large, medium, small**                                              |
| **Text content**                                     | You can add a text to the announcement timer block                                                                       |
| **Enable close button**                              | You enable/disabel the close button                                                                                      |
| **Color scheme**                                     | You can change color scheme                                                                                              |
| **Replace with your custom colors**                  | There is an option to replace with your custom color                                                                     |

## Video Tutorials

{% embed url="<https://www.youtube.com/watch?index=6&list=PLWCiWoEvn91jNQMp4Ts9ECrHUw6JWiqWs&v=U1FVCu9w8Bs>" %}