Localization in Webflow: A Complete Guide

Localizing your website in Webflow can seem daunting, but with the right tools and knowledge, you can make it a breeze. Webflow's built-in localization features allow you to create a single site that adapts to different languages and regions.

Webflow's translation feature, for example, lets you translate text in just a few clicks. This means you can easily create a multilingual website without having to hire a team of translators.

To get started with localization in Webflow, you'll need to set up a new site or edit an existing one. In the CMS section, you can add new languages and configure the site settings to accommodate different languages and regions.

Customizing your Webflow site is a breeze with the powerful localization feature. You can design, build, and customize localized sites directly in Webflow, visually, without writing code.

With Webflow, you can easily switch between locales and preview how each site looks for each locale before publishing. This saves you time and effort, and ensures that your site is tailored to each region or language.

You can adjust typography and styles per-locale to accommodate for different length headlines, fonts, and more. This is especially useful when dealing with languages that require more characters or have unique typography requirements.

Customizing localized items is a straightforward process. To do this, create a new item in your main language, and when you modify the fields, the changes will be applied to all languages by default. Then, switch to the desired language and modify the specific fields according to the language's needs.

Here are the steps to customize localized items:

Customizing collection template pages is also possible, and it's done in the same way as for static content. You can localize the page's static content, adapt its design, and even localize SEO data according to language.

By combining these elements, you create a seamless user experience, from the translation of textual content to visual adjustments and SEO information optimized for each language. This is especially important for creating a more engaging user experience and expanding your reach to a global audience.

You can build localized sites in Webflow with localized content directly in the platform. As you add locales, you can easily switch between them and preview how each site looks for each before publishing.

Webflow's approach to localization is unique, and it's essential to understand how it works. You have your main site, which is intended to be a single, primary locale.

Every locale has a version of every page, and they all begin with that locale's path prefix. This is important for predictability in any custom code-driven navigation you need.

You can't have a localized page outside of its localized path group. If your primary site is English and you have Japanese as an alt, your English page might be /about, but your Japanese localized version (even with custom paths) cannot be at /about-jp. It must be under the locale identifier, e.g. /jp/about.

Here are some key things to keep in mind when designing and building your localized site:

This means you'll still get 100 "localized page paths" even if you only want 14 of them translated to Japanese.

You can customize static pages and CMS items directly as you switch between locales.

Static pages can be used to implement multilingual content, especially for websites with fewer pages. This involves creating a separate static page for each language you want to support.

Localization allows you to customize images and update alt text across locales, ensuring more accessible localized experiences.

Customize images and update alt text across locales to ensure more accessible localized experiences.

You can adjust typography and styles per-locale to accommodate different length headlines, fonts, and more as each region or language requires.

Webflow's localization feature allows you to create a seamless user experience for visitors from different regions by adapting design for localization.

Collections, and the fields that go with them, are shared between all languages, ensuring consistency in terms of structure. However, the difference lies in the items within these collections.

Each language has its own distinct items. Think of each item as an independent instance of your collection, tailored to a specific language.

You can create a separate static page for each language you want to support, especially for websites with fewer pages.

Localization Features Overview

Customize your locales, design, build, and customize localized sites directly in Webflow — visually, without writing code.

Localization allows you to customize your site for a worldwide audience, making it easier to cater to visitors from different regions.

You can control the visibility of elements on your website, depending on the locale of the visitor, and create custom styles for different locales.

Localization is an essential feature for any website that wants to reach a global audience, providing a seamless and engaging user experience.

You can streamline your first pass at total site or individual element localization with machine-powered translation, then go manual for more granular control.

To translate content in Webflow, you can right-click on any element to translate it and its children. This works in the navigator, so you could translate the entire page by right-clicking the body element.

However, all translations must be done per-locale, so if you have 5 locales, you must switch locales 5 times to translate each item. There is no way yet to right-click the element and translate it for all locales.

Here are the key translation control options:

