This article explains how to let your visitors change language and offer each of them their own. You will be able to place a language switcher in your header and a banner that suggests the right version of a page.
Before you start
- Your site must have at least two content languages and your pages their linked translations. Translate a page explains how to link them.
- Your site never redirects a visitor to a language on its own. It offers them their language and the visitor chooses.
- Two blocks handle this. The Language switcher serves the visitor who wants to change language. The Language suggestion informs the one who does not know the page exists in their language.
On a single-language site, both blocks show nothing on the page. In the editor, their settings show This block appears once the site has at least two content languages. Add one under Languages, then come back. You can place them before you add your second language.
Place a language switcher
For the switcher to appear on every page that shows your header, place it in that header.
- In the admin menu, open Templates > Compositions, then your header.
- Add the Language switcher block where you want it. Add a block explains how.
- In the Settings tab, Language switcher panel, choose what each language shows and how the languages are presented.
- In the block, select the Language entry.
- Set its appearance in the Styles tab.
- Publish the header.
| Setting | Choices | Default value |
|---|---|---|
| Show | The language name (Français, English) or The short code (FR, EN). | The language name |
| How the languages are shown | With Side by side, all the languages are in a row. With In a menu, a button names the page’s language and opens the list. | Side by side |
Each language is written in its own language with a capital letter, for example “Deutsch” for German. A visitor recognizes theirs without reading yours. The languages follow the order of the languages table.
Set the appearance of the languages
All the languages are drawn from a single Language entry: you set the appearance once. The entry’s Styles tab has four states.
| State | Styled language |
|---|---|
| Default | A language the visitor can choose. |
| Hover | The language under the pointer. |
| Focus | The language reached with the keyboard. |
| Active | The language of the current page. |
The switcher comes with slightly smaller text and an underline on hover and focus. The page’s language is shown in your main color and in bold.
Present the languages in a menu
With In a menu, a button names the page’s language. A click or the Enter key opens the list of all the languages. This presentation suits a footer or a busy header.
| Element | Settings |
|---|---|
| Language entry | The appearance of each language in the list. |
| Language menu button | The appearance of the button and its icons, in the Icons panel. The Active state styles the button when the menu is open. |
| Language menu | The appearance of the surface that opens and the layout of the languages. |
The button comes with a downward arrow. With the menu open, it points up. The menu opens below the button or, at the bottom of the page, upward. It closes with a second click, a click elsewhere, the Esc key or when focus leaves it. It never opens on hover.
Know where each language leads
| Page viewed | Destination |
|---|---|
| Content translated and published in that language | Its translation. |
| Content without a published translation in that language | The home page of that language. |
| The home page, a list, a search or the 404 page | The home page of that language. |
A draft translation does not count: its language leads to the home page until it is published. Each link announces its language to screen readers.
The switcher is announced to screen readers as a navigation region named Language. If a page has two switchers, give each one a name. The Region name field is at the top of the Settings tab.
Suggest the visitor’s language
A visitor who reads English arrives from Google on the French version of a page that exists in English. The Language suggestion block shows them, in their language, a banner that leads to the same page in English.
- Open the template or composition that holds the top of your pages.
- Add the Language suggestion block at the top, above or just under the header. It has no settings.
- Set its appearance in the Styles tab, with the Default, Hover and Focus states.
- To add icons, choose them in the Icons panel of the Styles tab: one at the start of the banner and one at the end of the link.
- Publish the template or composition.
In the editor, the banner is shown in your language with a sample language. On your site, its text and the suggested language depend on each visitor.
Know when the banner appears
The banner appears only if all these conditions are met. Otherwise, it takes up no space.
- The page is a content item that has a translation, or the home page of a site with several languages.
- The translation is published and not protected by a password.
- The visitor’s browser asks for another language before the page’s language.
- The visitor is not a robot. Search engines never receive the banner.
The suggested language is the first one in the browser’s list that exists for the page. The visitor’s country is used only to choose between two variants of the same language, such as British and American English. Another variant of the page’s language is never suggested.
The banner has no close button. When the visitor follows the link, the page is in their language and the banner disappears.
Read the banner text
The banner is written in the language it suggests.
| Suggested language | Text shown |
|---|---|
| English | “View this page in your preferred language.” and the link “Switch to English” |
| French | “Voir cette page dans votre langue préférée.” and the link “Passer en français” |
For any other language, the banner stays in English until you translate it. Only the language name is written in its own language, for example “Switch to Deutsch”. Translate your labels and messages explains how to translate it.