Hide an element on your Webflow site based on language!

Tutorial
March 20, 2023
3 min
Webflow and Weglot logo with the word tips clicked above
Key points

If you are using Weglot to translate your Webflow site, you may have already encountered this common issue:

How to display only this Hubspot form in English for the EN version of my site and this Hubspot form in French for the FR version?

Discover our simple tips to implement on your website  👇

Reminder: Weglot is a no-code tool for automatic multilingual translation of your website's pages.

The three-step tutorial

We will need to:

(1) Log into our Weglot dashboard

(2) Access the designer mode of our Webflow project

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

Explanation of a custom CSS code example


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 the "lang-fr" version, the CSS class hide-fr will not be displayed, making it "invisible".

Conversely, when your site is in the "lang-en" version, it will be the CSS class hide-en that won't be displayed.

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

From the Weglot interface

  1. Log into 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
Custom CSS display none Weglot

In your Webflow designer

  1. Log into your Webflow project
  2. Select the two elements (FR version/EN version)
  3. Add a custom class to each of them (for example, hide-en for the FR form and hide-fr for the EN form)
  4. Publish your site!
CSS class "hide-en" on Webflow

⚠️ You can replicate this scheme for multiple languages within a single project. Just be careful to stay organized.

👉  Discover more tips in video format on our Digidop YouTube channel 🍿

👉  Explore new no-code tools in our Toolbox 🧰

👉  Check out the 24/7 Webflow support service by Digidop 👀

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today