Tutoriel : comment créer un site Webflow multilingue

Webflow offre des possibilités et une liberté infinies à quiconque souhaite créer un site web.

Nous sommes d'ailleurs de fervents adeptes de l'outil no-code Webflow en raison de sa flexibilité, dont ont bénéficié bon nombre de nos utilisateurs. Nous avons même créé notre propre site web multilingue Webflow avec l'aide d'une agence web (Finsweet). N'hésitez pas à le cloner !

Très flexible et ergonomique, Webflow a de plus récemment lancé Webflow Localization, sa solution de localisation intégrée qui vous permet de créer un site multilingue pour vos nouveaux marchés.

Cette option est idéale pour les petits sites web qui ne prévoient pas de se développer. Mais, si vous cherchez une solution de localisation pour Webflow à même d'évoluer avec votre site web, Weglot pourrait bien être mieux adapté.

Alors, si vous pensez que l'heure est venue d'ajouter des langues à votre site Webflow, laissez-nous vous montrer comment procéder avec Webflow ou avec Weglot, étape par étape. Quelle que soit la solution que vous choisirez, consultez notre bibliothèque de sélecteurs de langue personnalisés à la fin de l'article. Vous pouvez les cloner dès maintenant sur votre site !

Webflow est-il Webflow ? Explication des différentes options

Oui, Webflow être multilingue, mais l'approche que vous choisissez dépend de vos besoins spécifiques et de vos exigences techniques. Vous disposez de deux options principales pour rendre votre Webflow multilingue :

Webflow est la solution native de la plateforme qui s'intègre directement à Webflow . Elle est idéale pour les équipes qui souhaitent gérer les traductions dans le cadre de leur Webflow existant et qui préfèrent une approche de la localisation centrée sur le design.

Solutions tierces telles que Weglot offrent une approche plus automatisée avec une traduction instantanée par IA, une gestion séparée des traductions et une compatibilité plus large, notamment avec les boutiques Webflow , les glossaires

Les deux options vous permettent de créer Webflow multilingues entièrement fonctionnels, mais elles diffèrent considérablement en termes de mise en œuvre, de modèles de tarification et d'ensemble de fonctionnalités. Examinons chaque option en détail afin de vous aider à faire le bon choix pour votre projet.

‍Utiliser le service de localisation de Webflow pour créer un site Webflow multilingue

Webflow a récemment lancé Webflow Localization, qui permet d'ajouter des langues à votre site web. Grâce à cette solution, vous pouvez concevoir, construire et personnaliser des sites localisés directement dans le Webflow Designer. Voici les possibilités qui s'offrent à vous :

• Construire des sites localisés tout en les visualisant en contexte
• Personnaliser vos sites locaux.
• Traduire automatiquement le contenu au sein de Webflow.
• Permettre à vos visiteurs de choisir leur langue préférée.

Grâce à ces fonctionnalités, Webflow vous ouvre la possibilité d'adapter votre site web à différentes communautés linguistiques et garantit son optimisation pour les moteurs de recherche grâce à un certain nombre de fonctionnalités intégrées de SEO multilingue.  

Pour activer le service de localisation de Webflow, suivez simplement les étapes suivantes :

Allez dans votre panneau de paramètres (Settings) cliquez sur « Localization ».

1. Choisissez votre premier marché local dans la liste déroulante. Il s'agit de la langue que vous ajouterez à votre site.
2. Configurer le nom, le sous-répertoire et les conditions de publication du site local.
3. Enregistrez vos modifications.
4. Si vous souhaitez ajouter d'autres langues, cliquez sur « Add new locale » et répétez les étapes 2 à 4.

Webflow s'est développée depuis son lancement initial. Elle offre désormais :

• Traduction automatique basée sur l'IA
• Aperçus gratuits pour les modules complémentaires de localisation
• Script RTL (de droite à gauche) automatique pour les paramètres régionaux arabe, persan, hébreu, ourdou et yiddish
• Localisation des actifs (forfaits avancés)
• Acheminement automatique des visiteurs
• Intégrations avec des systèmes de gestion de traduction tels que Smartling, Lokalise et Phrase.

Limitations Webflow

