Comment ajouter un menu déroulant de langues à votre Webflow

Créer un site web multilingue, c'est offrir aux visiteurs internationaux un accès direct au contenu qu'ils sont venus consulter. Un menu déroulant de sélection de langue dans Webflow répond exactement à cet objectif. Nous allons vous présenter trois méthodes pour en créer un : l'élément « Locales » Webflow, un bouton bascule JavaScript personnalisé et une configuration automatisée avec Weglot. Pour chacune de ces méthodes, vous découvrirez le chemin de navigation exact, leurs différences et celle qui correspond le mieux à votre façon de travailler.

En résumé :

• L'élément « Liste des langues » natif Webflowgénère automatiquement des options de menu déroulant à partir des langues que vous avez activées, ce qui vous évite d'avoir à créer manuellement un lien pour chaque langue.
• Dans le cas de configurations multi-projets ou de sous-domaines où le sélecteur natif ne convient pas, un petit bouton de basculement en JavaScript intégré au code personnalisé permet de rediriger les visiteurs vers les différentes versions linguistiques.
• Les outils de traduction basés sur l'IA, tels que Weglot le menu déroulant, les balises hreflang et des URL optimisées pour le référencement en une seule configuration, et sont compatibles avec Webflow (ce qui n'est pas le cas de Webflow ).
• L'accessibilité sur mobile est essentielle : définissez des zones tactiles d'au moins 44 x 44 pixels et utilisez la fonction « Ouvrir au clic » plutôt que le survol sur les écrans tactiles.

Trois façons d'ajouter un menu déroulant de langues dans Webflow

Avant de choisir une méthode, il est utile de savoir ce que chacune d'entre elles vous apporte.

La liste des paramètres régionaux Webflowest idéale pour les équipes qui utilisent déjà Webflow et dont la configuration est déjà bien établie. Si ce n'est pas encore le cas, la mise en place demande un effort modéré. Elle nécessite un Webflow payant avec la fonctionnalité de localisation activée, et elle n'est pas compatible avec Webflow .

Un bouton basculant JavaScript développé sur mesure convient aux configurations multi-projets ou aux sous-domaines. La mise en place demande un effort faible à moyen. Cette solution est flexible, mais vous devrez assurer la maintenance du code.

Weglot la solution idéale pour les équipes qui recherchent à la fois une traduction de haute qualité, un sélecteur de langue et une configuration SEO, le tout sans intervention manuelle. La mise en place est très simple. Il est compatible avec tous Webflow (y compris E-commerce) et ajoute automatiquement des balises hreflang.

Méthode 1 : Créer un sélecteur de langue natif à l'aide de la liste des langues Webflow

• Utilisez cette méthode si vous avez déjà activé Webflow dans votre projet.

Étape 1 : Activez la localisation et ajoutez vos paramètres régionaux

Dans Webflow , accédez à Paramètres > Localisation, puis cliquez sur Activer la localisation. Choisissez votre langue principale, puis cliquez sur Ajouter une langue pour chaque langue que vous souhaitez prendre en charge.

Pour chaque nouvelle configuration régionale, définissez son nom d'affichage et son sous-répertoire, puis cochez la case « Activer la publication dans ce sous-répertoire ». Les configurations régionales pour lesquelles la publication n'est pas activée n'apparaîtront pas dans votre sélecteur par la suite ; ne sautez donc pas cette étape.

Étape 2 : Ajouter un menu déroulant à votre barre de navigation

Ouvrez le panneau « Ajouter » et faites défiler jusqu'à « Avancé ». Faites glisser un élément « Menu déroulant » dans votre barre de navigation. Ouvrez le Navigateur, développez le menu déroulant pour afficher ses éléments enfants, puis supprimez les trois liens de remplacement (Lien 1, Lien 2, Lien 3). Vos paramètres de langue s'afficheront ici une fois que nous les aurons configurés à l'étape suivante.

Étape 3 : Ajouter une liste de paramètres régionaux

Dans le panneau « Ajouter » > « Avancé », faites glisser un élément « Liste des langues » dans l'élément « Navigation » du menu déroulant. La liste des langues fonctionne comme une liste de collections : elle génère automatiquement un élément par langue publiée, ce qui vous évite de créer un lien distinct pour chaque langue.

Étape 4 : Choisissez ce qui s'affiche dans le menu déroulant

Cliquez sur l'élément « Lien » à l'intérieur d'un élément de localisation, puis ouvrez le panneau des paramètres de l'élément et cliquez sur l'icône en forme de point violet à côté du champ « Texte ». Sous « Élément de la liste des localisations », choisissez comment chaque option doit être libellée : « Localisation (en-US) », « Langue (en) », « Pays (US) » ou « Nom d'affichage (Anglais (États-Unis)) ».

Pour que le menu déroulant affiche la langue active, sélectionnez le bloc de texte à l'intérieur du menu déroulant, cliquez sur le point violet à côté de « Texte », puis, sous « Langue actuelle », choisissez le même format de libellé.

Étape 5 : Ajouter des drapeaux et optimiser pour les appareils mobiles

