Learn how to use the Locales list element and bind elements on a page to locale data.
The Locales list element works like a Collection list for your site’s locales. You can use it to list all publishable locales on a page and, with data binding, connect text and images to locale fields such as display name, language, country, or display image.
Note
You’ll need to set up one or more locales to use the Locales list element. Only locales that have publishing enabled are displayed in the list.
To enable publishing on secondary locales, you’ll need to
upgrade to a paid Site plan
and a
paid Localization add-on.
Anatomy of the Locales list element
The Locales list is made up of four nested elements:
Locales Wrapper
Locales List
Locale
Locales Empty
The Locales Wrapper is the parent that contains the rest of the Locales list structure. Inside it, the Locales List contains the Locale element.
By default, the Locale element includes a text link bound to the locale’s display name (for example, “English (United States)”), and you can add more elements, e.g., text block, image, etc.
Content you add to the Locale is static until you bind it to locale data — once you do, those elements become dynamic and show the relevant values for each locale.
The Locales Empty element is displayed if no locales have been set up.
Locale data
When you add locales to your site, each locale contains data you can bind to:
Locale (e.g., en-US)
Language (e.g., en)
Country (if set — e.g., US)
Display name (e.g., English (United States))
Locale image (the display image you’ve set for the locale, e.g., a flag)
You can bind locale data to elements to in two contexts.
Locale data in Locales list context
When you add elements to a Locales list, they’re static by default, i.e., the same content is repeated for each locale in the list. But when you bind those elements to locale data, the static content is replaced with dynamic content, pulled from each locale.
Locale data in page context
When your site has one or more secondary locales, current locale data becomes available at the page level. This allows you to bind text and image elements to current locale data so they update automatically based on the locale your visitor is viewing.
Bind elements to locale data
To dynamically update the content of an element, bind it to locale data:
Select the element on the canvas or in Navigator
Open the Element settings panel
Click the “purple dot” icon next to the Text or Image field
-
Choose one of the following to bind to:
Locale (e.g., en-US)
Language (e.g., en)
Country (if set — e.g., US)
Display name (e.g., English (United States))
Locale image (the display image you’ve set for the locale, e.g., a flag)
Style the text or image however you’d like
Once bound, the element’s content updates automatically based on the locale context — for each locale in a Locales list, or for the current locale on the page.
Disconnect elements from locale data
If you no longer want an element to use locale data, you can disconnect the binding:
Select the bound element on the canvas or in Navigator
Open the Element settings panel
Click the field name next to the Text or Image field (for example, Display name or Locale image)
Click Disconnect property
Once disconnected, the element stops using locale data and returns to static content (i.e., it'll no longer update automatically based on the locale context).