Webflow Localization: All You Need to Know

Webflow Localization: What's New and Used

During the 2023 Webflow conference (Webflow Conf), many new features were introduced, including the”Localization“.

Similar to other location services, Webflow localization offers comprehensive solutions for customizing websites for a global audience, from designing To the translation going through the SEO.

In this article, we'll explore what localization is, how it works, and how to use it in the Webflow designer to get the best results.

What is Localization?

Website localization is the process of adapting a site to make it more suitable and appealing to a specific target market, usually based on their geographic location, language, and cultural preferences.

For example, the location of the McDonald's site is obvious in different countries. The French site (mcdonalds.fr) uses the French language, and the Indian site offers a menu without beef, adapted to local eating habits.

Site designs and promotions also vary to reflect regional cultural nuances and comply with local laws, ensuring a tailored experience for customers in each market.

Of course McDonald's is an extreme example, and sometimes websites just want to change aspects of their pages to make them more appealing to local customers and make them more relevant.

How Webflow Localization Works

Webflow localization allows users to create and manage multiple versions of their website for different regions and languages directly in the Webflow platform.

They usually do this by adding the primary and secondary locale.

A “local” in the context of web development and localization refers to a specific geographic, cultural, or linguistic market for which a website or digital content is suitable.

This typically includes a combination of linguistic and regional settings, such as language, date and time formats, currency, number formats, and other cultural norms. For example, “en-US” represents English as used in the United States, while “fr-CA” represents French as used in Canada.

The localization process on Webflow generally involves:

1. Adding locals : Users can add different locations to their site, each representing a different linguistic or regional version.
2. Customizing design and content : In Webflow Designer, users can design and build their site with localized content. They can customize static pages, CMS content, images, alternative texts and styles for each local.
3. Translation integration : Webflow allows text to be translated either natively or via third-party translation tools. Users can start with a machine translation and refine the translations manually.
4. SEO and traffic optimization : The platform includes features for localized SEO, such as custom URLs, metadata, and sitemaps with hreflang tags.
5. Improving the user experience : Webflow provides tools to control the visibility of items and create customizable locale selectors for site visitors, allowing them to choose their preferred language or region.

Key Webflow Localization Features

The number of features and their limitations depend primarily on the location plan you choose to use. There are currently three pricing plans: Essential, Advanced, and Enterprise.

Essential Plan costs $9 per room per month and includes:

• Up to 3 locations
• Machine translation
• CMS location
• Locating static pages
• Localized SEO

Advanced Plan costs $29 per local per month and includes all of the above features plus:

• Up to 5 locals
• Location of resources
• Localized URLs
• Automatic visitor routing

Enterprise plan has no disclosed price, as it needs to be discussed with the Webflow sales team. It includes all of the above features, in addition to:

• Custom number of premises
• Locating styles
• Customizable element visibility
• Enterprise scale
• Full integration with Webflow Enterprise

Key Benefits of Webflow Localization

Here's how localization can help grow your website and, as a result, your business.

• Improving the user experience : By adapting content to different languages and cultural contexts, Webflow localization improves user engagement and satisfaction.
• Expanding global reach : Localization allows businesses to effectively reach and communicate with international audiences, expanding their market presence.
• Improving SEO : Localized content and URLs can dramatically improve SEO for different regions, leading to better visibility and increased traffic. Combined with a good Webflow SEO agency, you can achieve a significant impact with local SEO.
• Simplified process : Webflow's visual design tools and integration options make the localization process efficient and accessible, even for users without technical expertise.
• Cultural relevance : By localizing content, images, and design elements, businesses can ensure cultural relevance and sensitivity, which is crucial for building trust and brand loyalty in diverse markets.

How to Use Webflow Localization

Webflow did a great job of simplifying the localization process. Here's what you need to do.

Access Locales from Webflow Designer

Once you've set up the locals, you can access them from Webflow Designer. A new dropdown menu will be added to your top menu, where you can switch between the primary and secondary locations to edit them. All locations are available in design mode, edit mode, or preview mode.

Then you need to start working on the main thing:

• Localize content and styles
• Locate collections
• Locate page settings

Add Locals to Your Project

To set up your locations, you need to go to the settings panel > Location. The first one you'll need to set up is the primary locale, and you can add more locations later.

To set up a locale, you need to determine three things:

