Webflow Localization : Tout ce qu'il faut savoir

Localisation Webflow : Nouveautés et Utilisation

Lors de la conférence Webflow de 2023 (Webflow Conf) de nombreuses nouvelles fonctionnalités ont été introduites, dont la "Localization".

Similaire à d'autres services de localisation, la localisation Webflow offre des solutions complètes pour personnaliser les sites web pour un public mondial, de la conception à la traduction en passant par le SEO.

Dans cet article, nous allons explorer ce qu'est la localisation, comment elle fonctionne et comment l'utiliser dans le designer Webflow pour obtenir des résultats optimaux.

Qu'est-ce que la Localisation ?

La localisation d'un site web est le processus d'adaptation d'un site pour le rendre plus adapté et attrayant pour un marché cible spécifique, généralement basé sur leur localisation géographique, leur langue et leurs préférences culturelles.

Par exemple, la localisation du site de McDonald's est évidente dans différents pays. Le site français (mcdonalds.fr) utilise la langue française, et le site indien propose un menu sans bœuf, adapté aux habitudes alimentaires locales.

Les conceptions de site et les promotions varient également pour refléter les nuances culturelles régionales et se conformer aux lois locales, assurant une expérience sur mesure pour les clients de chaque marché.

Bien sûr, McDonald's est un exemple extrême, et parfois les sites web veulent simplement modifier certains aspects de leurs pages pour les rendre plus attrayantes pour les clients locaux et les rendre plus pertinentes.

Comment Fonctionne la Localisation Webflow

La localisation Webflow permet aux utilisateurs de créer et de gérer plusieurs versions de leur site web pour différentes régions et langues directement dans la plateforme Webflow.

Ils le font généralement en ajoutant la locale primaire et secondaire.

Une "locale" dans le contexte du développement web et de la localisation fait référence à un marché géographique, culturel ou linguistique spécifique pour lequel un site web ou un contenu numérique est adapté.

Cela comprend généralement une combinaison de paramètres linguistiques et régionaux, comme la langue, les formats de date et d'heure, la devise, le format des nombres et d'autres normes culturelles. Par exemple, "en-US" représente l'anglais tel qu'utilisé aux États-Unis, tandis que "fr-CA" représente le français tel qu'utilisé au Canada.

Le processus de localisation sur Webflow implique généralement :

1. Ajout de locales : Les utilisateurs peuvent ajouter différentes locales à leur site, chacune représentant une version linguistique ou régionale différente.
2. Personnalisation de la conception et du contenu : Dans Webflow Designer, les utilisateurs peuvent concevoir et construire leur site avec du contenu localisé. Ils peuvent personnaliser les pages statiques, le contenu CMS, les images, les textes alternatifs et les styles pour chaque locale.
3. Intégration de la traduction : Webflow permet la traduction du texte soit nativement, soit via des outils de traduction tiers. Les utilisateurs peuvent commencer par une traduction automatique et affiner manuellement les traductions.
4. SEO et optimisation du trafic : La plateforme inclut des fonctionnalités pour le SEO localisé, telles que des URL personnalisées, des métadonnées et des sitemaps avec des balises hreflang.
5. Amélioration de l'expérience utilisateur : Webflow fournit des outils pour contrôler la visibilité des éléments et créer des sélecteurs de locale personnalisables pour les visiteurs du site, leur permettant de choisir leur langue ou région préférée.

Principales Fonctionnalités de Localisation Webflow

Le nombre de fonctionnalités et leurs limites dépendent principalement du plan de localisation que vous choisissez d'utiliser. Il existe actuellement trois plans tarifaires : Essential, Advanced, et Enterprise.

Plan Essential coûte 9 $ par locale par mois et inclut :

• Jusqu'à 3 locales
• Traduction automatique
• Localisation CMS
• Localisation des pages statiques
• SEO localisé

Plan Advanced coûte 29 $ par locale par mois et inclut toutes les fonctionnalités ci-dessus, plus :

• Jusqu'à 5 locales
• Localisation des ressources
• URLs localisées
• Routage automatique des visiteurs

Plan Enterprise n'a pas de prix divulgué, car il doit être discuté avec l'équipe de vente de Webflow. Il inclut toutes les fonctionnalités ci-dessus, en plus de :

• Nombre de locales personnalisé
• Localisation des styles
• Visibilité des éléments personnalisable
• Échelle entreprise
• Intégration complète avec Webflow Enterprise

Principaux Avantages de la Localisation Webflow

