Hide an element on your Webflow site according to the language!

If you use Weglot to translate your Webflow site, you may have already had this example of a problem:

How can I make this Hubspot form appear only in English for the EN version of my site and this Hubspot form in French for the FR version?

Check out our easy-to-use tips for your website 👇

Reminder: Weglot is a nocode tool for automatic multilingual translation of your website pages.

The three-step tutorial

We will need ;

(1) Login to our Weglot dashboard interface

(2) Connect to the designer mode of our Webflow project

(3) Add CSS code in Weglot and a class on Webflow!

Deciphering an example of custom CSS code

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

This code indicates that when your site is in a 'lang-fr' version, the hide-fr CSS class will not appear. It will therefore be "invisible".

Conversely, when your site is in a 'lang-en' version, the hide-en CSS class will not appear.

⚠️ You can name your classes as you wish. They just need to have exactly the same name between the custom Weglot and your Webflow project.

From the Weglot interface

1. Login to your Weglot account
2. Click on the Settings tab
3. Click on the Language Switcher tab
4. Add the code to the custom CSS
5. Click on Save Changes

In your Webflow designer

1. Connect to your Webflow project
2. Select both items (fr version/en version)
3. Add a custom class to each of them (e.g. hide-en for the fr form and hide-fr for the en form)
4. Publish your site!

⚠️ You can reproduce this scheme for several languages in one project. Just make sure you stay organised.

👉 Check out more video tips on our Youtube channel Digidop 🍿

👉 Discover new no-code tools with the toolbox 🧰

👉 Webflow support offer Digidop 24/7 👀