Si vous avez téléchargé des images d'affichage pour chaque langue, ajoutez un élément « Image » à l'intérieur de l'élément « Locale », cliquez sur le point violet à côté de « Image », puis, sous « Locales List Item », sélectionnez « Locale Image ». Répétez l'opération à l'intérieur du menu déroulant en utilisant « Current Locale > Locale Image » pour afficher un drapeau correspondant à la langue active.

Sur mobile, sélectionnez le menu déroulant et configurez Menu > Ouvrir au clic (et non au survol, car le survol ne fonctionne pas sur les écrans tactiles). Vérifiez que les zones tactiles mesurent au moins 44 x 44 pixels afin que le sélecteur puisse être facilement sélectionné d'un simple toucher.

Méthode 2 : Bouton bascule JavaScript personnalisé

Utilisez cette méthode lorsque vos versions linguistiques se trouvent dans Webflow distincts ou sur des sous-domaines différents (par exemple, example.com et es.example.com), et que la liste des paramètres régionaux native ne suffit pas. Vous devrez impérativement disposer de compétences en programmation, ou faire appel à un développeur de votre équipe capable de s'en charger.

Add a button or link to your navbar and give it a class like language-toggle. Then paste a short script into Page Settings > Custom Code > Before </body> tag that redirects the visitor to the equivalent page on your alternate domain, preserving the path so they don’t land on the homepage of the other language.

Pour trois langues ou plus, étendez cette approche en ajoutant un attribut « data » à chaque bouton (par exemple, data-language=« fr ») et un objet de correspondance qui associe chaque code à son domaine.

Méthode 3 : Sélecteur automatique avec Weglot

Utilisez cette méthode si vous ne souhaitez pas vous occuper du code et que vous voulez que le sélecteur de langue, les traductions, les balises hreflang et les URL optimisées pour le référencement soient gérés en une seule configuration. Elle est particulièrement utile pour les boutiques Webflow , que Webflow ne prend pas en charge.

Commencez par créer un Weglot et ajoutez le nom de domaine de votre Webflow .

Sélectionnez vos langues source et cible, puis copiezsnippet Weglot snippet collez-le dans les paramètres Webflow > Code personnalisé > Code d'en-tête. Publiez votre site : un sélecteur de langue s'affiche automatiquement, et le tour est joué ! Votre contenu est traduit et affiché dans des sous-répertoires ou des sous-domaines optimisés pour le référencement, avec des balises hreflang et des métadonnées traduites gérées pour vous.

Vous pouvez modifier le sélecteur de langue de manière visuelle depuis le Weglot : faites-le glisser n'importe où sur la page, activez ou désactivez les drapeaux, et choisissez d'afficher les noms de langues, les codes de langues ou les codes de pays.

Pour les designs Webflow, le kitWeglot comprend plus de 20 sélecteurs de langue clonables, prêts à être intégrés dans le Designer.

Les équipes qui utilisent Webflow choisissent Webflow Weglot plusieurs raisons. Grâce à la détection automatique du contenu, les nouvelles pages sont traduites sans qu'aucune intervention manuelle ne soit nécessaire. Les traductions sont gérées dans un tableau de bord distinct, ce qui évite aux traducteurs d'avoir besoin d'un accès Webflow . Weglot est compatible avec Webflow , contrairement à Webflow . De plus, SEO multilingue intégré à toutes les formules.

Webflow natif Webflow Weglot: comparaison côte à côte

Si vous hésitez entre les deux parcours les plus courants, voici en quoi ils diffèrent sur les points qui comptent généralement le plus :

• Configuration du sélecteur de langue : dans Webflow manuellement (glisser-déposer le menu déroulant, glisser-déposer la liste des langues, lier le texte, définir le style). Weglot automatiquement le sélecteur de langue lors de l'installation.
• Synchronisation du contenu entre les différentes langues : Webflow une mise à jour manuelle pour chaque page lorsque vous modifiez le contenu. Weglot les nouveaux contenus et les traduit automatiquement.
• Webflow : Webflow native Webflow n'est pas compatible avec les boutiques Webflow . Weglot .
• Balises hreflang et URL optimisées pour le référencement : Webflow automatiquement ces éléments si vous utilisez la configuration par sous-répertoires de Localization, mais vous devrez tout de même configurer les noms d'affichage et la publication pour chaque langue. Weglot automatiquement les balises hreflang et les URL optimisées pour le référencement.
• Accès pour les équipes : Webflow nécessite des licences Workspace payantes pour toute personne chargée de modifier les traductions dans le Designer. Weglot les traductions via un tableau de bord distinct inclus dans toutes les formules.

Rendre votre Webflow accessible partout dans le monde

Un menu déroulant de sélection de la langue n'est qu'un petit élément de votre barre de navigation, mais c'est le signe le plus visible indiquant que votre site s'adresse à plusieurs publics. Que vous le créiez à l'aide de la liste « Locales » Webflow, que vous le programmiez vous-même ou que vous l'automatisiez avec Weglot, l'objectif reste le même : permettre aux visiteurs d'accéder rapidement à la bonne langue, sans aucune difficulté.

Si vous souhaitez SEO multilingue le sélecteur de langue, les traductions et le SEO multilingue en une seule configuration (y compris pour Webflow ), essayez Weglot pendant 14 jours sur votre Webflow .