# 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://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FFeabaFyS5zHTbV0sQTLY%2Fannuncement_section.png?alt=media&#x26;token=80954611-34d5-4cd7-bf16-736441da9e42" 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://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FMiMvwdGPWZPdGNWu8ida%2Fannouncement.png?alt=media&#x26;token=65669508-074a-41f5-acf9-33f15704b324" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Countdown timer" %}

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FXINqw2xg995vR9snwUIQ%2Fcoutdown_timer.png?alt=media&#x26;token=6a6e0c5b-bad2-49ad-b689-a45f069fa3ae" 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** |

#### Announcement block (COLLAPSIBLE CONTENT)

<div data-full-width="false"><figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FydNKeXsYMVKk4vloVAPA%2Fcollapsible_announcement.png?alt=media&#x26;token=d2970360-c9fe-453c-b325-6939f861e820" alt=""><figcaption></figcaption></figure> <figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FDYLxD4paBPvAvCIyN7Kx%2Fcollapsible_announcemen_2t.png?alt=media&#x26;token=60b9b4b8-517d-48c6-b81d-d7b891dfeb37" alt=""><figcaption></figcaption></figure></div>

### Countdown timer block settings

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FCUNJb9mCzc2qQGXGzqj0%2Ftimer.png?alt=media&#x26;token=92e6a98c-5fe8-4766-ae11-09f877299587" 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=PLWCiWoEvn91ivfW5vf1gw_rnacJw8G5pj&v=kXLaGDEv5UY>" %}