Voici comment la localisation peut aider à développer votre site web et, par conséquent, votre entreprise.

• Amélioration de l'expérience utilisateur : En adaptant le contenu à différentes langues et contextes culturels, la localisation Webflow améliore l'engagement et la satisfaction des utilisateurs.
• Expansion de la portée mondiale : La localisation permet aux entreprises de toucher et de communiquer efficacement avec des publics internationaux, élargissant ainsi leur présence sur le marché.
• Amélioration du SEO : Un contenu et des URLs localisés peuvent considérablement améliorer le référencement pour différentes régions, entraînant une meilleure visibilité et un trafic accru. Associé à une bonne agence de SEO Webflow, vous pouvez obtenir un impact significatif avec le SEO local.
• Processus simplifié : Les outils de conception visuelle de Webflow et les options d'intégration rendent le processus de localisation efficace et accessible, même pour les utilisateurs sans expertise technique.
• Pertinence culturelle : En localisant le contenu, les images et les éléments de conception, les entreprises peuvent garantir la pertinence culturelle et la sensibilité, ce qui est crucial pour instaurer la confiance et la fidélité à la marque dans divers marchés.

Comment Utiliser la Localisation Webflow

Webflow a fait un excellent travail pour simplifier le processus de localisation. Voici ce que vous devez faire.

Accéder aux Locales depuis Webflow Designer

Une fois que vous avez configuré les locales, vous pouvez y accéder depuis Webflow Designer. Un nouveau menu déroulant sera ajouté à votre menu supérieur, où vous pouvez passer entre la locale primaire et les locales secondaires pour les éditer. Toutes les locales sont disponibles en mode design, mode édition ou mode aperçu.

Ensuite, vous devez commencer à travailler sur l'essentiel :

• Localiser le contenu et les styles
• Localiser les collections
• Localiser les paramètres de page

Ajouter des Locales à Votre Projet

Pour configurer vos locales, vous devez aller dans le panneau des paramètres > Localisation. La première que vous devrez configurer est la locale primaire, et vous pourrez ajouter d'autres locales par la suite.

Pour configurer une locale, vous devez déterminer trois choses :

1. Nom d'affichage : Si vous ajoutez un sélecteur de locale à votre site web et qu'il est visible pour vos visiteurs, ils verront le nom d'affichage pour chaque locale que vous avez configurée.
2. Sous-répertoire : Le sous-répertoire (slug de la locale) est automatiquement configuré en suivant le code de pays reconnu internationalement. Par exemple, si vous avez une version serbe du site, le slug standard serait votresite.com/sr/, mais vous pouvez le changer en votresite.com/serbian/ ou tout autre chose que vous souhaitez.
3. Statut de publication : La localisation Webflow vous donne l'option de publier quelque chose sur la locale primaire mais pas sur les locales secondaires. Vous pouvez activer ou désactiver la publication de contenu dans les locales secondaires.

Localisation du Contenu et des Styles

Une fois que vous avez sélectionné la locale secondaire dans Designer, elle ressemblera à la locale primaire, mais vous pouvez la remplacer et changer le contenu qui ne s'appliquera qu'à la locale que vous éditez à ce moment-là. Voici ce que vous pouvez éditer :

• Texte sur la toile : Cliquez simplement sur le texte et éditez-le comme vous le souhaitez pour l'ajuster à la locale. Vous pouvez également utiliser l'option de traduction de Webflow et laisser l'IA traduire le contenu pour vous.
• Ressources : Les ressources peuvent nécessiter une localisation parce qu'elles contiennent du texte à ajuster ou vous avez besoin d'une ressource complètement nouvelle pour la locale spécifique. Dans ce cas, il vous suffit de sélectionner la ressource que vous souhaitez remplacer et de télécharger une autre à la place. N'oubliez pas de localiser également les descriptions alternatives des ressources. La localisation Webflow vous permet également de conserver la même ressource mais de changer uniquement les textes alternatifs pour elles à travers les locales.
• Styles : Vous pouvez localiser les styles sur une locale pour tout élément afin d'adapter votre site au public cible.
• Composants : Pour localiser les composants sur votre site, sélectionnez la locale souhaitée dans le menu déroulant Locale view, puis double-cliquez sur le composant principal sur la toile pour l'éditer. Cela vous permet de modifier le texte et les liens dans le composant principal, garantissant que toutes les instances dans cette locale reflètent ces changements. Alternativement, vous pouvez localiser les valeurs par défaut des propriétés d'un composant en les éditant dans le panneau des paramètres de l'élément sous Propriétés du composant. Pour les instances individuelles de composants, éditez directement leurs propriétés dans la locale sélectionnée, bien que ces changements n'affecteront pas les autres instances, même dans la même locale.
• Sens du texte: Webflow supporte automatiquement les textes de droite à gauche comme l'arabe lorsque vous localisez de tels sites. Mais si vous ne voulez pas qu'il soit appliqué, vous devez ajouter dir="ltr", dir="rtl" ou dir="auto" (conseillé) comme attribut personnalisé.
• Visibilité des éléments : Vous pouvez personnaliser la présentation de la page en modifiant la visibilité des éléments pour chaque locale. Pour ce faire, sélectionnez la locale souhaitée dans le menu déroulant Locale view, allez dans les paramètres de l'élément, puis ajustez le paramètre de visibilité des éléments spécifiques pour les afficher ou les masquer. Notamment, les éléments cachés de cette manière sont supprimés côté serveur, ce qui signifie qu'ils n'apparaîtront pas dans la conception du site ou dans son balisage HTML, assurant une présentation propre et spécifique à la locale.

