While Locadapt aims to translate your entire website, there may be instances where you want to prevent certain elements from being translated. This guide explains two methods to achieve this:

  1. Using the .locadapt-no-translate class
  2. Specifying custom CSS ignore rules

​
Using the .locadapt-no-translate Class

The simplest way to prevent an element from being translated is to add the .locadapt-no-translate class to it in your HTML. That element and all of its children will not be translated.

​
Example

<span class="locadapt-no-translate">Do not translate this text</span>

This method is particularly useful for individual elements, numbers and dates, or small sections of your site that should remain in the original language across all translations.

The Locadapt icon in the language switcher already has this class applied, ensuring it remains consistent across all language versions.

​
Specifying Custom CSS Ignore Rules

For more complex scenarios or when you want to prevent translation for multiple elements sharing certain characteristics, you can use custom CSS ignore rules.

There is a hidden “system” CSS ignore selector for code, script, and style elements (in addition to the .locadapt-no-translate class) — no code, script, or style element will ever be translated, as it does not make sense to do so.

​
How to Set CSS Ignore Rules

  1. Navigate to your project’s configuration page in the Locadapt dashboard.
  2. Find the “CSS Ignore Rules” field in the “Inclusions & Exclusions” section.
  3. Enter your CSS selectors, separated by commas.

​
Example

.ignore-translation, #brand-name, .code-snippet, h1

This example would prevent translation for:

  • Any element with the class ignore-translation
  • The element with the ID brand-name
  • Any element with the class code-snippet
  • Any h1 element

Be cautious when using broad CSS selectors, as they might unintentionally prevent translation of important content.

​
Best Practices

  • Use the .locadapt-no-translate class for specific, individual elements.
  • Use CSS ignore rules for broader patterns or multiple elements sharing common characteristics.
  • Regularly review your translation prevention settings to ensure they’re still relevant and not blocking important content from being translated.
  • Test your site in different languages after setting up prevention rules to confirm they’re working as expected.

By utilizing these methods, you can fine-tune which parts of your website get translated, ensuring a consistent and appropriate multilingual experience for your users.

Custom StylingAPI Reference