How to Translate a Website with Weglot

Learn how to customize your default language switcher.

3. Multilingual Design & Localization

Designing the Languages Switcher

Weglot provides you with a simple language switcher by default. You can then customize the design of your switcher to fit your website and branding. Here are the main ways to modify your language switcher:

1. Change the Language Switcher Options:

  • Navigate to Weglot Dashboard > Projects > Select a project > Settings > Language Switcher.
  • Modify elements like language name, full language name, language flags (square, circle, rectangle), and switcher type (list/dropdown).
  • In the "Switcher Appearance" section, drag and drop languages to change their position.
  • Click "Save changes" to apply your modifications.

2. Add Some Custom CSS:

  • On Weglot Dashboard > Settings > Language Switcher, find the option to add custom CSS.
  • Infuse your switcher with a unique style by incorporating custom CSS.
  • Get inspired by different styles or refer to the examples provided in the resources section.

3. Use the Switcher Editor:

  • Explore sections inside the Switcher Editor to create a personalized switcher design or utilize Weglot templates.
  • Check the "Switcher style" section for a variety of templates. Click to select and place them on your webpage.

4. Create Your Own Custom Switcher:

  • If you desire a completely unique switcher to align with your website's CSS, create a custom switcher.
  • Set up its design independently and use Weglot functions to link to your chosen languages.
  • Explore Weglot's developer documentation for useful JavaScript functions: Weglot JavaScript Functions

In the next lesson, we’ll see how you can redirect users by their browser language automatically.


Redirecting by User Language

Arrow icon
1. Getting Started
Welcome to Weglot
1. Getting Started
Understanding Word Count
2. Translation Management
Generating Translations
2. Translation Management
Excluding Translations
2. Translation Management
Editing Translations
2. Translation Management
Ordering Professional Translations
2. Translation Management
Import & Export Translations
3. Multilingual Design & Localization
Designing the Languages Switcher
3. Multilingual Design & Localization
Redirecting by User Language
3. Multilingual Design & Localization
Media Translation
Questions icon

Need help?

Reach out to our dedicated support team, we're here to assist you!

Contact us
Try for free