Localization overview

Localization is the process of adapting your site to meet the cultural and linguistic needs of site visitors around the world. With Webflow Localization, you can create customized experiences for your audience depending on their language or region. 

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 Localization works
2. How to add and manage locales
3. How to navigate to a locale in the Designer

How Localization works

A locale is a language or language and region combination that you select to meet your target customer/audience needs. Your primary locale should be the default locale/language in which you want to build, design, and deliver your site. For example, if you live in the U.S., your primary locale would likely be “English.” You can add locales to support additional languages and regions on your site. 

By default, your secondary locale(s) inherit the content and presentation of your site’s primary locale. If you never change anything on your site’s secondary locale and publish your site, both locale versions of your site will serve the same content, assets, and presentation. Webflow will never serve an empty page or missing content just because a regional version of the site hasn’t been localized yet. 

When you’re ready to customize a given locale, you can override or localize the content, styles, or assets that it inherits from your primary locale. All changes you make in a secondary locale affect only that secondary locale. At any point, you can reset the overrides to re-inherit data from the primary locale — just as you do with style overrides/resets.

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

Learn more:

• Localized SEO and locale routing
• Localize content and styles
• Localize Collection content
• Localize page settings
• Build a locale switcher

Note: Enterprise and Advanced Localization plans include automatic domain-level routing — meaning if a site visitor has a preferred language set in their browser, Webflow will attempt to route them to the correct locale version of your site. If your site doesn’t support their preferred locale, or if a site visitor has no preference set, Webflow will route them to the primary locale by default. Learn more about localized SEO and locale routing.

How to add and manage locales 

Note: A free preview of basic Localization functionality (e.g., machine-powered translation and static page, CMS, and SEO localization) is included in all Site plans, from Starter to Enterprise. You’ll need to purchase a Localization add-on in order to publish your site to a secondary locale or add more than one secondary locale to your site. Check out a complete comparison of Localization plans and features.

You can get started with Localization by opening Settings panel > Localization. First, you’ll need to set your primary locale — the default locale or language you want to use on your site. Select or type the name of your locale in the Primary locale dropdown. Then, you can set the locale’s: 

• Display name
• Subdirectory
• Display image
• Publishing status

Once you’ve specified your primary locale, save your changes. You can then click Add new locale to create additional locales and manage each locale’s display name, subdirectory, and publishing status.

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.

Display name

The locale’s display name is the text used in the Locale list element. This can be used to build a locale switcher or other experience that lets your site visitors choose the locale best suited to them. You can update the locale’s display name at any time. The display name is updated in the Locale list element when you publish your site. 

Subdirectory

By default, each locale’s subdirectory (i.e., URL slug) is set to the locale’s ISO tag (sometimes called “country code,” i.e., the internationally recognized code that represents a country and region). You can customize the subdirectory URL according to your needs (e.g., for a “Spanish” site, the default subdirectory is yourdomain.com/es, but could be customized to yourdomain.com/spanish). Your site’s language code is unaffected by any changes to the subdirectory name.‍

Note: By default, your primary locale will not use a subdirectory, but you can redirect all site traffic on your primary locale to a subdirectory (e.g., yourdomain.com/en) by toggling Enable publishing to the subdirectory “on.”

Display image

The display image is the icon or flag associated with the locale. You can use the display image you upload here in your locale switcher. Note that you must upload the display image in Localization settings — that is, you can’t use images from the Assets panel.

When you upload a display image, it also imports to the Assets panel, where you can manage its alt text. Deleting the image in the Assets panel also deletes the image in Localization settings.

Publishing status

You can control the publishing status (i.e., enable or disable publishing) for each secondary locale you add to your site. If you want to continue publishing your site to your main domain/primary locale without publishing your secondary locales, toggle Enable publishing to the subdirectory “off” on each secondary locale you don’t want to publish. When you’re ready to publish content to your secondary locale, you can toggle Enable publishing to the subdirectory “on.” You’ll need to publish your site to see these changes take effect.

Note: Only locales with Enable publishing to the subdirectory toggled “on” will appear in the Locale list element. Locales are automatically added to the Locale list when publishing is enabled. Learn how to build a locale switcher with the Locale list element.

How to navigate to a locale in the Designer

Once you’ve added your secondary locale(s) to your site, a new Locale view dropdown will appear in the top bar of the Designer. You can click the Locale view dropdown and choose a secondary locale from the list to access your site in design mode, edit mode, or preview mode. Preview mode lets you preview your site design in a given locale before publishing. 

Once you’ve entered a Locale view, you can: 

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