Badge Webflow Award Winner 2023

Webflow Localization : comment localiser le CMS de votre site Webflow ?

Publié le 
7/10/2023
Modifié le 
7/10/2023
Temps de lecture : 5 min
Webflow Localization : comment localiser le CMS de votre site Webflow ?
Écrit par
Lucas Clairet - Développeur Webflow & Client-First

Lucas Clairet

Développeur Webflow

Découvrez les secrets de la localisation CMS avec Webflow. Transformez votre CMS en une machine multilingue bien huilée et renforcez votre présence sur la scène internationale.

Points clés à retenir

Introduction

La localisation va bien au-delà de la simple traduction ; elle offre une expérience personnalisée à chaque utilisateur, créant ainsi une connexion plus profonde et renforçant votre présence sur la scène internationale. Avec sa nouvelle fonctionnalité de localisation, Webflow devient encore plus puissant pour atteindre un public plus large.

Dans des articles précédents, on a déjà exploré la traduction du contenu statique, l'adaptation du design ou encore la localisation des données SEO. Aujourd'hui, plongeons dans ce qui est bien souvent le cœur même de votre site : le CMS.

Localiser le CMS, c’est s'assurer que chaque élément, chaque article, et chaque détail est optimisé pour une expérience multilingue.

Dans cet article, on vous guidera à travers la localisation du CMS avec Webflow, vous permettant de créer et de gérer un site web multilingue performant. Découvrez le fonctionnement général, la localisation des collections, la création et la personnalisation d'items localisés et plus encore. C’est parti !

Fonctionnement général de la localisation du CMS

La localisation du CMS dans Webflow fonctionne de façon assez similaire à la localisation du contenu statique, avec toutefois quelques spécificités.

Contrairement au contenu statique où une page unique peut être traduite en plusieurs langues, le CMS amène une nuance importante. Les collections, et les champs qui vont avec, sont partagés entre toutes les langues, assurant une cohérence en terme de structure. Cependant, la différence a lieu au niveau des items au sein de ces collections.

Chaque langue dispose de ses propres items distincts. Imaginez chaque item comme une instance indépendante de votre collection, adaptée à une langue spécifique. Vous pouvez ainsi personnaliser les champs pour chaque item afin de répondre aux besoins spécifiques de chaque version linguistique de votre site.

Cette approche permet une gestion fine des contenus par langue, offrant à la fois une uniformité globale (grâce aux collections qui restent communes) et la flexibilité nécessaire pour répondre aux particularités linguistiques (grâce aux items qui sont distincts pour chaque langue).

Dans la section suivante, on plonge plus profondément dans la localisation des collections pour comprendre comment cette fonctionnalité se déploie dans la pratique.

Localisation des collections

Lorsqu'il s'agit de localiser les collections dans Webflow, on fait rapidement le tour.

Le slug (URL) d'une collection peut être localisé pour s'adapter à chaque langue. Au lieu d'avoir une URL universelle, vous pouvez donc avoir des slugs localisés, facilitant la navigation pour vos utilisateurs dans leur langue préférée. Par exemple, traduire "témoignages" en "testimonials" pour la version anglaise.

Webflow Localization, modifier le slug

Cependant, les autres options des collections ne peuvent pas être localisées. Le nom des champs, les textes d'aide et les autres paramètres resteront communs à toutes les langues. La structure fondamentale des collections est donc partagée pour assurer un maximum de cohérence.

Dans la prochaine étape, on verra comment créer des items localisés au sein de ces collections pour contribuer à une expérience utilisateur multilingue fluide.

Comment localiser des items ?

La localisation des items dans le CMS de Webflow offre une approche flexible pour personnaliser le contenu en fonction de chaque langue. Plongeons dans le processus de création, de personnalisation, et de gestion des items localisés.

1. Création d'items localisés

Lorsque vous créez un nouvel item dans une collection, par défaut, celui-ci est généré pour toutes les langues prises en charge sur votre site. Chaque modification apportée à la version de base de ce nouvel item est automatiquement appliquée à toutes les versions linguistiques.

Ce procédé garantit une base cohérente, mais que se passe-t-il si vous souhaitez personnaliser certains champs pour une langue spécifique ? Passons à la personnalisation des items.

2. Personnalisation des items localisés

Pour personnaliser un item spécifique pour une langue donnée (par exemple, traduire un témoignage), suivez ces étapes :

  • Commencez par créer un nouvel item dans votre langue (Locale) principale, comme vous le feriez normalement. Lorsque vous modifiez les champs de cet item dans votre langue principale, les changements sont par défaut appliqués à toutes les langues.
  • Pour localiser un champ spécifique (par exemple, le témoignage), basculez dans la langue souhaitée depuis l’option de changement de langue en haut à gauche du Designer Webflow. Alternativement, vous pouvez aussi sélectionnez la langue souhaitée dans la liste des Locales en bas de la page de modification de l’item.
