Webflow Localization

The Locale List Element

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
December 8, 2023
Updated
December 8, 2023
in lightbox

With Localization comes a new element named the Locale List.

The Locale List provides a Collection List-like element which can be used to present a list of all published locales, and which has some unique data-binding options to the elements within.

But it has a few limitations;

  • All locale names appear to be in English, and cannot be overridden or localized within Webflow
  • The order of items in the locales list apparently cannot be changed
  • The switcher is text-based and it doesn't stand out, there's nothing visually appealing about it to draw attention. You can style it, but there's no native way for it to include art or country flags.

We weren't happy with those limitations, so we decided to fix them.

In the following lessons, we'll walk through our preferred build-out, which includes these features;

  • A dropdown-style nav bar element
  • Country flags to represent the locales we're supporting
  • Localized locale names
  • Solid mobile responsiveness

We have not yet tacked the ordering issue, but for most sites, that's relatively minor.

Known Bugs

Current Locale Confusion

Designers are often confused by the Current Locale state under the style panel, which doesn't seem to work as expected. We're not using that here.

My best guess is that this is targeted at Enterprise customers, who have the ability to do Locale-specific styling, and that this state indicates a style applied only to the current locale ( whatever you have currently selected in the top left locale toggle ).

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.