Comment traduire votre site Webflow à l'aide de l'IA

Webflow facilite la conception d'un site et sa publication en un clic. La traduction de ce site est là où les choses ralentissent.

Les options courantes vous demandent de dupliquer des pages dans des dossiers de langue, de copier du texte dans et hors d'un outil de traduction, ou de configurer chaque locale manuellement dans le Designer. Cela représente beaucoup d'entretien pour un site que vous avez construit pour être peu coûteux en entretien.

La traduction par IA élimine la plupart de ces tâches. Vous ajoutez une ligne de code à Webflow, choisissez vos langues, et les visiteurs peuvent lire votre site dans leur propre langue. Et tout cela est possible en quelques minutes grâce à Universally.

Dans ce guide, je vais vous montrer comment traduire votre site Webflow à l'aide de l'IA.

Pourquoi traduire votre site Webflow ?

Une page bien conçue ne peut pas faire son travail si le visiteur ne peut pas lire le contenu. Si vous recevez du trafic d'autres pays, la traduction est ce qui transforme ces visites en lecteurs et en clients.

Le problème est que les méthodes habituelles pour le faire dans Webflow impliquent un travail supplémentaire :

• La duplication des pages double votre entretien. Avec la méthode des dossiers, chaque modification apportée à une page anglaise doit être répétée dans chaque dossier de langue.
• L'option intégrée ajoute de la configuration et des coûts. Webflow Localize est un module complémentaire payant, et vous configurez et traduisez chaque locale à l'intérieur du Designer.
• Les sites clients nécessitent une réponse rapide. Si vous créez des sites Webflow pour des clients, l'ajout d'une langue ne devrait pas signifier une restructuration du projet.

Un outil de traduction par IA qui se situe en dehors de votre projet Webflow évite ces trois problèmes, et c'est l'approche que j'utiliserai dans ce guide.

Traduisez votre site Webflow avec Universally

Universally est un outil de traduction de sites Web par IA qui traduit votre site dans plus de 110 langues à l'aide d'une IA sensible au contexte. Sur Webflow, il se connecte avec une seule balise de script dans le code d'en-tête de votre site. Il n'y a pas de plugin à installer et pas de pages dupliquées à maintenir.

La meilleure partie est que les traductions sont appliquées dans le navigateur du visiteur sur les mêmes pages, aux mêmes URL, de sorte que votre projet Webflow reste exactement comme vous l'avez construit.

Universally n'est pas limité à Webflow. Il fonctionne également avec WordPress, Framer, Squarespace, Lovable et plusieurs autres plateformes. Vous pouvez voir la liste complète sur la page Plateformes prises en charge.

Voici ce que vous obtenez sur un site Webflow :

• Une seule balise de script : vous collez une seule ligne dans le code d'en-tête de Webflow. Rien d'autre dans votre projet ne change.
• Votre design reste intact : les mises en page, les interactions et les URL restent les mêmes dans chaque langue.
• Sélecteur de langue intégré : il apparaît dans le coin inférieur droit avec des drapeaux et des noms de langue, et les nouveaux visiteurs sont associés à la langue de leur navigateur.
• Plus que le texte du corps : les titres de page, le contenu méta et les attributs tels que le texte alternatif, les espaces réservés et les aria-labels sont également traduits.
• Lancement langue par langue : chaque langue reste cachée aux visiteurs jusqu'à ce que vous la mettiez en ligne.
• Glossaire et édition manuelle : sur les plans payants, vous pouvez verrouiller les termes de la marque et corriger toute ligne traduite.

Universally propose un plan gratuit avec 1 site web, 1 langue et 2 000 mots traduits. C'est suffisant pour le tester sur quelques pages. Les plans payants commencent à 7,50 $/mois (facturés annuellement) et ajoutent plus de mots et de langues, ainsi que des règles de glossaire et l'éditeur visuel.

Étape 1 : Créer un projet Webflow dans Universally

À partir de là, cliquez sur Enregistrer les modifications, puis Publiez ces modifications sur votre site.

Ensuite, vous devrez sélectionner la plateforme sur laquelle se trouve votre site web.

Allez-y et sous « Sélectionner votre technologie », choisissez Webflow.

Ensuite, entrez le Domaine de votre site, tel que exemple.com, et donnez un Nom de projet à votre projet.

Confirmez ensuite la Langue source, qui est la langue dans laquelle votre site est rédigé. Elle est définie par défaut sur Anglais (américain). Vérifiez bien celle-ci, car une mauvaise langue source vous donnera de mauvaises traductions sans aucun message d'erreur.

Cliquez simplement sur Suivant lorsque vous avez terminé.

Étape 2 : Ajouter le script Universally à Webflow

Universally vous affiche maintenant une balise de script avec la clé unique de votre projet. Elle ressemble à ceci :

<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>

Cliquez sur Copier la ligne.

Ensuite, vous pouvez vous rendre sur votre projet Webflow que vous souhaitez traduire.

Cliquez simplement sur l'icône Webflow dans le coin supérieur gauche et allez dans Paramètres du site.

Après cela, vous pouvez aller dans Code personnalisé » Code d'en-tête et coller le script.

Assurez-vous d'utiliser le champ de code d'en-tête pour l'ensemble du site plutôt que les paramètres de code personnalisé d'une seule page. De cette façon, le script se charge sur chaque page de votre site.

À partir d'ici, cliquez sur Enregistrer les modifications, puis sur Publier ces modifications sur votre site.

Remarque : Le code personnalisé dans Webflow nécessite un plan de site actif ou un plan Espace de travail Core, Growth, Agency ou Freelancer. Si vous ne voyez pas le champ de code d'en-tête, votre plan est la première chose à vérifier.

Une fois cela fait, retournez sur Universally et cliquez sur Vérifier la connexion.

Universally charge votre page d'accueil et confirme que le script est en place.

Astuce de pro : Si la vérification échoue, assurez-vous d'avoir publié après avoir enregistré. Les modifications non publiées dans Webflow n'incluent pas le script, et la vérification ne regarde que votre page d'accueil.

Étape 3 : Choisir vos langues et mettre en ligne

Une fois la connexion confirmée, vous pouvez choisir les langues que vous souhaitez proposer.

Allez-y et cliquez sur Ajouter une langue.

Ensuite, vous pouvez cliquer sur le menu déroulant et choisir parmi plus de 110 langues.

Après avoir sélectionné une langue, vous pouvez choisir une Région et un Format d'URL.

Lorsque vous avez terminé, cliquez simplement sur Ajouter une langue.

C'est tout ! Votre site Webflow sera désormais automatiquement traduit dans les langues que vous avez ajoutées.

Pour désactiver une langue, vous pouvez désactiver le commutateur En direct à côté de celle-ci.

C'est pratique si vous travaillez sur le site d'un client. Vous pouvez installer le script tôt, examiner les pages traduites, et activer chaque langue en direct une fois que le client a approuvé. Si un marché n'est pas prêt, désactivez son commutateur, et les traductions enregistrées restent là où elles sont.

Maintenant, si vous souhaitez ajouter d'autres langues, répétez cette étape.

Étape 4 : Tester votre site Webflow traduit

Pour vérifier que tout fonctionne, ouvrez votre site publié dans une fenêtre de navigateur privée, afin de ne pas voir une version mise en cache.

Vous devriez voir le sélecteur de langue dans le coin inférieur droit. Choisissez votre nouvelle langue, et le texte de la page bascule.

Le premier chargement dans une nouvelle langue peut prendre un moment pendant que la page est traduite. Après cela, les traductions sont mises en cache, donc les visites répétées se chargent sans attente.

Bonus : Affiner vos traductions Webflow

La traduction par IA vous amène la majeure partie du chemin. Ces trois paramètres vous aident pour le reste.

