The Language suggestion block shows a banner that offers the visitor the version of the page in their language. The banner is written in that language and never redirects the visitor. This page describes its styling, the conditions for showing it and the choice of the language offered.
Add the block
Insert the Language suggestion block (Add a block) once, in the site header or at the top of your templates: the visitor sees it on arrival. Placed there, it applies to all the pages that show it.
The block never redirects. A visitor whose browser is set to English may want to read your French page: the banner offers their language and they choose. Google advises against redirecting based on the visitor’s presumed language.
Style the banner
The block has nothing to set in its Settings tab: its Language suggestion panel only holds a help text. The banner is styled in the Styles tab.
| Panel | Purpose |
|---|---|
| Icons | An icon at the start of the banner, before the sentence. An icon at the end of the link, after the language name. Both are optional and each can change with the state, as on a Button. |
| Colors, Typography, Size & Spacing, Borders, Effects, Transitions | The look of the banner, in the Default, Hover and Focus states. The Focus state turns on when the link receives keyboard focus. See Color a block, Format a text and Set size, borders and effects. |
| Flex layout | The sentence and the link, in a row. The saved style Language suggestion puts 8 px between them. |
| Icon | Position | State change |
|---|---|---|
| At the start | Before the sentence, at the head of the banner. | Hover or focus on the banner. |
| At the end | In the link, after the language name. | Hover or focus on the link. |
The block has no Animations tab: the banner is composed by the server on each visit.
In the editor, the banner appears in the language of your interface, with a sample language name, so you can style it. On the site, the text and the language offered depend on each visitor.
When the banner appears
The banner only appears if all these conditions are met. Otherwise, it takes no space in the page.
| Condition | Reason |
|---|---|
| The page is a content item that has a translation, or the home page of a multilingual site. | A list, a search results page or an error page has no equivalent in another language. On the home page, the banner offers the home page of the other language. |
| The translation is published and has no password. | A draft would lead to a preview address, a protected page to a password form. |
| The visitor’s browser asks for another language before the page’s language. | This is what the visitor declares they read. |
| The visitor is not a robot. | A search engine would read the banner as text of your page. |
The banner has no close button. It disappears when the visitor follows the link: the page in their language no longer shows the banner.
The language offered
- The banner follows the languages the browser declares, in their order of preference. It does not start from the visitor’s country.
- The first language in this list that exists for the page decides. If it is the page’s language, nothing appears. A browser set to German then English, on a French page translated into English only, is offered English.
- A browser set to Swiss French finds your French: a plain language serves all its variants.
- When the site has several variants of a language, British English and American English for example, the banner offers the one the browser names. Failing that, it offers the one of the visitor’s country, then the first in the order of your languages.
- The banner never offers another variant of the page’s language.
The banner text
The sentence, the link and the language name are written in the language offered:
| Suggested language | Sentence | Link |
|---|---|---|
| English | View this page in your preferred language. | Switch to English |
| French | Voir cette page dans votre langue préférée. | Passer en français |
The language name is written in that language, in lowercase within the sentence: “Passer en français”.
On a phone
The sentence and the link are in a row. To make the link wrap under the sentence on a narrow screen, choose the Mobile screen. Turn on Wrap in the Flex layout panel.
Accessibility
- The banner declares its language: a screen reader changes voice to read it.
- The link declares the language of its destination.
- The icons are decorative and hidden from screen readers.
- The banner is announced as a note: it does not interrupt reading.