How to use the Switcher Editor
In this article, you'll learn how to change the position of the language switcher on your website through the Switcher Editor.
1. How to access the Switcher Editor
2. How to change the position of the switcher
3. How to reset the switcher to its default position
The Weglot Switcher Editor lets you easily move the language switcher around your website. Thanks to the interactive preview of your site, you can drag and drop the language switcher wherever you want until you find the perfect location.
1. How to access the Switcher Editor
First, go to your Weglot Dashboard > Settings > Language Switcher, and click the "Switcher Editor" button :
Important notice : the Switcher Editor can only be used for sites in production. The site must be publicly accessible. This means it cannot be used on password-protected sites. The site URL must also be entered in your Weglot Dashboard > Settings > General.
2. How to change the position of the language switcher
By default, the language switcher is located in the bottom right corner of the browser window. To move it, simply drag and drop it to the desired location. Repeat this process until you find the perfect location.
⚠️ Make sure to place the language switcher in a visible and persistent HTML block on your site. This means that the HTML block involved must be part of every page on your site. Otherwise, the language selector will revert to the default position whenever the HTML block in which it is embedded is absent.
Finally, click the "Save" button to apply your changes.
3. How to reset the language switcher to its default position
To reset the language switcher to its default position, open the menu on the left and click the "Position" dropdown. Then, click the "Reset to default position" button.
4. How to add a mobile switcher
You can add multiple language switchers, including separate ones for different site versions, such as desktop and mobile.
First, select the site version for which you want to create a language switcher menu on the bottom left.
Click on the "+" icon located in the menu on the top left.
This will create a new language switcher, which you can drag and drop to the desired location. Then, click the "Save" button to apply your changes.
5. How to change the design of the language switcher
- Display the language name: Shows the language name if enabled.
- Display the full language name: If enabled, the full language name will be displayed. If disabled, only the language code "EN" instead of "English" will be shown.
- Language switcher as a dropdown: If enabled, the language switcher will appear as a dropdown. If disabled, all languages will be displayed in a list.
- Display language flags: If enabled, the flag will be displayed next to each language name. You can also choose the flag style.
You can also choose a pre-made template in the "Choose a switcher template" dropdown and customize it:
Finally, you can edit some other settings in the "Behavior" section:
In this section, you can edit the following options:
- Enable hover activation: Choose whether the language switcher opens when hovered over.
- Auto-close on click outside: Decide if the language switcher should automatically close when clicking outside the page (useful for dropdown switchers).
- Display on specific screen sizes: Control whether the language switcher appears only on certain screen sizes.
Once you have configured your language switcher settings, click the "Save" button to apply your changes.
If you wish to further customize your language switcher, check out our dedicated article: How to change the design of the language switcher?