Customising the Language Switcher
The Language Switcher is one of the essential features of a multilingual website because it lets the visitors switch between different languages.
Only admins of the project will be able to choose how to display the content in the Language Switcher. There are multiple options to choose from:
- Only flags
- Only the name of the language which is displayed in its local format
- Only a short name of the language which is displayed in its local format
- Combinations of the above options, such as Flag & Name or Flag & Short name.
Designing the Language Switcher
Dilingual lets you choose from different pre-designed types such as Sticky, Dropdown, and List. Each type has several configurations options. To select a type, navigate to Settings -> Language Switcher and the then select the preferred option.
The Sticky type might be the simplest display. The configuration options are:
- Position. Select the preferred position of the Language Switcher in your website for maximum visibility. The available options are: top-right, top-left, bottom-right and bottom-left.
- Hide the flag. "Check" this option if you want to hide the flags.
- Hide the fullname. "Check" this option if you want to hide the fullname of the language, but show the short name . For example, "English" would be displayed as "en".
- Hide the name. "Check" this option if you want to hide the name of the language.
- Hide "Translated with Dilingual. Check this option if you want to hide the "Translated with Dilingual" text. Note.This feature is disabled for free plan users.
- Customised CSS
Dilingual will let you tailor the Language Switcher even further, by adding CSS properties in this text field. You can always reset the style to default, simply by leaving the field empty.
Dropdown & List
Dropdown and List will have the same configurations options as Sticky, but instead of Position, you have to define the CSS selector. The CSS selector is the node that the language switcher will be child of. It can be a .class or an #id, for example .navbar-language. You need to make sure that the selector is spelled correctly.