1. Display name : If you add a location selector to your website and it's visible to your visitors, they'll see the display name for each locale you've set up.
2. Sub-directory : The sub-directory (local slug) is automatically configured according to the internationally recognized country code. For example, if you have a Serbian version of the site, the standard slug would be yoursite.com/sr/, but you can change it to yoursite.com/serbian/ or anything else you want.
3. Publication status : Webflow localization gives you the option to publish something on the primary locale but not on the secondary locals. You can enable or disable the publication of content in secondary locations.

Content and Style Localization

Once you select the secondary locale in Designer, it will look similar to the primary locale, but you can replace it and change the content that will only apply to the locale you're editing at that time. Here's what you can edit:

• Text on the canvas : Simply click on the text and edit it as you want to adjust it locally. You can also use Webflow's translation option and let the AI translate the content for you.
• resources : Assets may require localization because they contain text that needs to be adjusted or you need a completely new resource for the specific locale. In this case, simply select the resource you want to replace and download another one instead. Remember to locate alternative resource descriptions as well. Webflow localization also allows you to keep the same resource but only change the alternative texts for them through the locals.
• Styles : You can locate the styles on a local for any element in order to adapt your site to the target audience.
• Components : To locate the components on your site, select the desired locale from the Locale view drop-down menu, then double-click the main component on the canvas to edit it. This allows you to change the text and links in the main component, ensuring that all instances in that locale reflect these changes. Alternatively, you can locate the default values for a component's properties by editing them in the item settings panel under Component Properties. For individual component instances, edit their properties directly in the selected locale, although these changes will not affect other instances, even in the same locale.
• Meaning of the text: Webflow automatically supports right-to-left texts such as Arabic when you locate such sites. But if you don't want it to be applied, you should add dir="ltr”, dir="rtl”, or dir="auto” (recommended) as a custom attribute.
• Visibility of elements : You can customize the layout of the page by changing the visibility of the elements for each location. To do this, select the desired locale from the Locale view drop-down menu, go to the item settings, and then adjust the visibility setting for specific items to show or hide them. In particular, elements hidden in this way are removed on the server side, which means that they will not appear in the site design or in its HTML markup, ensuring a clean and local-specific presentation.

Location of the collections

When you create a collection, its structure and fields are shared between all the locals, regardless of which view locale is selected. However, the individual CMS elements in a collection, such as blog posts or recipes, are unique to each locale, allowing for content tailored by locale. This means you can create specific items like an event collection item for a locale, like “Thanksgiving” for English-us, and exclude it from other locals, such as English-uk.

Secondary locals inherit field values from the primary locale, but once customized in a secondary locale, they won't update with changes in the primary locale. To reset a collection field to its primary locale value, select the field in the secondary locale and choose Reset. You can view, create, edit, or delete collection items in any locale by selecting the desired locale from the Locale view pull-down menu.

To manage publication statuses by locale, you can stage collection items like blog posts for publication in one locale while keeping them as drafts in another. This is done by opening a collection item and using the “launch arrow” icon to edit and manage its publication status for various locations.

To locate collection lists, Webflow automatically retrieves collection items for the current local view in both the Designer and the published site. A list of collections, like “Blog Posts,” will only show items from the selected locale. To show collection items from the primary locale in a secondary locale, adjust the collection list settings to “Use primary locale.”

Locating Page Settings

Webflow also supports the localization of SEO, OG, and page parameters, which means that they can be different depending on the location.

To change the SEO and Open Graph settings, select a location, open the page panel, click the cog icon to open the settings, and proceed to edit the settings. They will only be registered at the local level.

You can also localize custom code, and the best approach to do this is via the HTML lang attribute, which can be used as a locale selector.

Conclusion

In conclusion, managing multi-local websites in Webflow is a smooth and efficient process thanks to the location feature. By using Webflow's robust capabilities, you can easily create, locate, and manage content across multiple locations, ensuring that each version of your site is tailored to its respective audience. From customizing collection items and their publication statuses to adjusting the layout of the page through the visibility of the items, Webflow offers an intuitive platform for building dynamic and region-specific websites.

For those looking to unleash the full potential of these capabilities, consider collaborating with No Code Agency, a Webflow agency specialized in creating exceptional digital experiences. Our expertise in Webflow will guide you to maximize the platform's functionalities, including localization functionality for your multilingual website needs.