---
title: "Announcement bar: show a promo banner"
description: "Add a banner at the top of the page to highlight a promotion or a piece of news, with several announcements that rotate automatically."
url: https://docs.vivlab.com/en/editor/menu/banner
---

# Announcement bar

The **Announcement bar** element displays a banner at the top of the page to highlight a promotion, a one-off piece of information or a welcome message. It can contain several announcements that follow each other automatically.

## Announcement list

The side panel shows the list of announcements. Each row shows the text and the linked URL. Click on an announcement to edit it, or use the list actions to **duplicate**, **delete** or add a new one.

<DocsScreenshot name="editor-banner-message" alt="An active announcement offering free delivery from €75." :width="346" :height="133" />

## Edit an announcement

When you click on an announcement, you can access:

- **Banner active**: if you uncheck the option, the announcement is no longer shown but remains saved. Handy for temporarily suspending a promotion without losing it.
- **Banner text**: the message displayed.
- **Action on click**: like for a [button](https://docs.vivlab.com/en/editor/menu/button.md), you can link the announcement to an external URL, an internal page, a product, a category, a PDF, etc. Leave empty for a non-clickable announcement.
- **Text color** and **Background color**: colors specific to this announcement.
- **Banner duration**: display time before moving to the next one (in seconds, between 1 and 8). Only matters if you display several announcements.

<DocsScreenshot name="editor-banner-style" alt="Announcement colors and display duration." :width="346" :height="253" />

## Animation direction

As soon as the bar contains more than one announcement, an **Animation direction** section appears. It sets the direction of the transition between two announcements: **Upward** (default), **Downward**, **Leftward** or **Rightward**.

## Common style

The [style panel](https://docs.vivlab.com/en/editor/style/index.md) gathers the [text style](https://docs.vivlab.com/en/editor/style/text.md), [borders](https://docs.vivlab.com/en/editor/style/border.md), [corner radius](https://docs.vivlab.com/en/editor/style/border-radius.md), [inner margins](https://docs.vivlab.com/en/editor/style/padding.md) and [positioning](https://docs.vivlab.com/en/editor/style/align.md).

The background and text colors are not set here: each announcement carries its own colors, chosen in its entry in the list.