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
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
- Login to your Weglot account
- Click on the Settings tab
- Click on the Language Switcher tab
- Add the code to the custom CSS
- Click on Save Changes
In your Webflow designer
- Connect to your Webflow project
- Select both items (fr version/en version)
- Add a custom class to each of them (e.g. hide-en for the fr form and hide-fr for the en form)
- 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 👀
Ready to take your website to the next level?
Improve your online visibility thanks to Digidop's experience, excellence and reactivity!