Traduction de votre site

Webflow Tutoriel : Comment devenir multilingue

Webflow Tutoriel : Comment devenir multilingue
Elizabeth Pokorny
Rédigé par
Elizabeth Pokorny
Elizabeth Pokorny
Rédigé par
Elizabeth Pokorny
Examiné
Elizabeth Pokorny
Examiné par
Mise à jour le
25 mars 2024

Lorsqu'il s'agit de créer un site web sur Webflow , les possibilités et la liberté sont infinies.

Et nous sommes de fervents adeptes de l'outil sans code Webflow en raison de la flexibilité qu'il a apportée à bon nombre de nos utilisateurs. Nous avons même créé notre propre site web multilingue Webflow avec l'aide d'une agence web - Finsweet - que vous êtes libre de cloner.

En plus d'être très flexible et convivial, Webflow offre également une solution de localisation native qui vous permet de traduire le contenu de votre site.

Si vous êtes prêt à transformer votre site Webflow en un site multilingue, nous allons vous montrer étape par étape comment faire dans ce tutoriel sur le sélecteur de langue Webflow , et partager quelques modèles de sélecteurs de langue personnalisés que vous pouvez cloner dès maintenant sur votre site.

Le site Webflow prend-il en charge plusieurs langues ?

Dans un marché de plus en plus mondialisé, disposer d'un site web multilingue devient une nécessité. Une enquête récemment menée par CSA Research confirme que les sites web qui s'adressent aux utilisateurs dans leur langue maternelle suscitent un meilleur engagement, des sessions plus longues sur le site et une augmentation des conversions. Les statistiques montrent que 60 % des internautes achètent rarement ou jamais sur des sites exclusivement en anglais.

À cet égard, Webflow a récemment introduit des fonctionnalités (essentiellement un aperçu gratuit de leur solution native) qui permettent de rendre votre site web multilingue. Grâce à ces nouveaux outils, vous pouvez concevoir, construire et personnaliser des sites localisés directement dans le Webflow Designer. Voici ce que vous pouvez faire :

  • Construire visuellement des sites localisés.
  • Personnalisez vos lieux.
  • Traduire automatiquement le contenu en mode natif.
  • Intégrations directes avec les systèmes de gestion des traductions et API flexibles (coûts supplémentaires).
  • Permettre aux visiteurs de choisir leur langue préférée.

Grâce à ces fonctionnalités, Webflow peut être localisé pour prendre en charge le contexte natif de votre contenu, mais aussi entièrement optimisé pour répondre à la valeur SEO native de la langue dans laquelle vous avez choisi de traduire votre site Web. 

Bannière montrant les différents badges d'hiver que Weglot a obtenus au G2 en 2023

Localisation manuelle de votre site web

Si, en revanche, vous décidez d'opter pour une solution manuelle, il existe des solutions de rechange, telles que la création de sites web dupliqués, qui vous permettront d'obtenir la fonctionnalité manuellement.

Toutefois, cette solution fastidieuse vous obligerait à créer des pages ou des sites web en double. Le processus consiste à dupliquer les éléments de la collection à l'aide de pages statiques, mais cela signifie que vous devrez gérer plusieurs pages pour chaque langue.

N'oubliez cependant pas que chaque fois que vous modifiez le contenu original, vous devez faire appel à un traducteur professionnel pour traduire les versions dans les autres langues. Et si vous avez plusieurs langues, comme le français, l'allemand, le chinois, etc., vous pouvez rapidement voir à quel point cette tâche peut prendre du temps.

Vous devrez également configurer manuellement des sous-domaines ou des sous-répertoires linguistiques et ajouter des balises hreflang à votre code source afin que Google ne signale pas le contenu comme étant dupliqué. Il s'agit là de deux éléments clés du référencement multilingue qui aideront votre site web à apparaître dans les résultats des moteurs de recherche internationaux.

Fonctionnalités dont vous aurez besoin pour devenir multilingue

