How to display content only in a specific language?

In this article, you will find how to display some contents only in a specific language

If you need to display some contents only in a specific language, for example, a button with a link, you can proceed this way:

  1. Create two different elements (buttons). By creating two different elements in your original website, you'll be able to define two different links. The first one will follow the second one. However, the two elements will never be displayed at the same time.
  2. Then, you'll have to add a specific selector for each element. For example .link-en for the icon linked to the English URL and .link-es for the icon linked to the Spanish URL.
  3. After that, you'll have to use CSS rules to hide the element that doesn't match with the current language.

To do the last step, go to your  Weglot Dashboard > Settings > Language Switcher and enter this code into the "Custom CSS" field:

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

Don't forget to replace the right languages and the right classes in the code above.
Also, make sure the 'en' and 'es' abbreviation are the ones you're really using.

To find the language code of your original language, you have to go to your source code. The code is displayed at the top:

Then, if your original language is English, here the final code you'll have to use:

html[lang="es"] .link-en { display: none!important; } html[lang="en-US"] .link-es { display: none!important; }

Still need help? Contact Us Contact Us