Adapt content and designs

Prior to beginning: Take a look at the Localization introduction to acquaint yourself with Localization.

By default, any additional locale(s) you include on your site inherit the content and styles of your site’s primary locale. You can override or customize anything on the Designer canvas to cater to the cultural and linguistic requirements of customers in a specific locale.

Upon inserting an element into your primary locale, you can select the Locale view option from the top bar, select your desired locale, and modify the element just as you would typically do — however, these adjustments will now only impact the chosen locale. Localized elements are distinguished with a “globe” icon in the Navigator.

Please note: Your layout (i.e., arrangement of elements and components) is influenced by your primary locale. It is not possible to add or remove elements or components while in a secondary locale. Furthermore, any localization modifications made in a secondary locale will exclusively affect that secondary locale.

Kindly be informed: Some Localization capabilities are exclusive to certain Localization subscription packages. View a comprehensive comparison of Localization subscriptions and features.

Throughout this tutorial, you will understand:

1. How to customize on-canvas text
2. How to adapt assets
3. How to individualize element visibility
4. How to personalize styles
5. How to tailor components

How to customize on-canvas text

Please remember: Localization functionalities are solely accessible in the Designer. Content editors have the ability to customize content in edit mode.

To adjust text on the Designer canvas, click the Locale view dropdown in the top bar and select your preferred locale. Subsequently, you can modify any on-canvas text (including links, buttons, forms, etc.) with the content you wish to display in that locale.

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

Please note: When automatically translating an element containing a child span element, the text of the span element does not automatically translate. Although you can auto-translate the span element individually, we recommend manually translating text in span elements to ensure the translation remains contextually relevant.

If a specific piece of content on the page does not translate, it may be due to the unavailability of a translation for that content.

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

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

Customizing right-to-left text

Webflow automatically offers support for 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 customized. If you prefer not to exhibit text elements with automatic RTL, include a custom attribute of dir="ltr" or dir="auto" to the element.

How to customize assets

There could be several reasons necessitating the customization of your assets — for instance, if an asset on your site comprises text and requires a translated version for a specific language or locale, or if an asset is shared across multiple locales but necessitates translated alt text for each locale. Alternatively, you may require a distinct asset for each locale to meet your site’s localization requirements. You can manage alt text and assets for each locale.

To substitute an asset for a particular locale:

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

To distribute an asset across locales, but personalize the alt text for all instances of that asset within a secondary locale:

1. Click the Locale view dropdown in the top bar
2. Select your desired locale
3. Access the Assets panel
4. Hover over the asset for which you wish to customize
5. Click the settings “cog” icon
6. Input the customized alt text for the asset

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

1. Click the Locale view dropdown in the top bar
2. Select your desired locale
3. Choose the asset on the canvas
4. Proceed to Element settings > Image settings
5. Select “Custom description” from the Alt text dropdown
6. Enter the customized 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. Select your desired locale
3. Choose the asset on the canvas
4. Access Element settings > Image settings
5. Click on Image and/or Alt text (depending on the reset you desire)
6. Click on Reset to primary locale

How to customize element visibility

Whilst all elements and components in secondary locales are inherited from the primary locale, you can individualize the page display for a secondary locale using element visibility.

To modify the visibility for a specific element:

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

Elements are concealed on the server-side — implying hidden elements will not be visible in your site design or reflected in the HTML code of your site.

How to customize styles

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

Expert tip: Word breaking, line breaking, and text wrapping styles can be beneficial for adhering to language-specific rules and guaranteeing a positive user experience across locales. Discover more about text wrapping and line breaking.

Kindly note: Webflow automatically supports RTL (right-to-left) script on published sites for Arabic (ar), Persian (fa), Hebrew (he), Urdu (ur), andYiddish (yi) locales, along with regional dialect locales of these languages (e.g., Arabic (Iraq)), irrespective of the absence of localization in the text. If you prefer not to exhibit text elements with automated RTL, append a custom attribute of dir="ltr" or dir="auto" to the respective element. Explore further details on how to localize right-to-left text.

To localize styles on a specific element: 

1. Tap the Locale view dropdown in the upper bar
2. Pick your preferred locale
3. Choose an element on the canvas 
4. Modify styles as necessary

To restore element styles to inherit from the primary locale: 

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

How to localize components

Important: When localizing an element and/or its child elements in a secondary locale prior to transforming the element into a component, the localized content will be overwritten with the default content of the component from the primary locale. Hence, it is recommended to convert elements into components before localizing their content.

You can localize components in the same manner as localizing elements. You can localize the primary component to ensure the localized values for that component are retained across every instance  of that component in a specific locale.

For instance, if you possess a navbar and wish to localize the text and links: 

1. Click the Localeview dropdown in the upper bar
2. Choose your preferred locale
3. Double-tap your navbar component on the canvas to adjust the primary component
4. Revise or interpret the text and links in the main component
5. Exit the main component 

Following this, each occurrence of that navbar within that locale will adopt those localized values.

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

1. Press the Locale view dropdown in the top bar
2. Select your preferred locale
3. Double-tap the component you desire to localize to adjust the main component
4. Proceed to Element settings panel > Component properties > Manage properties
5. Hit the component property whose value you intend to localize 
6. Revise the default value (e.g., text, visibility, image, etc.) 

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

1. Press the Locale view dropdown in the top bar
2. Choose your preferred locale 
3. Unveil the component instance you desire to localize 
4. Revise or localize the values in the component instance
5. Exit the component instance

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

Note: While in a secondary locale view, you are unable to append new component properties, erase or disconnect component properties, or alter component property types or settings.