Cependant, des limitations importantes persistent au niveau du flux de travail. Les utilisateurs doivent toujours déclencher manuellement les traductions en cliquant avec le bouton droit sur les éléments ou en sélectionnant les pages une par une, puis répéter ce processus lorsqu'ils ajoutent du nouveau contenu. Et bien que Webflow une traduction automatique, ces traductions doivent souvent être révisées ou relues, sans aucune fonctionnalité d'IA pour vous aider à les améliorer ou à les affiner instantanément.

De plus, bien que le nouveau mode d'édition Webflow(qui a remplacé l'ancien éditeur à la fin de 2025) prenne désormais en charge la localisation, toute personne travaillant sur des traductions a toujours besoin d'un siège Workspace (15 à 39 dollars par mois et par personne). Cela peut faire Webflow l'une des options les plus coûteuses si l'on tient compte des coûts d'accès pour l'équipe. Bien que Webflow des intégrations TMS qui permettent d'effectuer des travaux de traduction en dehors de la plateforme, cela reste un obstacle important pour les équipes qui gèrent les traductions directement dans Webflow.

Enfin, Webflow n'est pas compatible avec Webflow , ce qui prive les propriétaires de boutiques en ligne d'une solution multilingue native.

Pour les équipes à la recherche d'un flux de travail plus rationalisé, Weglot donc une approche alternative.

Remarque : pour une comparaison détaillée, vous pouvez consulter notre page Comparons la localisation avec Weglot vs Webflow.

Ou, si vous préférez les vidéos, consultez notre vidéo comparative :

Ou bien, essayez Weglot gratuitement dès aujourd'hui sur votre site Webflow et découvrez avec quelle facilité vous pouvez vous doter d'un site multilingue.

Utiliser Weglot pour créer un site Webflow multilingue

L'approche à la traduction de Webflow Localization fait la part belle au design, ce qui est idéal pour ceux qui souhaitent se doter d'un site web multilingue dès la phase de conception du site.

Cependant, comme évoqué, il lui manque encore quelques-unes des fonctionnalités qui rendent l'ajout de langues encore plus pratique.

C'est là que Weglot entre en scène. La solution a été conçue pour traduire instantanément votre site web Webflow, ce qui vous permet de vous doter d'un site Webflow multilingue en quelques étapes seulement.

Weglot la traduction de sites web en proposant une solution complète de traduction de sites web basée sur l'IA, qui comprend la détection et la traduction automatiques du contenu, un contrôle total de la révision des traductions via une interface distincte, SEO multilingue , et bien plus encore.

De plus, vous pouvez générer instantanément des traductions conformes à votre marque en configurant votre modèle linguistique IA, qui apprend à partir de vos instructions personnalisées, de votre glossaire et de vos modifications manuelles antérieures.

Avec une structure tarifaire claire, vous obtenez exactement ce que vous voyez avec les forfaits payants Weglot. De plus, vous pouvez localiser votre site gratuitement avec le forfait gratuit Weglot, alors que Webflow ne propose que des forfaits payants.

‍

Exemple de scénario de coûts

Pour un site web de 50 000 mots traduit en 3 langues, géré par une équipe de 3 traducteurs :

‍

‍

Weglot offre également des avantages significatifs en matière de SEO multilingue pour vous aider à atteindre votre public international. Choisissez entre sous-répertoires et sous-domaines, ajoutez automatiquement des balises hreflang, et augmentez la visibilité de votre site sur les moteurs de recherche internationaux. Ces fonctionnalités sont disponibles dans tous nos forfaits, même le gratuit.

Pourquoi les équipes choisissent Weglot:

• Détection automatique du contenu: Weglot et traduit automatiquement votre contenu. Pas besoin de déclencher manuellement les traductions page par page, même lorsque vous ajoutez du nouveau contenu.
• Modèle linguistique IA: le modèle linguistique IA Weglot apprend à partir de vos instructions personnalisées, de votre glossaire et de vos modifications manuelles passées afin de générer des traductions plus précises et plus fidèles à votre marque au fil du temps.
• SEO multilingue:Weglot bonnes pratiques de Google bonnes pratiques les sites web multilingues, notamment en ajoutant automatiquement des balises hreflang à chaque version traduite de votre site, en traduisant les métadonnées et en hébergeant les URL traduites sous les sous-domaines ou sous-répertoires de votre choix. Tout cela garantit la visibilité de votre site web sur les moteurs de recherche internationaux.
• Aucun siège supplémentaire requis: gérez les traductions dans le tableau de bord séparé Weglot sans donner aux traducteurs l'accès à votre Webflow (ni payer pour des sièges supplémentaires).
• Fonctionne avec Webflow : contrairement à Webflow , Weglot entièrement compatible avec les boutiques Webflow .
• Tableau de bord centralisé pour les agences: gérez tous les sites web multilingues de vos clients à partir d'un seul Weglot , idéal pour les agences qui gèrent plusieurs projets.
• 10 ans d'expertise en localisation: Weglot spécialement conçu pour la traduction de sites web, avec des fonctionnalités perfectionnées au cours d'une décennie passée à aider plus de 110 000 marques à se développer à l'international.

Quelle solution Webflow choisir ?

Le choix entre Webflow et Weglot votre Webflow multilingue dépend de vos besoins spécifiques :

Choisissez Webflow si :

• Vous avez un petit site web avec un contenu limité qui ne sera pas considérablement développé.
• Votre équipe préfère travailler dans l'interface Webflow .
• Le processus de traduction manuelle pour chaque page et chaque élément ne vous dérange pas.
• Vous ne gérez pas une boutique en ligne.
• Le budget n'est pas une préoccupation majeure lorsqu'on tient compte du coût des places de travail.

Choisissez Weglot :

• Vous souhaitez bénéficier d'une détection et d'une traduction automatiques du contenu sans déclenchement manuel.
• Vous devez gérer plusieurs sites Web multilingues à partir d'un seul tableau de bord.
• Vous gérez une boutique en ligne Webflow .
• Vous souhaitez bénéficier d'un accès pour toute votre équipe sans frais supplémentaires par poste.
• Vous avez besoin de SEO multilingue avancées dans tous les niveaux de forfait.
• Vous préférez un flux de travail plus rationalisé et automatisé pour les mises à jour continues du contenu.

Tutoriel : comment ajouter plusieurs langues à Webflow

L'ajout de langues à votre site Webflow ne prend que 5 minutes avec Weglot. Regardez la vidéo, ou suivez les étapes écrites ci-dessous.

1. Créez un compte Weglot : c'est de là que vous gérerez toutes vos traductions via une interface distincte. Vous n'avez donc pas besoin d'inviter des tiers à votre éditeur de design Webflow.

2. Ajoutez votre nom de domaine : La langue d'origine de votre site et les langues que vous voulez ajouter (remarque : si vous utilisez un nom de domaine temporaire Webflow, utilisez cette intégration ou attendez d'avoir acheté un domaine personnalisé pour poursuivre).

3. Configurez vos entrées DNS : Cela vous permettra de créer vos sous-répertoires ou sous-domaines (vous pouvez choisir entre les deux options avec Weglot). Accédez à votre compte chez votre fournisseur de nom de domaine, sous l'onglet Entrées DNS. Créez une nouvelle entrée et sélectionnez CNAME. Ajoutez le code de la langue que vous ajoutez dans « Nom » et « websites.weglot.com » dans « données ». Cliquez ensuite sur « vérifier les DNS »

4. Configurez vos paramètres : Pour cette dernière étape, vous devez vous rendre dans l'espace administration de Webflow , « Settings » - « Custom Code ». Allez dans « Head Code » puis « Add code at the end of the head tag ». Copiez-collez le snippet HTML JavaScript à partir de votre compte Weglot.

‍

5. Vous avez terminé : Enregistrez les modifications et publiez votre site.

Et voilà ! Vous disposez désormais officiellement d'un Webflow multilingue, qui améliore l'expérience utilisateur de vos clients internationaux!

Weglot en détectant, traduisant et affichant instantanément votre Webflow . Nous vous offrons une première couche de traduction IA grâce aux principaux fournisseurs DeepL, Google Translate et Microsoft (inclus dans votre forfait mensuel), ainsi qu'un contrôle total pour modifier les traductions de votre site comme vous le souhaitez. Que vous les laissiez telles quelles, utilisiez notre modèle linguistique IA, ajoutiez une équipe de traduction au projet ou commandiez une traduction professionnelle directement dans votre Weglot , nous vous laissons le choix.