Webflowoffre une solution de traduction complète, mais il lui manque encore quelques fonctionnalités pour rendre le multilinguisme encore plus pratique, notamment le référencement multilingue, la localisation des ressources ou des médias, et la redirection des visiteurs vers d'autres langues, sans frais supplémentaires. C'est là que Weglot intervient. Weglot élimine la complexité de la traduction de sites web en offrant une suite complète de fonctionnalités de gestion de la traduction qui ajoutent de la valeur à votre projet de traduction de site web, avec une structure de prix claire. 

Avec Weglot, vous pouvez traduire votre site web Webflow en mode automatique grâce à la traduction automatique intégrée, sans effort de développement, et en collaborant rapidement à la gestion de la traduction (glossaire, exclusions de traduction, etc.) via un tableau de bord convivial.

La solution efficace de Weglot a été conçue pour traduire votre site web Webflow , vous permettant de devenir multilingue sur Webflow instantanément afin que vous puissiez atteindre un public mondial rapidement. En outre, Weglot offre également des avantages significatifs en matière de référencement, en vous permettant de choisir entre des sous-répertoires ou des sous-domaines et en ajoutant automatiquement des balises hreflang à votre site, ce qui jouera un rôle crucial dans l'alignement de votre site sur les meilleures pratiques de référencement de Google pour les sites Web multilingues.

Enfin, examinons la question de la tarification :

Prix entre les plans de localisation de Webflow et Weglot

Tutoriel : Comment ajouter plusieurs langues à Webflow

En termes simples, les étapes sont les suivantes :

  1. Créez un compte Weglot : c'est là que vous gérerez toutes vos traductions.
  2. Ajoutez votre nom de domaine, la langue maternelle de votre site, et les langues que vous souhaitez ajouter (Note, si vous utilisez un nom de domaine temporaire Webflow , utilisez cette intégration ou attendez d'avoir acheté un domaine personnalisé pour continuer).
  3. Ensuite, configurez vos enregistrements DNS pour créer vos sous-répertoires ou sous-domaines (vous pouvez choisir entre les deux options avec Weglot). Allez dans le compte de votre fournisseur de noms de domaine et dans l'onglet Enregistrements DNS. Créez une nouvelle entrée - sélectionnez CNAME. Ajoutez le code de la langue que vous ajoutez dans 'name' et dans 'data' ajoutez 'websites.weglot.com'. Cliquez ensuite sur "vérifier les DNS
  4. Pour la dernière étape, vous devez vous rendre dans la zone d'administration de votre site Webflow , sous "Paramètres" - "Code personnalisé". Allez dans 'Head Code' et 'Add code at the end of the head tag'. Copiez et collez le code HTML JavaScript depuis votre compte Weglot.
  5. Enregistrez les modifications et publiez votre site en cliquant sur le bouton bleu en haut à droite.

Et voilà, votre site Webflow est officiellement multilingue, ce qui améliore l'expérience utilisateur de votre site pour vos clients internationaux!

Weglot détecte, traduit et affiche votre site Webflow instantanément. Nous vous offrons une première couche de traduction automatique en utilisant les principaux fournisseurs DeepL, Google Translate et Microsoft (inclus dans votre plan mensuel), ainsi qu'un contrôle total de l'édition pour modifier les traductions de votre site comme vous le souhaitez. Que vous les laissiez telles quelles, que vous ajoutiez une équipe de traduction au projet, ou que vous commandiez une traduction professionnelle directement dans votre projet Weglot, nous vous laissons le choix.

De plus, ce ne sont pas seulement les mots de votre site que Weglot traduit, mais aussi le problème complexe de l'affichage de ce contenu. Grâce à l'ajout automatique de sous-répertoires ou de sous-domaines linguistiques, votre contenu est affiché sans que vous ayez besoin de passer par votre équipe de développement.

Weglot est une solution simple et économique pour traduire votre site. - Mike Robertson, directeur des opérations de vente chez Nikon

Webflow Sélecteur de langue

Lorsque vous rechargez votre site Webflow , vous verrez qu'un sélecteur de langue a été automatiquement ajouté en bas à droite de votre site. C'est la position par défaut une fois que vous avez connecté votre compte Weglot à votre site.

Le sélecteur de langue de Weglot est neutre dans son apparence. Cependant, vous pouvez apporter un certain nombre de modifications sans code à son apparence dans votre tableau de bord Weglot, y compris l'ajout de feuilles de style CSS personnalisées.

Vous pouvez également cloner l'un des nombreux sélecteurs de langue personnalisés que nous avons créés avec Finsweet et que vous trouverez dans notre kit d'interface utilisateur multilingueWebflow . Nous avons également publié récemment une deuxième série de sélecteurs de langue avec Digidop.

Voici un aperçu des commutateurs de langues que nous avons réalisés avec Finsweet :

webflow-Didacticiel sur le changement de langue

Consultez le didacticiel vidéo pour savoir comment en ajouter un :

Et voici un aperçu des commutateurs de langues que nous avons réalisés avec Digidop :

Webflow Language Switcher Inspiration

Laissons la théorie de côté pour un moment et jetons un coup d'œil sur les réussites d'entreprises qui ont utilisé Weglot pour ajouter plusieurs langues à leur site web et personnaliser leurs sélecteurs de langue.

Weglot

Page d'accueil de Weglot

Tout d'abord, nous aurions tort de ne pas mentionner notre propre site Webflow , Weglot 😉 . Nous n'avons pas menti en disant que nous étions des fans de Webflow, et cela se reflète dans notre propre choix de l'utiliser pour afficher notre présence mondiale.

Nous avons personnalisé notre sélecteur de langue pour qu'il corresponde à notre nouvelle image de marque. Et en tant que champions de la localisation de sites web, nous avons choisi le nom de la langue maternelle dans le nôtre pour nous assurer que l'expérience utilisateur est claire pour nos visiteurs anglais, français, allemands, italiens, espagnols, japonais et néerlandais.  

i-Mesh

Page d'accueil d'imesh

L'exemple suivant nous vient du créateur de textiles i-Mesh, qui va un peu plus loin dans la personnalisation (ce qui n'est possible que si vous utilisez Webflow). 

