How can I use the Multi Language feature in Webflow to create pages with different languages?
TL;DR
- Enable Multi-language in Site Settings, add desired languages, and assign default and secondary status.
- Create translated static pages and CMS content under language-specific folders or tabs, update navigation and SEO settings, then test live pages via language-specific URLs.
Webflow’s Multi-language feature allows you to create and manage multiple localized versions of your site directly within the Designer and Editor. Here's how to use it effectively step-by-step.
1. Enable the Multi-language Feature
- Go to Site Settings in your Webflow project.
- Navigate to the Languages tab.
- Add a language by choosing from the available preset options (e.g., French, Spanish).
- Webflow automatically creates a language root folder (e.g.,
/fr) for each language.
2. Set Up Base and Secondary Languages
- Select your default site language (this is typically your primary language).
- Choose from primary or secondary for each added language, which determines how it appears in translation management.
3. Translate Static Pages
- In the Pages panel, duplicate your existing page or create a new one under the language-specific folder.
- Manually update the content with the localized version.
- Translate headings, body text, buttons, and metadata.
4. Translate CMS Content
- Use the Webflow CMS Translations feature if available for your plan.
- Go to the CMS Collection, select an item, and switch to a different language tab to input the translated version of content fields.
- This will create parallel localized entries for dynamic pages like blog posts.
5. Update Navigation and URL Structure
- Modify your navigation menus so that each language version links to its corresponding pages (e.g.,
/fr/about-usfor French About page). - Build a language switcher using dropdowns or links to move users between localized versions.
6. Configure SEO for Multi-language
- Webflow automatically adds hreflang tags for each version.
- You can manually edit meta titles, descriptions, and Open Graph data per language in the Page Settings panel.
7. Test on Published Site
- Publish the site to your custom domain or Webflow staging.
- Visit pages using
yourdomain.com/[language-code]to verify that translations and navigation are set correctly.
Summary
To implement Webflow’s Multi-language feature, enable it from Site Settings, add languages, create localized static and CMS pages via folders or translation tabs, and make sure SEO and navigation reflect language choices. Webflow automatically handles URL structure and hreflang for SEO compliance.