Webflow Localization

Locale-Specific Pages & Sections

Overview
Known Localization Limitations & Bugs
001
Supported Languages
010
Tips & Techniques
Choosing the Right Locales
100
Localizing an Already-Localized Site
101
Localizing Dates
102
Localizing CMS Option Fields
103
Localizing Numbers & Currencies
104
Locale-Specific Styles & Code
105
Maintaining a Localized Site
106
Locale-Specific Pages & Sections
107
Localizing Form Success & Error Messages
107
Locale Switcher
The Locale List Element
401
Build a Dropdown Locale Switcher
402
Add Flags to the Locale Switcher
403
Add Localized Locale Names to the Locale Switcher
404
Make the Locale Switcher Responsive & Visible in your Nav
405
Advanced Localization
Splitting Locales by ccTLD
801
No items found.
Published
January 24, 2024
Updated
January 24, 2024
in lightbox

Webflow does not have a built-in way to create locale-specific page or sections.

For example let's suppose your primary locale is English, and you have Dutch as a secondary locale. What if you want a page that only exists in the Dutch locale? Or only in the English locale?

The Problem

The problem is more complex than you think, because it involves

  • Your sitemap
  • Your href lang links in the translated page set

It also raises some ambiguities;

  • How does navigation work, and how do you handle the distinctions for each locale?
  • What happens if you're on that Dutch only page and then change the locale switcher to English?

Possible Solutions

Our preferred approach is to keep it simple. We let the pages overlap 100% but we customize irrelevant pages depending on what the client needs.

Soft 404 - This Page Does not Exist

One approach is to take your non-existant page and return an error message, plus an explanation like "this page only exists in Dutch, click here to view it."

Redirect

Or you can simply redirect. This can make sense if there is only one possible answer to the page they've requested.

The downside to this is that users who somehow arrive at that page will be locale-switched to the target language.

Handling Custom Displays

The basic mechanic here is to use custom CSS and the :lang() pseudoselector to manage what is displayed for each language.

Let's say you have a large page where the body content only makes sense in Dutch. You can decide to hide that entire section of the page by assigning a class of en-hide with custom CSS like;

.en-hide:lang(en) { display: none; }

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.