# Utiliser le bloc Menu
## Description

Le bloc **Menu** ajoute une rangée de liens à votre email, par exemple « Recettes · Événements · Boutique ». Chaque élément du menu est un lien.

Cet article présente deux procédures pas à pas :

- **A.** Un menu avec des liens vers des pages web.
- **B.** Un menu avec des liens vers des sections du même email.

## Pourquoi c'est important

Un menu aide les lecteurs à trouver ce qui les intéresse dans une longue newsletter. Il leur donne aussi un accès rapide aux principales pages de votre site web. Un menu clair en haut de l'email augmente les clics et rend les longs emails plus faciles à lire.

## A. Créer un menu avec des liens vers des pages web

<Stepper>

1. Ajoutez un bloc Menu
   - Dans l'éditeur d'emails, ouvrez l'onglet **Contenu**.
   - Glissez le bloc **Menu** à l'endroit voulu, en général en haut de l'email.
   - Sélectionnez le bloc. Ses réglages s'affichent à droite, dans le panneau **Propriétés de menu**.

1. Ajoutez les éléments du menu
   - Sous **Configurer les éléments de menu**, cliquez sur **Ajouter un élément** (libellé dans l'éditeur : « Ajouter un nouvel objet ») une fois par élément, par exemple « Boutique », « Blog » et « Contact ».
   - Pour changer l'ordre, glissez un élément par sa poignée (l'icône à lignes horizontales, à gauche de l'élément).
   - Pour retirer un élément, cliquez sur **Supprimer** dans cet élément.

1. Réglez le lien de chaque élément
   - Dans le champ **Texte**, tapez le mot que le lecteur voit, par exemple « Boutique ».
   - Activez **Plus d'options**. Les réglages du lien s'affichent.
   - Dans **Type de lien**, gardez **Ouvrir une page Web**. Les autres choix sont **Envoyer un email** (libellé dans l'éditeur : « Envoyer un e-mail »), **Effectuer un appel** et **Envoyer un SMS** ; cet article couvre seulement **Ouvrir une page Web**.
   - Dans le champ **URL**, tapez l'adresse web complète, par exemple `https://www.exemple.com/boutique`.
   - Dans **Cible**, gardez **Page actuelle**. Ce champ indique seulement où le lien s'ouvre ; **Nouvelle page** ouvre un nouvel onglet du navigateur.
   - Le champ **Titre** est facultatif. Son texte s'affiche quand le lecteur passe la souris sur l'élément.
   - Pour lier un fichier plutôt qu'une page web, cliquez sur **Lier un fichier** (libellé dans l'éditeur : « Fichier du lien »). Le **Gestionnaire de fichiers** s'ouvre : vous pouvez y téléverser un fichier ou en choisir un, par exemple un PDF.

   ![Réglages d'un élément de menu : Texte, Plus d'options, Type de lien, URL, Fichier du lien, Cible et Titre](/images/campaign-creation/menu-block-item.png)

1. Enregistrez et testez
   - Enregistrez votre email.
   - Envoyez-vous un email de test et cliquez sur chaque élément du menu.

</Stepper>

## B. Créer un menu avec des liens vers des sections du même email

Utilisez ce menu dans une longue newsletter, pour que les lecteurs aillent directement à une section.

<Callout type="caution">
**Gmail (sur le web et dans l'application) ne prend pas en charge les liens vers une section du même email : le lien ne fait rien.** Ils fonctionnent dans la plupart des autres messageries, comme Apple Mail et Outlook. Si beaucoup de vos abonnés utilisent Gmail, préférez un menu vers des pages web.
</Callout>

<Stepper>

1. Ajoutez un repère de destination au-dessus de chaque section
   - Au-dessus de chaque section, ajoutez un bloc **HTML** avec une balise `<a>` vide qui a un `id`. Par exemple, ajoutez `<a id="recettes"></a>` au-dessus de la section « Recettes » et `<a id="evenements"></a>` au-dessus de la section « Événements ».
   - Les étapes détaillées sont dans [Ajouter des liens d'ancrage au contenu de l'email avec du HTML](/fr/docs/campaign-creation/adding-anchor-links-to-the-email-content-with-html).

1. Ajoutez un bloc Menu et ses éléments
   - Glissez le bloc **Menu** en haut de l'email et sélectionnez-le.
   - Sous **Configurer les éléments de menu**, cliquez sur **Ajouter un élément** (libellé dans l'éditeur : « Ajouter un nouvel objet ») une fois par section, par exemple « Recettes » et « Événements ».

1. Réglez le lien de chaque élément
   - Dans le champ **Texte**, tapez le mot que le lecteur voit, par exemple « Recettes ».
   - Activez **Plus d'options**.
   - Dans **Type de lien**, gardez **Ouvrir une page Web**. C'est le bon choix aussi pour une section du même email ; vous n'avez pas besoin de créer une adresse web.
   - Dans le champ **URL**, tapez `#` suivi de l'`id` du repère, par exemple `#recettes`.
   - Dans **Cible**, gardez **Page actuelle**. Ce champ ne choisit **pas** la section ; c'est l'adresse du champ **URL** qui la choisit.

1. Enregistrez et testez
   - Enregistrez votre email.
   - Envoyez-vous un email de test et cliquez sur chaque élément du menu pour vérifier qu'il mène à la bonne section.

</Stepper>

<Callout type="caution">
Le nom après `#` doit être exactement le même que l'`id` du repère, sans espace ni accent. Par exemple, `#evenements` mène à `<a id="evenements"></a>`, mais `#Evenements` ou `#événements` ne fonctionnent pas.
</Callout>

## La mise en forme du menu

Les réglages sous les éléments s'appliquent à tout le menu :

- **Famille de police**, **Poids de la police** et **Taille de police** : la police des éléments.
- **Couleur du texte** et **Couleur du lien** : les couleurs des éléments.
- **Alignement** : la position du menu (à gauche, au centre ou à droite).
- **Espacement des lettres** (libellé dans l'éditeur : « Espacement ») : l'espace entre les lettres.
- **Disposition** : **Horizontale** (éléments côte à côte) ou **Verticale** (éléments les uns sous les autres).
- **Séparateur** : un caractère affiché entre les éléments, par exemple `|`.
- **Menu hamburger** : sur les appareils mobiles, regroupe les éléments derrière une icône de menu.
- **Espace autour des éléments** (libellé dans l'éditeur : « Remplissage d'objets ») : l'espace autour de chaque élément.

## Dépannage

**Le lien ne descend pas jusqu'à la section**

- Vérifiez que le nom après `#` dans le champ **URL** est exactement le même que l'`id` du repère, majuscules et minuscules comprises.
- Vérifiez que le repère est une balise `<a>` vide avec un `id`, dans un bloc **HTML**. N'utilisez pas l'attribut `name` et n'utilisez pas de `<div>`.
- Gmail (sur le web et dans l'application) ne prend pas en charge les liens vers une section du même email. Testez dans les applications de messagerie que votre public utilise le plus.

**Le lien ouvre un onglet vide ou un nouvel onglet**

- Vérifiez le champ **Cible** de l'élément. Choisissez **Page actuelle**.

## Articles connexes

- [Utiliser l'éditeur d'emails](/fr/docs/campaign-creation/using-the-email-designer) - Blocs et réglages de l'éditeur
- [Ajouter des liens d'ancrage au contenu de l'email avec du HTML](/fr/docs/campaign-creation/adding-anchor-links-to-the-email-content-with-html) - Repères de destination pour les sections
- [Importer des fichiers dans le gestionnaire de fichiers](/fr/docs/campaign-creation/uploading-to-the-file-manager) - Fichiers que vous pouvez lier
- [Tester votre campagne](/fr/docs/campaign-creation/testing-your-campaign) - Tester les liens avant l'envoi
