Localize content and styles

Before you get started: Check out the Localization overview to familiarize yourself with Localization. 

By default, any secondary locale(s) you add to your site inherit the content and styles of your site’s primary locale. You can override or localize anything on the Designer canvas to meet the cultural and linguistic needs of customers in a given locale. 

Once you’ve added an element to your primary locale, you can click the Locale view dropdown in the top bar, choose your desired locale, and edit the element just as you normally would — but now, those changes will only impact the selected locale. Localized elements are indicated with a “globe” icon in the Navigator. 

Note: Your design (i.e., layout of elements and components) is determined by your primary locale. You cannot add or remove elements or components while in a secondary locale. Additionally, any localization changes you make in a secondary locale will only affect that secondary locale. 

Note: Some Localization features are available only on certain Localization plans. View a complete comparison of Localization plans and features. 

In this lesson, you’ll learn: 

1. How to localize on-canvas text‍
2. How to create a custom machine translation glossary‍
3. How to localize assets‍
4. How to localize element visibility‍
5. How to localize styles‍
6. How to localize components

How to localize on-canvas text

Note: Localization features are only available in the Designer. Content editors can localize content in edit mode.

To localize text on the Designer canvas, click the Locale view dropdown in the top bar and choose your desired locale. Then, you can edit any on-canvas text (including links, buttons, forms, etc.) with the content you want to appear in that locale. 

If you want to translate your text content, you can right-click any element that contains text and choose “Translate to (locale language).” 

Note: When you auto-translate an element containing a child span element, the span element’s text doesn’t automatically translate. While you can auto-translate the span element individually, we recommend manually translating text in span elements to ensure the translation makes sense in context.

If a piece of content on the page doesn’t translate, there may not be a translation available for that content. 

Pro tip: If you want to translate an entire page, select the Body element, then right-click and select “Translate to (locale language).” 

You can also translate your text manually or with translation Apps like Lokalise.

Localizing right-to-left text

Webflow automatically supports RTL (right-to-left) script on published sites for Arabic (ar), Persian (fa), Hebrew (he), Urdu (ur), and Yiddish (yi) locales, as well as regional dialect locales of these languages (e.g., Arabic (Iraq)), even when the text has not been localized. If you don’t want to display text elements with automatic RTL, add a custom attribute of dir="ltr" or dir="auto" to the element.

How to create a custom machine translation glossary

You can create a custom machine translation glossary for specific terms you use often in your site. This is useful if you have terms for which you want a different translation than the one provided by auto-translate. Note that this may not be a 100% translation guarantee — we recommend you review your site’s copy before publishing.

To create your custom machine translation glossary you’ll first create a CSV according to AWS Translate instructions. You should add your primary locale tag in the first row, first column and the term in the second row, first column. Secondary locales follow in the next columns and rows (e.g., “ES” in the second column, first row, and the term in the second column, second row). There are a maximum of 10 columns and 10,000 rows in a custom machine translation glossary CSV file — i.e., the machine translation glossary supports up to 10 different languages.

Once your CSV is complete, you can upload it to your site:

1. Go to Settings > Localization > Custom translation terminology
2. Upload your CSV file
3. Click Save changes

Next time you localize any words present in your CSV, they’ll be translated according to what you have set as the translation in the CSV file.

Note: If content was already translated in your site, right-click the text element containing that content, click Reset all localized settings, then re-translate your content.

How to localize assets

There are a number of reasons you may need to localize your assets — for instance, if an asset on your site contains text and needs a translated version for a given language or locale, or an asset is shared across multiple locales but needs translated alt text for each locale. Or, perhaps you need a fully unique asset for each locale to achieve your site’s localization needs. You can manage alt text and assets for each locale. 

To replace an asset for a specific locale: 

1. Click the Locale view dropdown in the top bar
2. Choose your desired locale
3. Select the asset on the canvas 
4. Go to Element settings > Image settings
5. Click Replace image
6. Choose an asset or upload a new asset in the Assets panel

To share an asset across locales, but localize alt text for all instances of that asset within a secondary locale: 

