Cacher un élément sur votre site Webflow selon la langue !

Tutoriel
14/7/2022
3 min
Logo Webflow et Weglot avec le mot tips cliqué au dessus
Key points

Si vous utilisez Weglot pour traduire votre site Webflow, vous avez peut-être déjà eu cet exemple de problématique :

Comment faire apparaître uniquement ce formulaire Hubspot en anglais pour la version EN de mon site et ce formulaire Hubspot en français pour la version FR ?

Découvrez notre tips simple à utiliser sur votre site web  👇

Rappel : Weglot est un outil nocode de traduction multilingue automatique des pages de votre site internet.

Le tutoriel en trois étapes

Nous allons avoir besoin de ;

(1) Nous connecter à notre interface dashboard Weglot

(2) Nous connecter au mode designer de notre projet Webflow

(3) Ajouter du code CSS dans Weglot et une classe sur Webflow !

Décryptage d'un exemple de code custom CSS


html[lang="fr"] .hide-fr { display: none!important; } 
html[lang="en"] .hide-en { display: none!important; }

Ce code indique que lorsque, votre site sera dans une version "lang-fr', la classe CSS hide-fr n'apparaîtra pas. Elle sera donc "invisible".

À l'inverse, lorsque, votre site sera dans une version "lang-en', c'est la classe CSS hide-en qui n'apparaîtra pas.

⚠️ Vous pouvez nommer comme vous le souhaitez vos classes. Il faut juste qu'elles aient exactement la même nomination entre le custom Weglot et votre projet Webflow.

Depuis l'interface Weglot

  1. Se connecter à son compte Weglot
  2. Cliquer sur l'onglet Settings
  3. Cliquer sur l'onglet Langage Switcher
  4. Ajouter le code dans le custom CSS
  5. Cliquer sur Save Changes
Custom css display none weglot

{{custom-blog-cta}}

Dans votre designer Webflow

  1. Se connecter à son projet Webflow
  2. Sélectionner les deux éléments (version fr/version en)
  3. Ajouter une classe custom sur chacun d'eux (par exemple hide-en pour le formulaire fr et hide-fr pour le formulaire-en)
  4. Publier votre site !
Classe css "hide-en" sur Webflow

⚠️ Vous pouvez reproduire ce schéma pour plusieurs langues sur un seul et même projet. Attention à juste bien rester organiser.

👉  Découvrez plus de tips en vidéo sur notre chaine Youtube Digidop 🍿

👉  Découvrez des nouveaux outils no-codes avec la toolbox 🧰

👉  Offre d'assistance Webflow Digidop 24/7 👀

Formation Webflow Gratuite
Commencer la formation
Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

Représentation graphique de l'évolution de Webflow en 2025
Documentation
Webflow

En 2025, être bon en développement Webflow ne suffit plus.

En 2025, être bon en développement Webflow ne suffit plus.
Rapport sur l'état du site Web 2025 par Webflow
Documentation
Webflow

Décryptage du rapport “The 2025 State of the Website”

Décryptage du rapport “The 2025 State of the Website”
IA & No-code 2025
Documentation
IA

No Code et IA : Accélérez votre Transformation Digitale

No Code et IA : Accélérez votre Transformation Digitale

Transformez votre site web en un moteur de croissance.

Nous contacter