• Modifiez toute ligne traduite. Sur un plan Universally payant, ouvrez l'éditeur visuel depuis la barre latérale de votre projet, filtrez par langue et cliquez sur le texte que vous souhaitez modifier. C'est vraiment utile si vous voulez vous assurer que votre site a une apparence visuellement époustouflante tout en conservant le contenu traduit.
• Gardez la cohérence des termes de marque. Les règles de glossaire indiquent à l'IA de ne pas traduire des mots comme ceux de votre marque ou de vos produits, ou de toujours traduire un terme d'une certaine manière. Notre guide sur comment configurer un glossaire de traduction vous explique comment faire. Les règles fonctionnent de la même manière sur Webflow.
• Laissez certains contenus non traduits. Allez dans Règles de traduction et ajoutez les éléments que vous souhaitez ignorer dans le champ Sélecteurs CSS d'exclusion, un par ligne, tels que .pricing-table ou #code-examples. Vous pouvez également ajouter translate="no" à un élément dans Webflow. Gardez à l'esprit que le paramètre Exclure les pages ne s'applique pas aux sites Webflow, donc les sélecteurs CSS sont la solution. Pour plus de détails, veuillez consulter notre documentation sur les sélecteurs CSS d'inclusion et d'exclusion.

FAQ sur la traduction d'un site Webflow

1. Ai-je besoin d'un plan Webflow payant pour utiliser Universally ?

Universally nécessite la fonctionnalité de code personnalisé de Webflow, qui exige un plan de site actif ou un plan d'espace de travail Core, Growth, Agency ou Freelancer. Le côté Universally peut commencer avec le plan gratuit, qui couvre 1 site Web, 1 langue et 2 000 mots traduits.

2. En quoi Universally diffère-t-il de Webflow Localize ?

Webflow Localize est la fonctionnalité de localisation intégrée de Webflow, où vous configurez chaque locale et gérez son contenu dans le Designer. Universally fonctionne en dehors de votre projet avec une balise de script et traduit les pages à la demande avec l'IA.

3. La traduction de mon site Webflow affectera-t-elle mon référencement ?

Vos classements existants restent les mêmes, car vos URL et vos pages sources ne changent pas. Les moteurs de recherche continuent de voir le contenu dans votre langue d'origine. Cela signifie également que les versions traduites ne sont pas indexées séparément, et Universally n'ajoute pas de balises hreflang sur les sites Webflow.

4. Universally traduit-il le contenu CMS de Webflow ?

Universally traduit le texte du HTML de votre page publiée, ce qui inclut le contenu CMS que Webflow rend dans la page. Le texte que JavaScript ajoute après le chargement de la page, comme certains widgets tiers, peut rester dans la langue d'origine.

5. Puis-je modifier les traductions de l'IA ?

Chaque traduction peut être modifiée sur un plan payant. Ouvrez l'écran Traductions dans votre projet, trouvez la ligne et cliquez dessus pour la modifier. Votre modification remplace la version IA et est marquée comme Vérifiée. Universally conserve les 50 dernières versions de chaque traduction, vous pouvez donc restaurer une version antérieure.

6. Qu'est-ce que Universally ne traduira pas sur un site Webflow ?

Quelques éléments restent dans votre langue d'origine. Il s'agit notamment des pages protégées par mot de passe, du texte ajouté par JavaScript après le chargement de la page et des données structurées JSON-LD. Il y a aussi un plafond d'environ 2 000 chaînes de texte par page, ce que la plupart des pages n'atteindront pas.

Une fois le script installé et votre première langue en ligne, l'ajout d'un autre marché ne prend que quelques clics.

J'espère que cet article vous a aidé à apprendre comment traduire votre site Webflow à l'aide de l'IA. Vous voudrez peut-être aussi consulter notre guide sur comment configurer un glossaire de traduction et comment traduire les pages de paiement WooCommerce.

Commencez à traduire votre site Webflow gratuitement.