Cette fonctionnalité fait la différence car elle vous épargne le besoin d'activer manuellement les traductions sur chaque page pour chaque langue comme le requiert la solution de localisation de Webflow (qui vous obligera à répéter cette étape dès que vous ajouterez de nouvelles pages ou que vous ferez des mises à jour).

Une précision importante : puisque vous gérez traductions en dehors de votre projet Webflow, pas besoin de donner à votre équipe ou à vos traducteurs un accès à l'éditeur de design (et donc d'acheter davantage de licences à 19 $ par mois).

Personnalisez votre sélecteur de langue Webflow : No-Code

Abordons également les sélecteurs de langue. Webflow Localization et Weglot proposent tous deux un sélecteur par défaut que vous pouvez personnaliser. Cela permet aux visiteurs de votre site web de passer d'une langue à l'autre.

Une fois Weglot ajouté à votre projet Webflow, un sélecteur de langue apparaîtra automatiquement en bas à droite de votre site web.

La première option pour le modifier cela est d'utiliser notre éditeur visuel de sélecteur de langue. Simple d'utilisation, il vous permet de glisser-déposer facilement votre sélecteur de langue à un autre emplacement de votre site web.

Vous pouvez également effectuer un certain nombre de modifications simples au design, notamment :

• Afficher le nom de la langue
• Ajouter des drapeaux
• Afficher le code de la langue
• Modifier la taille

Cette fonction utile vous permet également de visualiser votre sélecteur sur les appareils mobiles. Vous pouvez ainsi effectuer des modifications personnalisées afin de garantir une expérience utilisateur inchangée quelle que soit la taille de l'écran.

Sélecteurs Webflow que vous pouvez cloner

Viennent ensuite les options de changement de langue que vous pouvez directement cloner, vous n'aurez donc pas à lever le petit doigt en matière de conception.

En tant que grands fans de Webflow chez Weglot , nous nous sommes associés à deux Webflow de premier plan pour créer des sélecteurs de langue que vous pouvez ajouter à votre site multilingue sans code personnalisé.

En 2020, nous avons travaillé avec Finsweet sur 16 commutateurs de langue différents avec notre kit d'interface utilisateur et début 2024, nous avons conçu 5 nouveaux designs supplémentaires avec Digidop.

En fait, notre collaboration avec Finsweet pour la création d'un sélecteur de langue a rencontré un tel succès qu'il a été cloné plus de 8 000 fois, ce qui nous a amenés à collaborer une nouvelle fois avec l'équipe pour vous proposer une mise à jour 2024, Weglot Kit 2.0! Nous sommes de retour avec une version mise à jour du projet original de sélecteur Webflow , ainsi que quelques nouveautés, vous donnant accès à 20 sélecteurs adaptés à tous les designs de sites web.

Consultez Webflow de Finsweet sur l'ajout d'un de leurs sélecteurs de langue personnalisés.

‍

Et voici un aperçu des commutateurs de langues que nous avons réalisés avec Digidop, voir la chute de Digidop 👉ici (avec tutoriel).

‍

Vous pouvez désormais choisir parmi 25 designs et modèles différents, que vous pouvez facilement ajouter via le Webflow .

Quelques sélecteurs de langues inspirants pour les utilisateurs de Webflow avec Weglot 

Passons aux choses concrètes pour jeter un œil sur les histoires d'entreprises qui ont utilisé Weglot pour ajouter plusieurs langues à leur site web et personnaliser leurs sélecteurs de langue.

1. Weglot

Comment ne pas ouvrir le bal avec notre propre site Webflow, Weglot 😉. Nous n'avons pas menti en disant être adeptes de Webflow, comme le montre notre choix de l'utiliser pour afficher notre site international.

Nous avons personnalisé notre sélecteur de langue afin qu'il corresponde à notre nouvelle image de marque. Et, parce que nous sommes spécialistes de la localisation de sites web, nous avons choisi son nom dans notre langue maternelle pour garantir une expérience utilisateur fluide à nos visiteurs anglais, français, allemands, italiens, espagnols, japonais et néerlandais.  

2. i-Mesh

L'exemple suivant est celui du créateur de textiles i-Mesh, qui pousse la personnalisation un peu plus loin (ce qui ne convient que si vous utilisez Webflow). 