Localisation des Collections

Lorsque vous créez une collection, sa structure et ses champs sont partagés entre toutes les locales, quelle que soit la locale vue sélectionnée. Cependant, les éléments CMS individuels dans une collection, tels que les articles de blog ou les recettes, sont uniques à chaque locale, permettant un contenu adapté par locale. Cela signifie que vous pouvez créer des éléments spécifiques comme un élément de collection d'événements pour une locale, comme "Thanksgiving" pour English-US, et l'exclure d'autres locales, telles que English-UK.

Les locales secondaires héritent des valeurs de champ de la locale primaire, mais une fois personnalisées dans une locale secondaire, elles ne se mettront pas à jour avec les changements de la locale primaire. Pour réinitialiser un champ de collection à sa valeur de locale primaire, sélectionnez le champ dans la locale secondaire et choisissez Réinitialiser. Vous pouvez voir, créer, éditer ou supprimer des éléments de collection dans n'importe quelle locale en sélectionnant la locale souhaitée dans le menu déroulant Locale view.

Pour gérer les statuts de publication par locale, vous pouvez mettre en scène des éléments de collection comme des articles de blog pour publication dans une locale tout en les gardant comme brouillons dans une autre. Cela se fait en ouvrant un élément de collection et en utilisant l'icône de "flèche de lancement" pour éditer et gérer son statut de publication pour différentes locales.

Pour localiser les listes de collections, Webflow récupère automatiquement les éléments de collection pour la vue locale actuelle à la fois dans le Designer et le site publié. Une liste de collections, comme "Articles de blog", ne montrera que les éléments de la locale sélectionnée. Pour afficher les éléments de collection de la locale primaire dans une locale secondaire, ajustez les paramètres de la liste de collection pour "Utiliser la locale primaire".

Localisation des Paramètres de Page

Webflow supporte également la localisation des paramètres SEO, OG, et de page, ce qui signifie qu'ils peuvent être différents selon les locales.

Pour changer les paramètres SEO et Open Graph, sélectionnez une locale, ouvrez le panneau de la page, cliquez sur l'icône de roue dentée pour ouvrir les paramètres, et procédez à l'édition des paramètres. Ils ne seront enregistrés qu'au niveau de la locale.

Vous pouvez également localiser le code personnalisé, et la meilleure approche pour le faire est via l'attribut HTML lang, qui peut être utilisé comme sélecteur de locale.

Conclusion

En conclusion, gérer des sites web multi-locales dans Webflow est un processus fluide et efficace grâce à la fonctionnalité de localisation. En utilisant les capacités robustes de Webflow, vous pouvez facilement créer, localiser et gérer du contenu à travers différentes locales, assurant que chaque version de votre site soit adaptée à son audience respective. De la personnalisation des éléments de collection et de leurs statuts de publication à l'ajustement de la présentation de la page via la visibilité des éléments, Webflow offre une plateforme intuitive pour construire des sites web dynamiques et spécifiques à une région.

Pour ceux qui cherchent à exploiter tout le potentiel de ces capacités, envisagez de collaborer avec Agence No Code, une agence Webflow spécialisée dans la création d'expériences digitales exceptionnelles. Notre expertise dans Webflow vous guidera pour maximiser les fonctionnalités de la plateforme, y compris la fonctionnalité de localisation pour vos besoins en site web multilingue.