How to change the design of the language switcher?
In this article, you’ll find out how to customize your language switcher and change the way it looks.
Using Weglot, you have the possibility to change the design of your language switcher. To do that, you have several possibilities:
1. Change the language switcher options
4. Create your own custom switcher
1. Change the language switcher options
If you go on your Weglot Dashboard > Projects > Select a project >Settings > Language switcher, you'll have the option of changing some elements and display:
- The language name (such as "en" for English, for example)
- The full language name
- The language flags and the type of flags (square, circle, rectangle)
- The type of switcher (list/dropdown)
If you make any changes here, make sure to click on "Save changes".
You can also find the "Switcher Appearance" section further down on the page, where you can drag and drop the language you want and change its position in the language switcher:
If you prefer to display the flag of another country on your language switcher or to use your own flag, you can change them accordingly in this section. Here, you can modify the language switcher's appearance by changing the name of the languages and the flags displayed. (See: How can I change the flags of the language switcher?)
2. Add some custom CSS
On your Weglot Dashboard > Settings > Language switcher, you have the option of adding some custom CSS:
Feel free to get inspired by different styles and add your own CSS. You'll find some examples of custom CSS in the next part.
3. Use the Switcher Editor
For general usage of the Switcher Editor, please consult the following dedicated documentation:
How to use the Switcher Editor?
You'll find several sections inside it to create your own switcher design or to use some of the Weglot templates.
To use one, please check the Switcher style section:
Once inside the section, you'll find a batch of templates to use for your website.
Just click on it to select one and place it wherever you want on your webpage.
4. Create your own custom switcher
If you prefer to have your own designed switcher to match your website CSS codes, you can do so by creating a custom switcher.
You'll need to set up its design on your own and use the Weglot functions to have the links target your chosen languages.
To do so, please take a look at our developer documentation about useful JavaScript functions to use:
https://developers.weglot.com/javascript/link-hooks
Have any feedback on this article? Let us know!