# Proposer sa langue au visiteur

Cet article explique comment laisser vos visiteurs changer de langue et proposer à chacun la sienne. Vous saurez poser un sélecteur de langue dans votre en-tête et un bandeau qui suggère la bonne version d’une page.

## Avant de commencer

- Votre site doit avoir au moins deux langues de contenu et vos pages leurs traductions liées. [Traduire une page](https://lovelyrender.com/fr/documentation/traduire-une-page/) explique comment les lier.
- Votre site ne redirige jamais un visiteur vers une langue d’office. Il lui propose sa langue et le visiteur choisit.
- Deux blocs s’en chargent. Le **Sélecteur de langue** sert le visiteur qui veut changer de langue. La **Suggestion de langue** prévient celui qui ne sait pas que la page existe dans la sienne.

Sur un site d’une seule langue, les deux blocs n’affichent rien sur la page. Dans l’éditeur, leurs réglages affichent **Ce bloc apparaît dès que le site a au moins deux langues de contenu. Ajoutez-en une dans Langues, puis revenez.** Vous pouvez les poser avant d’ajouter votre deuxième langue.

## Poser un sélecteur de langue

Pour que le sélecteur figure sur chaque page qui affiche votre en-tête, posez-le dans cet en-tête.

1. Dans le menu de l’administration, ouvrez **Gabarits** > **Compositions**, puis votre en-tête.
2. Ajoutez le bloc **Sélecteur de langue** à l’endroit voulu. [Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/) explique comment.
3. Dans l’onglet **Réglages**, panneau **Sélecteur de langue**, choisissez ce que montre chaque langue et comment les langues se présentent.
4. Dans le bloc, sélectionnez l’**Entrée de langue**.
5. Réglez son apparence dans l’onglet **Styles**.
6. Publiez l’en-tête.

| Réglage | Choix | Valeur par défaut |
| --- | --- | --- |
| **Afficher** | **Le nom de la langue (Français, English)** ou **Le code court (FR, EN)**. | Le nom de la langue |
| **Affichage des langues** | Avec **Côte à côte**, toutes les langues sont en rangée. Avec **Dans un menu**, un bouton nomme la langue de la page et ouvre la liste. | **Côte à côte** |

Chaque langue s’écrit dans sa propre langue avec une majuscule, par exemple « Deutsch » pour l’allemand. Un visiteur reconnaît ainsi la sienne sans lire la vôtre. Les langues suivent l’ordre du tableau des langues.

**Remarque :** Si votre en-tête a une traduction, ajoutez le sélecteur dans chaque version. Chaque page affiche la version de l’en-tête dans sa langue.

### Régler l’apparence des langues

Toutes les langues sont dessinées à partir d’une seule **Entrée de langue** : vous réglez l’apparence une fois. L’onglet **Styles** de l’entrée a quatre états.

| État | Langue habillée |
| --- | --- |
| **Par défaut** | Une langue que le visiteur peut choisir. |
| **Survol** | La langue sous le pointeur. |
| **Focus** | La langue atteinte au clavier. |
| **Actif** | La langue de la page en cours. |

Le sélecteur arrive avec un texte un peu plus petit et un soulignement au survol et au focus. La langue de la page s’affiche dans votre couleur principale et en gras.

**Conseil :** Distinguez la langue de la page par deux signes, la couleur et la graisse. Un visiteur qui distingue mal les couleurs voit la graisse.

### Présenter les langues dans un menu

Avec **Dans un menu**, un bouton nomme la langue de la page. Un clic ou la touche Entrée ouvre la liste de toutes les langues. Cette présentation convient à un pied de page ou à un en-tête chargé.

| Élément | Réglages |
| --- | --- |
| **Entrée de langue** | L’apparence de chaque langue de la liste. |
| **Bouton du menu de langue** | L’apparence du bouton et ses icônes, dans le panneau **Icônes**. L’état **Actif** habille le bouton menu ouvert. |
| **Menu de langue** | L’apparence de la surface qui s’ouvre et la disposition des langues. |

Le bouton arrive avec une flèche vers le bas. Menu ouvert, elle pointe vers le haut. Le menu s’ouvre sous le bouton ou, en bas de page, vers le haut. Il se ferme par un second clic, un clic ailleurs, la touche Échap ou quand le focus le quitte. Il ne s’ouvre jamais au survol.

### Savoir où mène chaque langue

| Page lue | Destination |
| --- | --- |
| Un contenu traduit et publié dans cette langue | Sa traduction. |
| Un contenu sans traduction publiée dans cette langue | L’accueil de cette langue. |
| L’accueil, une liste, une recherche ou la page 404 | L’accueil de cette langue. |

Une traduction en brouillon ne compte pas : sa langue mène à l’accueil tant qu’elle n’est pas publiée. Chaque lien annonce sa langue aux lecteurs d’écran.

Le sélecteur est annoncé aux lecteurs d’écran comme une zone de navigation nommée **Langue**. Si une page porte deux sélecteurs, donnez à chacun un nom. Le champ **Nom de la région** est en haut de l’onglet **Réglages**.

## Proposer la langue du visiteur

Un visiteur qui lit l’anglais arrive de Google sur la version française d’une page qui existe en anglais. Le bloc **Suggestion de langue** lui affiche dans sa langue un bandeau qui mène à la même page en anglais.

1. Ouvrez le gabarit ou la composition qui porte le haut de vos pages.
2. Ajoutez le bloc **Suggestion de langue** en haut, au-dessus ou juste sous l’en-tête. Il n’a aucun réglage.
3. Réglez son apparence dans l’onglet **Styles**, avec les états **Par défaut**, **Survol** et **Focus**.
4. Pour ajouter des icônes, choisissez-les dans le panneau **Icônes** de l’onglet **Styles** : une au début du bandeau et une à la fin du lien.
5. Publiez le gabarit ou la composition.

Dans l’éditeur, le bandeau s’affiche dans votre langue avec une langue d’exemple. Sur votre site, son texte et la langue proposée dépendent de chaque visiteur.

### Savoir quand le bandeau s’affiche

Le bandeau ne s’affiche que si toutes ces conditions sont remplies. Sinon, il n’occupe aucune place.

- La page est un contenu qui a une traduction ou l’accueil d’un site de plusieurs langues.
- La traduction est publiée et n’est pas protégée par un mot de passe.
- Le navigateur du visiteur demande une autre langue avant celle de la page.
- Le visiteur n’est pas un robot. Les moteurs de recherche ne reçoivent jamais le bandeau.

La langue proposée est la première de la liste du navigateur qui existe pour la page. Le pays du visiteur ne sert qu’à départager deux variantes d’une même langue, comme l’anglais britannique et l’anglais américain. Une autre variante de la langue de la page n’est jamais proposée.

Le bandeau n’a pas de bouton de fermeture. Quand le visiteur suit le lien, la page est dans sa langue et le bandeau disparaît.

### Lire le texte du bandeau

Le bandeau est écrit dans la langue qu’il propose.

| Langue proposée | Texte affiché |
| --- | --- |
| Anglais | « View this page in your preferred language. » et le lien « Switch to English » |
| Français | « Voir cette page dans votre langue préférée. » et le lien « Passer en français » |

Pour une autre langue, le bandeau reste en anglais tant que vous ne l’avez pas traduit. Seul le nom de la langue s’écrit dans sa langue, par exemple « Switch to Deutsch ». [Traduire vos libellés et vos messages](https://lovelyrender.com/fr/documentation/traduire-les-libelles/) explique comment le traduire.

## Voir aussi

- [Sélecteur de langue](https://lovelyrender.com/fr/documentation/bloc-selecteur-de-langue/)
- [Suggestion de langue](https://lovelyrender.com/fr/documentation/bloc-suggestion-de-langue/)
- [Traduire une page](https://lovelyrender.com/fr/documentation/traduire-une-page/)
- [Ajouter une langue](https://lovelyrender.com/fr/documentation/ajouter-une-langue/)