Table of Contents
Webflow Localization: A Guide to Building Multilingual Websites
Webflow introduced native localization support, allowing designers and marketers to build multilingual websites directly within the Webflow Designer. This feature eliminates the need for third-party translation plugins or duplicating entire projects for each language.
This guide covers how Webflow localization works, its capabilities and limitations, SEO handling, and how it fits into a broader localization workflow.
How Webflow Localization Works
Webflow's localization feature uses a locale-based system where you define a primary locale (your source language) and add secondary locales for each additional language.
Key Concepts
- Primary locale — Your default language. All content is first created in the primary locale.
- Secondary locales — Additional languages. Each secondary locale can override any text, image, or element visibility from the primary locale.
- Locale subfolders — Webflow generates URLs with locale prefixes:
example.com/fr/about,example.com/de/about. - Locale switcher — A built-in component that lets visitors switch between languages.
Setting Up Locales
- Open your Webflow project settings
- Navigate to the Locales tab
- Add secondary locales by selecting a language and region
- Configure display names and URL prefixes for each locale
Webflow supports a wide range of language-region combinations following BCP 47 standards (e.g., en-US, fr-FR, pt-BR).
Translating Content
Static Content
For static page content (headings, paragraphs, buttons), Webflow provides an in-context editing experience:
- Switch to a secondary locale using the locale switcher in the Designer
- Click on any text element — the primary locale text appears as a reference
- Enter the translated text directly in the Designer
- Visual formatting and styling remain consistent across locales
This inline approach means designers and translators can see exactly how translated text will appear in the final layout, catching overflow or layout issues immediately.
CMS Content
Webflow CMS collections support per-locale content:
- Each CMS field can have locale-specific values
- Collection pages automatically generate locale-prefixed URLs
- Rich text fields, images, and other field types are all localizable
- Reference and multi-reference fields can be localized to point to locale-appropriate related content
For example, a blog post collection can have different titles, body content, and featured images for each locale, while sharing the same slug structure.
Elements You Can Localize
- Text content — Any text element (headings, paragraphs, links, buttons)
- Images and alt text — Swap images per locale (useful for screenshots with localized UI)
- Element visibility — Show or hide specific elements per locale
- Link URLs — Change link destinations per locale (e.g., locale-specific documentation)
- Form fields — Localize placeholder text and labels
- CMS content — All CMS field types support per-locale values
Elements That Are Shared
- Layout and structure — The page layout is shared across all locales
- Styles and classes — CSS styling is global
- Interactions and animations — Triggers and animations apply to all locales
- Custom code — Embedded scripts are shared (you must handle language detection yourself)
SEO and Multilingual Handling
Webflow's localization feature handles several SEO requirements automatically.
hreflang Tags
Webflow automatically generates hreflang tags in the <head> of each page:
<link rel="alternate" hreflang="en" href="https://example.com/about" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/about" />
<link rel="alternate" hreflang="de" href="https://example.com/de/about" />
<link rel="alternate" hreflang="x-default" href="https://example.com/about" />
These tags tell search engines which language version to show to users in different regions.
Sitemap
The generated sitemap.xml includes all locale variations of each page, helping search engines discover and index all language versions.
Per-Locale Meta Tags
You can set locale-specific values for:
- Page title (
<title>) - Meta description
- Open Graph title and description
- Open Graph image
This ensures each locale has properly optimized metadata for search engines and social sharing.
Limitations
No Machine Translation
Webflow does not include built-in machine translation. All translations must be entered manually through the Designer or imported via the Webflow API. This is a deliberate design choice that prioritizes quality, but it means the initial translation effort is entirely on the user.
Layout Constraints
Since all locales share the same layout, text that is significantly longer or shorter in certain languages may cause layout issues. German text is often 30-40% longer than English; Chinese and Japanese text may be more compact. Test layouts with your longest target language to ensure containers handle overflow gracefully.
No Pluralization or Variables
Webflow's localization does not support ICU MessageFormat, plural rules, or variable interpolation. Every text variant must be a separate, complete string. For dynamic content that depends on counts or user data, you would need custom JavaScript.
API-Only Bulk Operations
There is no built-in bulk import/export for translations in the Webflow Designer. For large sites with hundreds of pages, manually translating through the visual editor is time-consuming. The Webflow API supports programmatic content management, enabling integration with external translation tools.
Integration with External TMS
For teams managing translations at scale, integrating Webflow with a translation management system (TMS) through the API enables:
- Export — Pull source language content from Webflow via the CMS API
- Translate — Professional translators work in the TMS with translation memory, glossaries, and context
- Import — Push completed translations back to Webflow via the API
This workflow is especially valuable for:
- Sites with more than 50 pages or CMS items
- Teams working with professional translators or agencies
- Organizations that need translation memory to maintain consistency
- Projects requiring terminology management across Webflow and other platforms
Best Practices
Design for the Longest Language
When creating layouts, account for text expansion. A container that fits "Sign Up" in English needs to accommodate "Registrieren" in German or "Inscription" in French. Use flexible containers (flexbox, auto-height) rather than fixed dimensions.
Use CMS for Repeated Content
If the same translated text appears on multiple pages (testimonials, feature descriptions, FAQ items), store it in a CMS collection. This ensures you translate it once and it updates everywhere, rather than translating the same text on every page.
Plan Locale Structure Early
Adding localization to an existing Webflow site is possible, but planning for it from the start is easier. Consider your URL structure, locale switcher placement, and fallback behavior before building.
Localize Images with Text
If your images contain text (hero banners, infographics, social proof), create locale-specific versions. Webflow's per-locale image swapping makes this straightforward.
Frequently Asked Questions
How much does Webflow localization cost?
Webflow localization is available on specific Workspace plans. The number of included locales varies by plan tier. Check Webflow's current pricing page for the latest details.
Can I use subdomains instead of subfolders?
Webflow's native localization uses subfolder-based URLs (/fr/, /de/). Subdomain-based localization (fr.example.com) requires a different setup using separate Webflow projects or custom hosting.
Does Webflow localization work with Webflow Ecommerce?
As of 2025, Webflow's localization feature has limited support for Ecommerce. Product content can be localized, but pricing, checkout, and transactional emails have constraints. Check Webflow's documentation for the current state of Ecommerce localization.
How do I handle right-to-left (RTL) languages?
Webflow supports RTL text direction through the locale settings. When a user views an RTL locale, text alignment and reading direction are adjusted. However, full layout mirroring (flexbox direction, margin positions) may require custom CSS overrides.
