# Sélecteur de langue

Le bloc **Sélecteur de langue** permet à vos visiteurs de passer d’une langue à l’autre. Chaque entrée mène à la version de la page lue dans sa langue. Cette page décrit ses réglages, l’habillage de l’entrée, la présentation dans un menu et le cas d’une traduction absente.

## Ajouter le bloc

Insérez le bloc **Sélecteur de langue** ([Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/)), ou tapez `langue` dans la recherche des blocs. Posez-le dans l’en-tête ou le pied de page du site pour qu’il soit sur toutes les pages ([Écrire une fois l’en-tête, le menu et le pied de page](https://lovelyrender.com/fr/documentation/compositions/)).

Le bloc liste les langues de contenu du site, dans l’ordre de l’écran des langues. Chaque entrée mène à la version de la page que le visiteur lit. Un lecteur d’un article anglais qui choisit « Français » reçoit ce même article en français.

**Remarque :** Sur un site d’une seule langue, le bloc n’affiche rien sur le site. Ses réglages affichent « Ce bloc apparaît dès que le site a au moins deux langues de contenu ». Vous pouvez le poser avant d’ajouter votre seconde langue : il apparaîtra le jour où vous l’ajouterez ([Ajouter une langue](https://lovelyrender.com/fr/documentation/ajouter-une-langue/)).

## Régler le sélecteur

Sélectionnez le bloc **Sélecteur de langue**, onglet **Réglages**, panneau **Sélecteur de langue**.

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Nom de la région** | En haut de l’onglet **Réglages**, le nom que les lecteurs d’écran annoncent pour le sélecteur. Vide, il s’appelle **Langue**. | Vide |
| **Afficher** | **Le nom de la langue (Français, English)** ou **Le code court (FR, EN)**. | **Le nom de la langue (Français, English)** |
| **Affichage des langues** | **Côte à côte** : toutes les langues en rangée. **Dans un menu** : un bouton qui nomme la langue de la page ouvre la liste de toutes les langues. | **Côte à côte** |

![Les réglages du Sélecteur de langue : le champ Nom de la région, puis le panneau Sélecteur de langue avec Afficher sur Le nom de la langue (Français, English), Affichage des langues sur Côte à côte, puis l’avis qui dit que le bloc apparaît dès que le site a au moins deux langues de contenu.](https://static.lovelyrender.com/uploads/2026/10/937-doc-blocs2-selecteur-de-langue.png)

Sur la page publiée, chaque langue est écrite dans sa propre langue, avec une majuscule : l’allemand s’affiche « Deutsch ». Un visiteur reconnaît ainsi sa langue sans lire la vôtre.

La disposition se règle dans le panneau **Mise en page flex** : le sens, l’alignement et l’écart entre les langues. Le style enregistré **Sélecteur de langue** pose 8 px entre deux langues. Un cran choisi sur le curseur **Écart** remplace cet écart ; ramené à 0, le curseur rend les 8 px du style. Pour supprimer l’écart, retirez le style.

## Habiller l’entrée de langue

L’apparence se règle sur l’entrée. Le sélecteur contient un seul bloc **Entrée de langue**, à partir duquel chaque langue est dessinée. Vous ne pouvez pas en ajouter un second.

| État | Habille |
| --- | --- |
| **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. |

L’entrée porte le style enregistré **Entrée de langue** : un texte un peu plus petit, sans soulignement au repos, souligné au survol et au focus. La langue de la page est en couleur principale et en gras.

Dans l’éditeur, le sélecteur s’affiche comme sur la page : la langue de la page d’abord, dans son état **Actif**, puis les autres. Un clic sur l’une d’elles sélectionne l’entrée. Sur un site d’une seule langue, l’éditeur montre la vôtre et deux exemples pris parmi English, Français et Español.

**Conseil :** Gardez deux différences pour la langue de la page, une couleur et une graisse par exemple. Une différence de couleur seule échappe aux visiteurs qui distinguent mal les couleurs.

## Présenter les langues dans un menu

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

| Bloc | Rôle | Réglages |
| --- | --- | --- |
| **Entrée de langue** | Chaque langue de la liste. | L’onglet **Styles**, avec l’état **Actif** pour la langue de la page. |
| **Bouton du menu de langue** | Le bouton qui nomme la langue de la page et ouvre la liste. | L’onglet **Styles**, ses icônes et ses animations. Ses états sont **Par défaut**, **Survol**, **Focus** et **Actif**, celui du menu ouvert. |
| **Menu de langue** | La surface sur laquelle la liste s’ouvre. | L’onglet **Styles** et la disposition **Mise en page flex**. |

- Le bouton arrive avec une flèche vers le bas à la fin, qui devient une flèche vers le haut à l’état **Actif**. Ses icônes se règlent dans le panneau **Icônes** de l’onglet **Styles**, comme sur un [Bouton](https://lovelyrender.com/fr/documentation/bloc-bouton/) : une au début, une à la fin, chacune par état.
- Le bouton porte le style **Bouton du menu de langue** : un texte un peu plus petit, de l’espace intérieur et des coins arrondis. Il prend un fond léger au survol, au focus et menu ouvert.
- Le menu porte le style **Menu de langue** : un fond clair et un texte sombre, l’inverse en mode sombre. Il a des coins arrondis, une ombre et range les langues en colonne.
- En présentation **Côte à côte**, le bouton et le menu ne s’affichent pas. Leur habillage est gardé pour le jour où vous repassez en menu.

Le menu s’ouvre sous le bouton. En bas de page, sans place dessous, il s’ouvre vers le haut ; au bord droit de l’écran, vers l’intérieur. Il se referme par un second clic, un clic ailleurs dans la page, la touche `Échap` ou quand le focus le quitte. Il ne s’ouvre jamais au survol.

**Conseil :** Dans un pied de page, réglez le sélecteur sur **Dans un menu** et ajoutez un globe en icône de début. Vous obtenez une ligne discrète qui déplie vos langues vers le haut.

## Quand une traduction manque

- Une langue dans laquelle la page n’existe pas reste dans la liste. Son entrée mène à l’accueil de cette langue.
- Une traduction en brouillon ne compte pas : tant qu’elle n’est pas publiée, l’entrée de sa langue mène à l’accueil.
- Sur une page qui n’est pas un contenu, toutes les entrées mènent à l’accueil de leur langue. C’est le cas de l’accueil, d’une liste, d’une page de résultats de recherche ou d’une page d’erreur.

La liste montre toujours toutes les langues, celle de la page comprise. Le visiteur sait ainsi dans quelle langue il lit.

## Sur téléphone

Côte à côte, les langues suivent la disposition du panneau **Mise en page flex**, écran par écran. Dans un en-tête de téléphone, **Dans un menu** ne prend que la place d’un bouton, quel que soit le nombre de langues.

## Accessibilité

- Chaque lien déclare la langue de sa destination : un lecteur d’écran prononce « English » à l’anglaise.
- La langue de la page est signalée à l’écran et aux technologies d’assistance.
- Le sélecteur est annoncé comme une zone de navigation nommée **Langue**. Si la page a deux sélecteurs, donnez à chacun un **Nom de la région**.
- Dans un menu, le bouton est un vrai bouton : il s’atteint au clavier, s’actionne avec `Entrée` ou `Espace` et dit si la liste est ouverte. `Échap` referme la liste et rend le focus au bouton.

Un visiteur qui ne sait pas que votre page existe dans sa langue ne cherche pas de sélecteur. Le bloc [Suggestion de langue](https://lovelyrender.com/fr/documentation/bloc-suggestion-de-langue/) lui propose cette page dans sa langue.

## Voir aussi

- [Suggestion de langue](https://lovelyrender.com/fr/documentation/bloc-suggestion-de-langue/)
- [Ajouter une langue](https://lovelyrender.com/fr/documentation/ajouter-une-langue/)
- [Traduire une page](https://lovelyrender.com/fr/documentation/traduire-une-page/)
- [Proposer sa langue au visiteur](https://lovelyrender.com/fr/documentation/choix-de-la-langue/)