1. Click the Locale view dropdown in the top bar
2. Choose your desired locale
3. Open the Assets panel 
4. Hover over the asset for which you want to localize 
5. Click the settings “cog” icon
6. Enter the localized alt text for the asset

To share an asset across locales, but localize alt text for one instance of that asset within a secondary locale (i.e., localize alt text for an asset within a secondary locale without sharing that alt text with all other instances of that asset in that secondary locale): 

1. Click the Locale view dropdown in the top bar
2. Choose your desired locale
3. Select the asset on the canvas
4. Go to Element settings > Image settings 
5. Choose “Custom description” from the Alt text dropdown
6. Enter the localized alt text for the asset 

To reset an asset or alt text to inherit from the primary locale: 

1. Click the Locale view dropdown in the top bar
2. Choose your desired locale
3. Select the asset on the canvas 
4. Go to Element settings > Image settings
5. Click Image and/or Alt text (depending on which you’d like to reset) 
6. Click Reset to primary locale

How to localize element visibility

While all elements and components in secondary locales are inherited from the primary locale, you can localize the page presentation for a secondary locale using element visibility. 

To change the visibility for a specific element: 

1. Click the Locale view dropdown in the top bar
2. Choose your desired locale
3. Go to Element settings > Visibility
4. Choose the element’s visibility setting (i.e., “show” or “hide”) 

Elements are hidden on the server-side — meaning hidden elements won’t appear in your site design or show up in the HTML markup of your site.

How to localize styles

You can also customize the presentation of a specific locale by localizing the styles on a given element. 

Pro tip: Word breaking, line breaking, and text wrapping styles can be useful for adhering to language-specific rules and ensuring a positive user experience across locales. Learn more about text wrapping and line breaking.

Note: Webflow automatically supports RTL (right-to-left) script on published sites for Arabic (ar), Persian (fa), Hebrew (he), Urdu (ur), and Yiddish (yi) locales, as well as regional dialect locales of these languages (e.g., Arabic (Iraq)), even when the text has not been localized. If you don’t want to display text elements with automatic RTL, add a custom attribute of dir="ltr" or dir="auto" to the element. Learn more about localizing right-to-left text.

To localize styles on a particular element: 

1. Click the Locale view dropdown in the top bar
2. Choose your desired locale
3. Select an element on the canvas 
4. Adjust styles as needed

To reset element styles to inherit from the primary locale: 

1. Click the Locale view dropdown in the top bar
2. Choose your desired locale
3. Select the element on the canvas 
4. Click any style in the Style panel (e.g., font, color, breaking, etc.) 
5. Click Reset

How to localize components

Important: If you localize an element and/or its child elements in a secondary locale before converting the element to a component, the localized content will be overwritten with the component’s default content from the primary locale. For this reason, we recommend converting elements to components before localizing their content.

You can localize components just as you can localize elements. You can localize the main component to ensure the localized values for that component persist across all instances  of that component in a specific locale.

For example, if you have a navbar and want to localize the text and links: 

1. Click the Locale view dropdown in the top bar
2. Choose your desired locale
3. Double-click your navbar component on the canvas to edit the main component
4. Edit or translate the text and links in the main component
5. Exit the main component 

Then, each instance of that navbar within that locale will use those localized values.

Or, you can localize the default value of a component property: 

1. Click the Locale view dropdown in the top bar
2. Choose your desired locale
3. Double-click the component you want to localize to edit the main component
4. Go to Element settings panel > Component properties > Manage properties
5. Click the component property whose value you want to localize 
6. Edit the default value (e.g., text, visibility, image, etc.) 

You can also localize component instances by localizing the property fields. To do this, first ensure that the component has properties set for the elements you wish to localize. Then: 

1. Click the Locale view dropdown in the top bar
2. Choose your desired locale 
3. Open the component instance you want to localize 
4. Edit or localize the values in the component instance
5. Exit the component instance

The localized values in the component instance will not persist to other instances of the same component, even within the same locale. 

Note: You cannot add new component properties, delete or unlink component properties, or change component property types or settings while in a secondary locale view.