Webflow Localization, langue CMS
  • Modifiez les champs souhaités selon les besoins spécifiques de cette langue (par exemple, traduisez votre titre).
Webflow Localization, item CMS
  • Enregistrez les modifications. Dés qu’un champ a été localisé, il sera désormais spécifique à la langue concernée. Les autres champs, qui n’ont pas été modifiée dans la langue secondaire, continueront d'hériter des valeurs de la langue principale.

3. Gestion des items distincts

Enfin, vous pourriez parfois avoir besoin d'items spécifiques à une langue, c'est-à-dire qui ne doivent pas exister dans les autres langues (par exemple, un article de blog dédié à un événement régional). Deux approches s'offrent à vous :

  • Suppression de l’item dans des langues spécifiques : Dans la vue des items, naviguez vers la ou les langues qui ne sont pas concernées. Sélectionnez l'item et supprimez-le. Cette approche est utile lorsque vous voulez que certains éléments n’existent pas dans certaines langues.
Webflow Localization, item CMS spécifique
  • Création de l'item directement à partir d'une langue secondaire : Si vous savez qu'un item doit exister dans une seule langue spécifique, créez cet item directement depuis la vue de cette langue. L’item n’existera alors que dans cette langue bien spécifique.

La gestion des items au sein du CMS de Webflow offre donc un niveau élevé de personnalisation, tout en assurant la cohérence globale de votre contenu. Dans la prochaine section, découvrons comment utiliser ces collections localisées sur vos pages Webflow.

Utilisation des collections localisées

Une fois que vous avez configuré et localisé vos collections dans le CMS de Webflow, il est temps de les intégrer harmonieusement dans vos pages. Cette section explore comment tirer le meilleur parti des collections localisées pour une expérience utilisateur fluide et cohérente.

1. Collection Lists adaptés

Lorsque vous ajoutez une Collection List à une page, Webflow effectue automatiquement la récupération des items appropriés selon la langue de la page. L'automatisation de ce processus garantit que les visiteurs voient le contenu adapté à leur langue préférée.

Dans le Designer, vous pouvez donc créer vos Collection Lists comme vous avez l’habitude de le faire. La localisation de vos collections est gérée automatiquement.

2. Personnalisation des pages templates des collections

La personnalisation des pages templates des collections peut se faire de la même façon que pour le contenu statique. En accédant à la page template d’une collection, vous pouvez localiser le contenu statique de la page, adapter son design et même localiser les données SEO selon la langue.

  • Personnalisation du contenu statique depuis le Designer : utilisez les fonctionnalités de localisation pour traduire les textes statiques présents dans les pages templates des collections.
    Découvrez l’article Webflow Localization : traduire le contenu des pages de son site
  • Localisation du design de la template selon la langue : grâce à la localisation des styles dans Webflow, vous pouvez adapter le design des pages template en fonction de la langue.
    Découvrez l’article Webflow Localization : adapter le design de vos pages selon la langue
  • Localisation des données SEO de la template selon la langue : pour maximiser la visibilité sur les moteurs de recherche dans chaque langue, vous pouvez aussi localiser les données SEO telles que les titres et les méta-descriptions au sein des pages templates des collections.
    Découvrez l’article Webflow Localization : traduction du SEO pour un site multilingue bien référencé

En combinant ces éléments, vous créez une expérience utilisateur homogène, de la traduction du contenu textuel à l'ajustement visuel et aux informations SEO optimisées pour chaque langue.

Dans la conclusion, on récapitule les étapes clés pour une gestion efficace de la localisation du CMS avec Webflow.

Conclusion

En résumé, maîtriser la localisation du CMS implique une gestion fine des contenus partagés et spécifiques à chaque langue, offrant à la fois cohérence globale et flexibilité locale.

N'oubliez pas que la clé de la réussite réside dans la compréhension de votre public. Plus vous comprenez les besoins et les préférences de votre audience, mieux vous pouvez personnaliser votre site pour créer une expérience utilisateur exceptionnelle, peu importe la langue.

Avec Webflow, la localisation du CMS devient un processus intuitif et puissant, propulsant votre site vers de nouveaux horizons internationaux. Alors, plongez dans la localisation du CMS et créez des sites qui transcendent les frontières linguistiques.

Pour aller plus loin dans la gestion de votre site multilingue avec Webflow Localization, consultez notre guide ultime sur le sujet :

projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop