# Announcement bar

The **Announcement bar** in a website's header offers various benefits to a sales website. It can promote discounts, create urgency, deliver important information, highlight key messages, enhance brand identity, and provide effective calls to action, ultimately improve customer engagement and boost sales.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FMEFtDHbjzE8dnFUUztcV%2Fimage.png?alt=media&#x26;token=b00ab048-97e3-4628-8a14-ec29c73d528a" alt=""><figcaption></figcaption></figure>

## 1. General settings

| Setting                 | Description                                                                                                                                                        |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Section width**       | You can choose among Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout.                                           |
| **Color scheme**        | You are allowed to change text color, background color, etc. with preset color.                                                                                    |
| **Type**                | <p>2 options for type</p><ul><li>Slide: Text displayed in a slide presentation format</li><li>Marquee: Text displayed as a marquee scrolls for attention</li></ul> |
| **Show close button**   | Display the close button                                                                                                                                           |
| **Home page only**      | Display only on the homepage                                                                                                                                       |
| **Show on mobile**      | Show on mobile screens                                                                                                                                             |
| **Show separator line** | Decide to show the separator line on which page.                                                                                                                   |

## 2. Content settings

| Setting          | Description                                                                                             |
| ---------------- | ------------------------------------------------------------------------------------------------------- |
| **Uppercase**    | Convert content to uppercase.                                                                           |
| **Font setting** | Adjust the font settings by choosing a specific font size and weight for readability and visual impact. |

## 3. Marquee setting

| Setting                   | Description                                                                                                |
| ------------------------- | ---------------------------------------------------------------------------------------------------------- |
| **Speed**                 | Set the duration for the marquee animation to ensure smooth scrolling.                                     |
| **Spacing between items** | Manage the spacing between two announcements within the marquee to maintain clarity and aesthetic balance. |
| **Icon between items**    | Control the icon that appears between two announcements in the marquee.                                    |

## 4. Slider setting

You can set the duration for the slide before it transitions.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FWHWiEwe6caWDpQDUn3m3%2Fimage.png?alt=media&#x26;token=5751a274-de93-430f-b68e-87c1ea4511fc" alt=""><figcaption></figcaption></figure>

## 5. Section setting

Section padding allows you to specify the space between this section and the preceding or following sections, or both.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FI0lJUjXEdsT678cyC4S6%2Fimage.png?alt=media&#x26;token=a90a9557-1524-430a-a70b-9358f0ea33a7" alt=""><figcaption></figcaption></figure>

## Block settings

Here, you can set the text displayed in each block. Additionally, you can include a countdown timer for any information within the block.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2F7dRzK8qHdTvvUd7Xpa04%2Fimage.png?alt=media&#x26;token=d4b63c36-9214-492b-a4ab-3aa5cb137c39" alt=""><figcaption></figcaption></figure>