Comment afficher un sélecteur de langues sur Webflow

Points clés :

• Le sélecteur de langues permet aux visiteurs de changer facilement de langue.
  
  
• Vous pouvez le créer manuellement ou utiliser un widget automatique (Weglot).
  
  
• Il s’intègre au menu principal, au header ou au footer du site.
  
  

Afficher un sélecteur de langues sur Webflow est essentiel si votre site hôtelier existe en plusieurs versions linguistiques. Ce petit élément améliore la navigation, renforce votre image internationale et optimise l’expérience utilisateur, notamment pour les clients étrangers.

Option 1 : Créer un sélecteur de langues manuellement

1. Créez les versions linguistiques de vos pages
   Avant tout, assurez-vous que votre site dispose de plusieurs versions, par exemple :
   
   
   • / → français
     
     
   • /en/ → anglais
     
     
2. Ajoutez un bloc texte ou menu déroulant dans le header
   Dans le Designer, ouvrez votre en-tête (Header ou Navbar).
   
   
   • Cliquez sur Add (+) > Text Block ou Dropdown Menu.
     
     
   • Renommez le texte avec les codes ou noms de langue :
     FR | EN ou Français / English
     
     
3. Reliez chaque langue à sa version du site
   
   
   • Sélectionnez le texte “FR” → créez un lien vers la page d’accueil française (/).
     
     
   • Sélectionnez “EN” → liez vers la page d’accueil anglaise (/en/).
     💡 Astuce : si vous avez plusieurs langues (ex. DE, ES), ajoutez-les simplement à la suite.
     
     
4. Stylisez le sélecteur
   Utilisez le panneau Style pour :
   
   
   • Harmoniser la typographie avec votre identité visuelle.
     
     
   • Ajouter un léger espacement entre les langues.
     
     
   • Mettre la langue active en gras ou dans une couleur différente.
     
     
5. Rendez le sélecteur visible sur toutes les pages
   
   
   • Si votre header est un Symbol (Component global), modifiez-le une seule fois.
     
     
   • Le changement se propagera automatiquement sur l’ensemble du site.
     
     

💡 Astuce design : ajoutez une petite icône de globe 🌐 à côté du sélecteur pour le rendre plus intuitif.

Option 2 : Ajouter un sélecteur automatique avec Weglot

Si vous utilisez Weglot, le sélecteur de langues est intégré automatiquement.

1. Installez Weglot sur votre site Webflow
   
   
   • Rendez-vous sur weglot.com.
     
     
   • Connectez votre projet Webflow et copiez la clé API Weglot.
     
     
   • Collez-la dans Project Settings > Custom Code > Head.
     
     
2. Personnalisez le sélecteur dans le tableau de bord Weglot
   
   
   • Rendez-vous dans Settings > Language Switcher.
     
     
   • Choisissez le style (menu déroulant, drapeaux, texte, icône).
     
     
   • Positionnez-le (en haut à droite, en bas, fixe ou intégré au menu).
     
     
3. Masquez le widget sur certaines pages si nécessaire
   Dans Webflow Designer, vous pouvez désactiver l’affichage sur certaines sections en appliquant une règle CSS ou en utilisant l’option display: none.
   
   

💡 Astuce : Weglot propose un code de positionnement personnalisable si vous souhaitez placer le sélecteur dans un composant spécifique de votre site (ex. navbar).

Bonnes pratiques

• Ne surchargez pas le header : le sélecteur doit rester discret mais visible.
  
  
• Préférez les codes de langue (FR, EN) plutôt que les drapeaux seuls pour plus de clarté.
  
  
• Vérifiez la cohérence du sélecteur sur mobile : il doit rester accessible dans le menu hamburger.
  
  
• Testez les redirections entre langues pour vous assurer qu’elles mènent vers les pages correspondantes.
  
  

Conclusion

Ajouter un sélecteur de langues sur Webflow est une étape clé pour rendre votre site hôtelier accessible à une clientèle internationale. Que vous optiez pour une version manuelle intégrée à votre header ou pour un widget automatique via Weglot, l’important est d’assurer une navigation fluide, intuitive et cohérente sur toutes les pages.