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 feature.
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 Switcher Editor allows you to reposition the language switcher on your website. It offers a preview of your website, where you can experiment with different designs by dragging and dropping the language switcher button until you are satisfied with its position.
1. How to access the Switcher Editor
First, go to your Weglot Dashboard > Settings > Language Switcher, and click on the "Switcher Editor" button:
Note that the Switcher Editor can only be used on live and accessible websites. It can't be used on password-protected websites. Your website's URL must also be set, which you can do through the Weglot Dashboard > Settings > General.
2. How to change the position of the switcher
To change the position of your language switcher (which is located in the bottom right corner of the browser window by default), click on it, then drag and drop it to your desired location. You can repeat this process until you're satisfied with its placement.
⚠️ Make sure to place your language switcher in a part of your website that's always visible, existing, and is an HTML element. This helps visitors switch languages easily and ensures that the Switcher editor works correctly
Finally, click on "Save" to register your changes.
3. How to reset the switcher to its default position
You can reset the switcher to its default position by clicking on the "Position" dropdown located on the menu on the left. Then, click on "Reset to default position".
4. How to add a mobile switcher
You can add as many language switchers as you want, even for the different versions of your website (mobile and desktop, for example).
First, select the appropriate version in the bottom left corner:
Then, click on the plus icon in the top left corner:
This will add a new language switcher that you can drag and drop at the desired location, then click "Save" to apply your changes.
5. How to change the design of the switcher
- Display the language name: If activated, the language name will be displayed.
- Display the full language name: If activated, the full language name will be displayed. Otherwise, only the language code will be displayed (EN instead of English, for example).
- Switcher as a dropdown: If activated, the switcher will be shown as a dropdown. If deactivated, all the languages will be displayed as a list.
- Display language flags in switcher: If activated, a flag is displayed in the switcher next to each language name. You'll also be able to choose the type of flags (shiny rectangle, matte rectangle, square, circle)
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 these options:
- If the switcher can be opened by hovering it
- If the switcher automatically closes by clicking outside on the page (if, for example, it's a dropdown switcher)
- If the switcher is only shown on specific screen sizes
Once you configure your desired settings, click on "Save", and it's done.
If you'd like to make further design adjustments to your language switcher, feel free to look at our dedicated article: How to change the design of the language switcher?