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.

Displaying 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:

  1. Only flags
  2. Only the name of the language which is displayed in its local format
  3. Only a short name of the language which is displayed in its local format
  4. Combinations of the above options, such as Flag & Name or Flag & Short name.

Screenshot

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.

Screenshot

Sticky

The Sticky type might be the simplest display. The configuration options are:

  1. 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. Screenshot
  2. Hide the flag. "Check" this option if you want to hide the flags.
  3. 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".
  4. Hide the name. "Check" this option if you want to hide the name of the language.
  5. 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.
  6. 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 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.

Screenshot