Localization summary

Adaptation is the method of adjusting your site to fulfill the cultural and linguistical requirements of site visitors worldwide. By using the Webflow Localization feature, you can design personalized experiences for your viewers based on their language or region.

Note: Specific Localization functionalities are exclusively accessible on particular Localization subscription schemes. Review a full comparison of Localization schemes and functionalities.

This tutorial will cover:

1. Operational mechanism of Localization
2. Methodology to append and manage locales
3. Means to navigate to a locale in the Designer

Operational mechanism of Localization

A locale represents a language or language and regional fusion that you choose to cater to the requirements of your target audience. The leading locale should be the go-to locale or language for constructing, designing, and dispensing your site. As an illustration, if you reside in the U.S., your primary locale would presumably be “English.” Additional locales can be incorporated to support various languages and regions on your site.

The content and presentation of your site’s additional locales are automatically inherited from the primary locale. In case no modifications are executed on the secondary locale of your site and you proceed with site publication, both versions will present similar content, resources, and display. Webflow ensures that no page remains empty or with absent content simply because a particular regional version hasn’t been localized yet.

Upon deciding to customize a specific locale, modifications can be applied to localize the content, styles, or resources that originate from the primary locale. Modifying any aspects within a secondary locale solely impacts that respective locale. At any point, reverting overrides to reimplement data from the primary locale, similar to style overrides/resets, remains a viable option.

Note: Localization functionalities are exclusive to the Designer. Content editors possess the capacity to localize content in edit mode.

Additional Reference:

• Localized SEO and locale routing
• Content and styles localization
• Collection content localization
• Page settings localization
• Creating a locale switcher

Note: Advanced and Enterprise Localization schedules encompass automated domain-level routing — whereby if a guest visitor specifies a preferred language in their browser, Webflow will make efforts to redirect them to the appropriate locale version of your site. In cases where your site doesn’t support their favored locale or if a visitor hasn’t specified a preference, they will be directed to the primary locale by default. Learn more about SEO localization and locale routing.

Process of appending and managing locales 

Note: A complimentary preview of basic Localization capabilities (e.g., machine-assisted translation, and static page, CMS, and SEO localization) is provided across all tiers of Site subscriptions, ranging from Starter to Enterprise. A Localization add-on purchase is needed to go live with a secondary locale or to include multiple secondary locales on your site. Explore a holistic comparison of Localization schemes and functionalities.

Initialization of Localization can be initiated by launching the Settings panel > Localization. Primarily, the leading locale — the selected locale or language for use on your site — must be established. Elect or input the name of your locale within the Primary locale dropdown. Subsequently, you can set the locale’s:

• Designation
• Subdirectory
• Image display
• Publishing status

Following provision of the primary locale particulars, proceed to save your modifications. An option to click Add new locale will then be available for incorporation of additional locales and for managing the display designation, subdirectory, and publishing status of each locale.

Note: Webflow inherently facilitates RTL (right-to-left) script on live sites for Arabic (ar), Persian (fa), Hebrew (he), Urdu (ur), Yiddish (yi) locales, alongside regional variations of these languages (e.g., Arabic (Iraq)), even when text localization isn’t implemented. To prevent automatic RTL display of text components, include a custom attribute of dir="ltr" or dir="auto" to the element. Learn more on the subject of right-to-left text localization.

Designation

The locale’s designation serves as the text exhibited in the Locale list element. This can be utilized to fashion a locale switcher or other interface enabling site visitors to select their preferred locale. Descriptive designation can be altered as needed. Publication triggers refresh of the Locale list element in accordance with the altered designation.

Subdirectory

By default, each locale possesses a subdirectory (termed URL slug) representing the locale’s ISO tag (also known as “country code,” denoting the globally recognized code reflecting a country and its region). Personalization of the subdirectory is plausible based on your requirements (e.g., in a scenario of a “Spanish” site, the conventional subdirectory is yourdomain.com/es, which can be modified to yourdomain.com/spanish). Any alterations to the subdirectory name do not affect the language code of your site.

Note: The leading locale is devoid of a subdirectory by default; nonetheless, every site traffic can be directed to a subdirectory based on the leading locale (e.g., yourdomain.com/en) by toggling the Enable publishing to the subdirectory option.

Image display

The image display constitutes the icon or flag affiliated with the locale. The uploaded display image can be utilized in your locale switcher. It’s important to note that the display image must be uploaded within the Localization settings, as images from the Assets panel are not applicable.

Post insertion of a display image, it will also get stored in the Assets panel, where alt text management is feasible. Removal of the image from the Assets panel will correspondingly erase the image from the Localization settings.

Publishing status

Publishing status (i.e., activation or deactivation of publication) for each secondary locale added to your site can be regulated. To enable publication solely for the primary domain/leading locale while excluding publication for the secondary locales, toggle the Enable publishing to the subdirectory option to “off” for each secondary locale lacking publication intent. Upon readiness to publish content concerning secondary locales, toggle the Enable publishing to the subdirectory switch to “on.” Site publication is essential to enact these modifications.

Note: Only locales with the Enable publishing to the subdirectory setting toggled “on” will emerge within the Locale list element. Automatic addition to the Locale list is executed once publishing is enabled. Refer to instructions about creating a locale switcher through the Locale list element.

Strategies for navigating locales within the Designer

Upon addition of secondary locale(s) to your website, a new Locale view dropdown emerges in the Designer’s top bar. By clicking on the Locale view dropdown, selection of a secondary locale for site access in design mode, edit mode, or preview mode can be performed.

Engaged within Locale view, you can:

• Localize content and styles
• Customize Collection content
• Modify page settings