Translation management is also available, allowing you to keep track of which content has been translated and which content still needs to be translated.

Streamlining the localization process can be a game-changer for businesses looking to expand their global footprint.

You can start by using machine-powered translation to quickly localize entire websites or individual elements. This can save you a significant amount of time and effort.

Machine-powered translation is particularly useful for large-scale projects, such as localizing 40 mission-critical webpages in a short amount of time, as mentioned in a success story.

However, for more granular control, it's often necessary to switch to manual translation. This allows you to fine-tune the translation process and ensure accuracy.

By combining machine-powered and manual translation, you can achieve the best of both worlds and create a website that truly resonates with your global audience.

As a content manager or translator, you'll want to know how to work with Webflow's localization feature. With Webflow, you can perform translations from the default locale, and updates to the default locale will not automatically get updated in the translated versions.

You can right-click on any element to translate it and its children, but translations must be done per-locale, so if you have 5 locales, you must switch locales 5 times to translate each item. There's no way yet to right-click the element and translate it for all locales.

Here's a key thing to understand: translations work as "overrides" or the primary locale content. When you translate an element or a field, that content is copied and frozen - and it will not change until you re-translate it.

You can use the CMS feature to manage translations, but there's no Editor support, which means any Editor change made by a client must be communicated to the designer to make the corresponding updates in the translated versions.

Here are some things to keep in mind:

As a content manager or translator, you'll want to be aware of these limitations and plan accordingly. For example, you may need to manually update translated versions of your content if the primary locale is updated.

It's worth noting that Webflow's localization feature is still evolving, and there are some features that are not yet available, such as the ability to right-click the element and translate it for all locales, or to set auto-translation for an element.

When localizing a website, it's essential to match localized versions of pages to their primary locale page-for-page, element-for-element. This ensures a seamless user experience.

Significant variation between localized versions can create problems with site structure and SEO. For instance, if you have pages that exist in German but not in Spanish, or sidebars that only show on your Japanese-locale pages, you'll need creative solutions to keep your site clean.

To maintain a clean site structure, consider using localized slugs for collections, which can be translated to suit each language. This makes navigation easier for users in their preferred language.

You can customize collection template pages in the same way as static content. This means you can localize the page's static content, adapt its design, and even localize SEO data according to language.

Collection template pages can be localized by language, allowing you to adapt the design of your template pages to suit different languages. This is made possible by Webflow style localization.

To further optimize your collection pages for search engines, you can also localize SEO data such as titles and meta-descriptions within collection template pages. This is crucial for maximizing search engine visibility in each language.

Here are the key benefits of customizing collection pages:

Subdirectories can be used to implement multilingual content, allowing users to create a separate directory for each language they want to support.

Static pages can be used in conjunction with subdirectories to maintain a clean site structure and navigation. This approach is particularly useful for websites with fewer pages.

Subdirectories can be created within the website's root directory, making it easy to organize and manage multiple languages. For example, a subdirectory can be used for Spanish content, like .com/es/.

Customizing the locale slug and serving localized pages in a subdirectory can help maintain domain authority. Serving pages in a subdirectory like .com/es/ can also provide a clear and consistent user experience.

Site search can be a game-changer for user experience, and Webflow's approach is a great example of how it should be done. They restrict search results to the current locale, so if you're on the main search page, you'll only get results in your primary language.

This means that if you're on a page like /de/search, you'll get only German locale results, which is exactly what you'd expect. Site search works elegantly, and this approach makes it easy to find what you're looking for.

Here are some key takeaways about Webflow's site search approach:

Site visitor routing is a game-changer for any website. It allows visitors to choose their preferred language with a fully customizable locale selector element.

You can also leverage automatic routing to simplify the process. This feature is especially useful for websites targeting multiple regions.

With Webflow, you can design, build, and customize localized sites directly in the platform. This means you can visually create localized sites without writing a single line of code.

This approach has already improved workflows for companies like Sojern, which saw a significant boost in SEO benefits across regions.