Language Switcher
Links to the current page in your other languages, for sites translated with WPML or Polylang.
On this page
The Language Switcher widget lets visitors switch to another language version of the page they are on. It works with the WPML and Polylang plugins and lists the languages you set up there, as a row of links or a dropdown, with names, codes or flags. Place it in your header or footer.
Before you start
Install and set up WPML or Polylang and add your languages. The widget then lists them automatically. Until a translation plugin is active, the editor shows sample languages so you can design the switcher, and your site shows nothing. See Multilingual sites.
Add a Language Switcher
Open your header or footer template in the Theme Builder. Then open Insert in the left panel, find Language Switcher in the Site & theme group (or type "language" in the search box) and drag it where you want it. See Add elements.
Each link leads to the translation of the current page. When a page has no translation in a language, the link goes to that language's home page, or you can hide those languages with Hide languages without a translation.
Content tab settings
| Setting | What it does |
|---|---|
| Layout | Links in a row or Dropdown. Default: Links in a row. |
| Show | Name in the current language, Native name (Deutsch, Français…), Code (EN, DE…) or Nothing (flags only). Default: Name in the current language. |
| Flags | Shows the flag of each language. |
| Hide the current language | Leaves the current language out of the row. Shown for Links in a row. |
| Hide languages without a translation | Otherwise they link to that language's home page. |
| Alignment | Left, Center or Right. Can differ per device. |
Design tab settings
| Section | Settings |
|---|---|
| Links | Typography, Space between, Color, Hover color, Current language color, Dropdown background (for the dropdown), Flag width (when flags are on). |
The Design tab also has the sections every element shares: Spacing & position, Background & border and Mask. See Spacing, size & position.
Behaviour tab
The Behaviour tab has the settings every element shares: anchor and classes, entrance animations, motion effects, visibility per device, display conditions and interactions. A display condition on Language can show different content per language. See Display conditions.
Tips
- Native name is the friendliest choice: a German visitor looks for "Deutsch", not "German".
- Flags stand for countries, not languages. Use them together with names or codes rather than alone.