# Announcement bar

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2F9yrx3jh7BjBJdMk0cONH%2FScreenshot%202024-06-10%20162032.png?alt=media&#x26;token=b9ece5f9-0a58-4093-9741-f0aaf23f60b0" alt=""><figcaption></figcaption></figure>

## Section settings

### General settings

**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:** Select between slide and marquee.

**Show close button:** Include a close button, marked with an "X" icon, for user convenience.

**Home page only:** Choose whether to display the feature exclusively on the home page or on all pages.

**Show on mobile:** Determine if this feature should be visible on mobile devices.

**Show separator line:** Decide to show the separator line on which page.

**Action:** Select the type of action for displaying the feature, with options including an animation marquee or a slider, to enhance the visual experience on your site.

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2F95hY5xfR2MFQqh2OGSEt%2Fimage.png?alt=media&#x26;token=d6e6a320-498a-48e2-8280-9d00619c1344" alt=""><figcaption></figcaption></figure>

### Content settings

**Uppercase:** Convert content to uppercase.

**Font setting:** Adjust the font settings by choosing a specific font size and weight for readability and visual impact.

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FWB4Mc8Cf1DTo3HkKYmh1%2Fimage.png?alt=media&#x26;token=64ed057b-2282-4632-93c3-021c39dee0c5" alt=""><figcaption></figcaption></figure>

### Marquee setting

**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.

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FR7ZeW3aSPHdeDLiCqD0I%2Fimage.png?alt=media&#x26;token=645896f8-fcf1-4aa6-953d-c56e5ef0d67d" alt=""><figcaption></figcaption></figure>

### Slider setting

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

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FIkxKPE02tMeNKiPXaR7L%2Fimage.png?alt=media&#x26;token=61efdcb3-5b62-4ce2-902c-143946a4687d" alt=""><figcaption></figcaption></figure>

### Section padding

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

<figure><img src="https://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FBLT5imLpXN23obBiE5ws%2Fimage.png?alt=media&#x26;token=3603ace5-2823-48a4-bd6f-f8add6a46213" 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://1887672278-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGyYuzVsob5kZQHtG5da3%2Fuploads%2FFhOBOB4OEiChfxurxhUn%2Fimage.png?alt=media&#x26;token=fba9956f-056a-470e-882e-d9c81b2ad88a" alt=""><figcaption></figcaption></figure>