L’entreprise a placé le sélecteur de langue dans la barre de navigation latérale de gauche, afin qu'il soit instantanément visible par tous les visiteurs du site. Et, plutôt que d'opter pour un code ou un nom de langue, elle ont simplement utilisé la moitié du mot, en ligne avec le style simple et moderne de son site. 

Sélecteur de langue ne rime pas avec complexité, et i-Mesh en est un bon exemple.  

3. Napta

Le logiciel français de gestion des ressources Napta a choisi Weglot pour initier son expansion en Europe grâce à nos fonctionnalités d'automatisation.

Cela a considérablement réduit les opérations internes de gestion des traductions pour l'équipe (le travail était entièrement manuel avant l'adoption d"un plugin de traduction).

« Le fait de disposer d'un site web multilingue et de pouvoir le gérer sans aucune compétence technique, associé au gain de temps que représente l'optimisation manuelle des éléments déjà traduits, a changé la donne pour nos performances en matière de référencement multilingue »
Estelle Barthes, Communications and content, Napta

Et ce sélecteur de langue ? Placé dans la barre de navigation (un choix courany, semble-t-il !), il s'harmonise parfaitement avec le reste du site.

Ayant opté pour des codes de langue, l'entreprise indique clairement que son site dispose de fonctionnalités multilingues.

‍

4. Dropcontact

Tout comme Weglot, Dropcontact est originaire de Paris et présente ses réalisations via un site Webflow. Le site est non seulement esthétique, mais il arbore aussi des animations de défilement attrayantes et une palette de couleurs bicolore apaisante évoquant un sentiment de calme et de plénitude. 

Mais ce qui distingue véritablement Dropcontact, c'est son sélecteur de langue parfaitement intégré, stratégiquement placé dans la barre de navigation principale. Ce choix ne se contente pas de rehausser l'esthétique du site : il souligne également l'engagement de Dropcontact en faveur de l'accessibilité et de l'inclusivité.

5. Big Blue

Ce fournisseur de services logistiques a fait des choix légèrement différents, tant pour l'emplacement que pour le design de son sélecteur de langue. Il est situé dans le pied de page, chaque langue étant accompagnée d'un drapeau dans le menu déroulant.

Les drapeaux ne sont peut-être pas au goût de tout le monde, mais ils peuvent s'avérer utiles, surtout si vous exercez des activités dans les pays en question. 

(Pour information, les drapeaux ne sont pas toujours recommandés. Par exemple, si vous souhaitez vous développer dans des pays hispanophones, utiliser le drapeau espagnol risque de vous mettre à dos vos clients d'Amérique latine). 

L'entreprise avait tout d'abord utilisé de discrets codes de langues. Mais elle a ensuite inclus le nom complet de la langue, ainsi qu'un drapeau dans une liste déroulante, rendant ainsi le sélecteur de langue à la fois subtil et accrocheur.

6. Armor Wallet

Enfin, nous avons dans notre portefeuille un service d'IA Web3 appelé Armor Wallet. Suivant la même logique que Napta, ils ont également opté pour un menu déroulant avec codes de langues plutôt que le nom complet des langues.

Et nous avons remarqué que le design du sélecteur de langue de Weglot x Finsweet a été cloné directement depuis leur site ! Proposant le japonais et le chinois simplifié sur son site, l'entreprise a conservé le même design général, indépendamment des différentes longueurs de caractères spécifiques à chaque langue.

Un site web multilingue Webflow, instantanément

Nous avons expliqué comment créer un site web multilingue Webflow avec la solution de localisation de Webflow et avec Weglot. Nous espérons que vous avez maintenant identifié la solution idéale pour ajouter des langues à votre site Webflow.

Nous avons également facilité la tâche de ceux qui souhaitent personnaliser leur site en nous associant à Finsweet pour créer 14 sélecteurs de langue différents que vous pouvez ajouter à votre site dès maintenant !

Les prix deWeglot commencent à partir de 15 € par mois, et vous pouvez commencer votre essai gratuit de 14 jours pour tester tout de suite. Nous avons des plans gratuits disponibles, jusqu'au niveau entreprise, afin que vous puissiez trouver le plan qui correspond le mieux à vos besoins.