# 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://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FIMK79yHywZvl8YIS5zBJ%2Fheader-group.png?alt=media&#x26;token=da2f7d36-d0d0-4d30-8d5d-f282862c6632" 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://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2Fh3Q67sKmzDHQY9eZBNcI%2Fannouncemnet-2.png?alt=media&#x26;token=59500f7c-585f-4678-ae01-b08bd8cecc27" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Countdown timer" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2F9paYWUDxCpzPn1lodfRf%2Fcountdown-timer.png?alt=media&#x26;token=16cd3a05-ec51-418e-8409-ddaf183c9a96" 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://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FT9gQuzzmwL7sSo1BgBqX%2Fcollaps-1.png?alt=media&#x26;token=9d35754f-932e-4371-a177-03731c18c8a4" alt=""><figcaption></figcaption></figure> <figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FXCzZEficHlgPyJohGM8P%2Fcollaps-2.png?alt=media&#x26;token=7f689db8-4c62-4ae4-a270-95ecc0ec2a8b" alt=""><figcaption></figcaption></figure></div>

### Countdown timer block settings

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2Fm03K8z2buEAzaZZIuK2h%2Ftimer-2.png?alt=media&#x26;token=15ae7817-d226-4107-8c98-373f334eb2ba" 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                                                                     |

###
