# Suggestion de langue Le bloc **Suggestion de langue** affiche un bandeau qui propose au visiteur la version de la page dans sa langue. Le bandeau est écrit dans cette langue et ne redirige jamais le visiteur. Cette page décrit son habillage, les conditions de son affichage et le choix de la langue proposée. ## Ajouter le bloc Insérez le bloc **Suggestion de langue** ([Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/)) une fois, dans l’en-tête du site ou en haut de vos gabarits : le visiteur le voit en arrivant. Posé là, il vaut pour toutes les pages qui l’affichent. Le bloc ne redirige jamais. Un visiteur dont le navigateur est réglé en anglais peut vouloir lire votre page française : le bandeau lui propose sa langue et il choisit. Google déconseille de rediriger selon la langue supposée du visiteur. **Remarque :** Sur un site d’une seule langue, le bloc n’affiche rien. Ses réglages affichent « Ce bloc apparaît dès que le site a au moins deux langues de contenu ». Vous pouvez le poser dès maintenant : il fonctionnera le jour où vous ajouterez une langue ([Ajouter une langue](https://lovelyrender.com/fr/documentation/ajouter-une-langue/)). ## Habiller le bandeau Le bloc n’a rien à régler dans son onglet **Réglages** : son panneau **Suggestion de langue** ne porte qu’une aide. Le bandeau se règle dans l’onglet **Styles**. | Panneau | Usage | | --- | --- | | **Icônes** | Une icône au début du bandeau, devant la phrase. Une icône à la fin du lien, après le nom de la langue. Les deux sont facultatives et chacune peut changer selon l’état, comme sur un [Bouton](https://lovelyrender.com/fr/documentation/bloc-bouton/). | | **Couleurs**, **Typographie**, **Taille et espacement**, **Bordures**, **Effets**, **Transitions** | L’apparence du bandeau, dans les états **Par défaut**, **Survol** et **Focus**. L’état **Focus** s’allume quand le lien prend le focus au clavier. Voir [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/), [Mettre en forme un texte](https://lovelyrender.com/fr/documentation/typographie/) et [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/). | | **Mise en page flex** | La phrase et le lien, en rangée. Le style enregistré **Suggestion de langue** pose 8 px entre eux. | | Icône | Place | Changement d’état | | --- | --- | --- | | Au début | Devant la phrase, en tête du bandeau. | Le survol ou le focus du bandeau. | | À la fin | Dans le lien, après le nom de la langue. | Le survol ou le focus du lien. | Le bloc n’a pas d’onglet **Animations** : le bandeau est composé par le serveur à chaque visite. Dans l’éditeur, le bandeau s’affiche dans la langue de votre interface, avec un nom de langue d’exemple, pour que vous puissiez l’habiller. Sur le site, le texte et la langue proposée dépendent de chaque visiteur. **Conseil :** Une flèche vers la droite en icône de fin dit au visiteur que le lien l’emmène. Réglez sur l’état **Survol** une flèche un peu décalée : le lien réagit au survol comme un bouton. ## Quand le bandeau apparaît Le bandeau ne s’affiche que si toutes ces conditions sont réunies. Sinon, il n’occupe aucune place dans la page. | Condition | Raison | | --- | --- | | La page est un contenu qui a une traduction, ou l’accueil d’un site en plusieurs langues. | Une liste, une page de résultats de recherche ou une page d’erreur n’a pas d’équivalent dans une autre langue. Sur l’accueil, le bandeau propose l’accueil de l’autre langue. | | La traduction est publiée et sans mot de passe. | Un brouillon mènerait à une adresse d’aperçu, une page protégée à un formulaire de mot de passe. | | Le navigateur du visiteur demande une autre langue avant celle de la page. | C’est ce que le visiteur déclare lire. | | Le visiteur n’est pas un robot. | Un moteur de recherche lirait le bandeau comme du texte de votre page. | Le bandeau n’a pas de bouton de fermeture. Il disparaît quand le visiteur suit le lien : la page dans sa langue n’affiche plus le bandeau. ## La langue proposée - Le bandeau suit les langues que le navigateur déclare, dans leur ordre de préférence. Il ne part pas du pays du visiteur. - La première langue de cette liste qui existe pour la page décide. Si c’est la langue de la page, rien ne s’affiche. Un navigateur réglé en allemand puis en anglais, sur une page française traduite en anglais seulement, se voit proposer l’anglais. - Un navigateur réglé en français de Suisse trouve votre français : une langue simple sert toutes ses variantes. - Quand le site a plusieurs variantes d’une langue, anglais britannique et anglais américain par exemple, le bandeau propose celle que le navigateur nomme. À défaut, il propose celle du pays du visiteur, puis la première dans l’ordre de vos langues. - Le bandeau ne propose jamais une autre variante de la langue de la page. ## Le texte du bandeau La phrase, le lien et le nom de la langue sont écrits dans la langue proposée : | Langue proposée | Phrase | Lien | | --- | --- | --- | | Anglais | View this page in your preferred language. | Switch to English | | Français | Voir cette page dans votre langue préférée. | Passer en français | Le nom de la langue est écrit dans cette langue, avec une minuscule dans la phrase : « Passer en français ». **Attention :** Le produit est livré en français et en anglais. Pour une autre langue de contenu, la phrase et le lien restent en anglais. Seul le nom de la langue est dans sa propre langue : « Switch to Deutsch ». Traduisez-les dans l’écran des traductions de l’interface, onglet **L’éditeur de blocs du produit**, en cherchant `language-suggestion`. Gardez le `%s` du lien : c’est là que s’insère le nom de la langue ([Traduire vos libellés et vos messages](https://lovelyrender.com/fr/documentation/traduire-les-libelles/)). ## Sur téléphone La phrase et le lien sont en rangée. Pour que le lien passe sous la phrase sur un écran étroit, choisissez l’écran Mobile. Activez **Passage à la ligne** dans le panneau **Mise en page flex**. ## Accessibilité - Le bandeau déclare sa langue : un lecteur d’écran change de voix pour le lire. - Le lien déclare la langue de sa destination. - Les icônes sont décoratives et cachées aux lecteurs d’écran. - Le bandeau est annoncé comme une note : il n’interrompt pas la lecture. ## Voir aussi - [Sélecteur de langue](https://lovelyrender.com/fr/documentation/bloc-selecteur-de-langue/) - [Proposer sa langue au visiteur](https://lovelyrender.com/fr/documentation/choix-de-la-langue/) - [Traduire une page](https://lovelyrender.com/fr/documentation/traduire-une-page/)