---
title: "Barre d'annonce : afficher un bandeau promo"
description: "Ajoutez un bandeau en haut de page pour mettre en avant une promotion ou une information, avec plusieurs annonces qui défilent automatiquement."
url: https://docs.vivlab.com/editor/menu/banner
---

# Barre d'annonce

L'élément **Barre d'annonce** affiche un bandeau en haut de la page pour mettre en avant une promotion, une information ponctuelle ou un message d'accueil. Il peut contenir plusieurs annonces qui s'enchaînent automatiquement.

## Liste des annonces

Le panneau latéral affiche la liste des annonces. Chaque ligne montre le texte et le lien associé. Cliquez sur une annonce pour la modifier, ou utilisez les actions de la liste pour la **dupliquer**, **supprimer** ou en ajouter une nouvelle.

<DocsScreenshot name="editor-banner-message" alt="Une annonce active indiquant la livraison offerte dès 75 €." :width="346" :height="133" />

## Modifier une annonce

En cliquant sur une annonce, vous accédez à :

- **Barre d'annonce active** : si vous décochez l'option, l'annonce ne sera plus diffusée mais reste enregistrée. Pratique pour suspendre temporairement une promotion sans la perdre.
- **Texte de la barre d'annonce** : le message affiché.
- **Action lors du clic** : comme pour un [bouton](https://docs.vivlab.com/editor/menu/button.md), vous pouvez relier l'annonce à un lien externe, une page interne, un produit, une catégorie, un PDF, etc. Laissez vide pour une annonce non cliquable.
- **Couleur du texte** et **Couleur de fond** : couleurs propres à cette annonce.
- **Durée de la bannière** : temps d'affichage avant de passer à la suivante (en secondes, entre 1 et 8). N'a d'effet que si vous diffusez plusieurs annonces.

<DocsScreenshot name="editor-banner-style" alt="Les couleurs et la durée d’affichage d’une annonce." :width="346" :height="253" />

## Direction de l'animation

Dès que la barre contient plus d'une annonce, une section **Direction de l'animation** apparaît. Elle règle le sens de la transition entre deux annonces : **Vers le haut** (par défaut), **Vers le bas**, **Vers la gauche** ou **Vers la droite**.

## Style commun

Le [panneau de style](https://docs.vivlab.com/editor/style/index.md) regroupe le [style du texte](https://docs.vivlab.com/editor/style/text.md), les [bordures](https://docs.vivlab.com/editor/style/border.md), l'[arrondi des angles](https://docs.vivlab.com/editor/style/border-radius.md), les [marges intérieures](https://docs.vivlab.com/editor/style/padding.md) et le [positionnement](https://docs.vivlab.com/editor/style/align.md).

Le fond et la couleur du texte ne se règlent pas ici : chaque annonce porte ses propres couleurs, choisies dans son entrée de la liste.