Ils ont ajouté leur sélecteur de langue dans leur barre latérale gauche, de manière à ce qu'il soit visible par tous les visiteurs qui font défiler leur site. Et plutôt que d'opter pour un code ou un nom de langue, ils ont simplement utilisé la moitié du mot, ce qui complète le style moderne et simple de leur site. 

Les commutateurs de langues n'ont pas besoin d'être compliqués, et i-Mesh en est un bon exemple.  

Big Blue

page d'accueil de bigblue

Ce fournisseur de services logistiques a opté pour quelque chose de légèrement différent, tant en ce qui concerne l'emplacement que le design de son sélecteur de langues. 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 du goût de tout le monde, mais ils ont leur place, surtout si vous avez des clients ou des partenaires dans les pays en question. 

(Pour info, ce n'est pas toujours une bonne idée d'utiliser un drapeau. Par exemple, si vous espérez vendre vos produits ou services dans des pays hispanophones et que vous utilisez le drapeau de l'Espagne, vous finirez par vous mettre à dos vos clients d'Amérique latine). 

Ils ont d'abord utilisé la subtilité d'un code de langue. Mais ils ont ensuite inclus le nom complet de la langue, ainsi qu'un drapeau dans une liste déroulante, ce qui rend le sélecteur de langue à la fois subtil et accrocheur.

Un site web multilingue Webflow , instantanément

Nous vous avons expliqué le processus multilingue de Webflow du début à la fin et nous espérons que vous avez trouvé la solution parfaite pour rendre votre site Webflow multilingue.

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

La traduction de sites web peut contribuer à augmenter le trafic et les conversions sur votre site, ce qui vous permettra d'acquérir de nouveaux clients sur de nouveaux marchés.

Les tarifs de Weglot commencent à partir de 15 € par mois, et vous pouvez commencer votre essai gratuit de 10 jours pour tester tout de suite.

Découvrir weglot

Prêt à afficher votre site web en plusieurs langues ?

Essayez Weglot sur votre site gratuitement (sans carte de crédit).

Blog d'icônes

Dans cet article, nous allons nous pencher sur les points suivants :
Essayez gratuitement