Working with Localization
Webflow Localization is end-to-end solution for customizing your website for visitors around the world – from design to translation to publishing. With these APIs, your Apps can make dynamic content updates and enable custom localization workflows, providing scalability for growing businesses that are looking to enhance global user engagement and optimize performance for international audiences.
Let’s look at an example. AstralFund is an imaginary bank that serves two locales – the United States and France. To properly address each market’s needs, the bank needs to localize content throughout the site. In the images below, we’ve localized some content. In this tutorial, we’ll walk through how to localize the entire site.
Primary Locale
Secondary Locale
United States 🇺🇸
The site’s primary locale is set to the United States with content in English.
What we’ll build
In this tutorial, we’ll walk through the process of localizing content for a French audience on a website. By the end of this tutorial, you’ll have a fully localized “Contact Us” page and a new testimonial that resonates with your French audience. You’ll learn how to:
- Identify primary and secondary locales within Webflow.
- Localize the DOM elements like text and images.
- Optimize SEO data for different locales.
- Manage CMS content across multiple locales.
Prerequisites
Our Localization Example with code samples and localized data
A Webflow site plan that supports CMS
A Webflow App or a Site Token with the following scopes: sites:read, cms:read, and cms:write
Some knowledge of HTTP requests and JavaScript