Skip Navigation
Home » WPML Documentation » Compatibility Documentation » How to Translate an Elementor Website with WPML » Adding the Elementor Language Switcher Widget to Your Multilingual Website

Adding the Elementor Language Switcher Widget to Your Multilingual Website

Kathy Banach
Updated
May 15, 2024

With Elementor and WPML, you can add the Language Switcher widget to any part of your multilingual website, from headers and footers to post and page designs.

WPML Language Switcher, an official Elementor language switcher widget, allows users to switch between different language versions of your website.

This Elementor language switcher gives you all the default WPML language switcher customization options, like displaying the flag and the native language name. Plus, you can take full advantage of Elementor’s styling options to customize the language switcher’s appearance to match your site’s designs.

Option 1: Add the WPML Language Switcher Widget to a Template

You can add the WPML Language Switcher widget to any template or template part you create with Elementor or Elementor Pro. For example, here’s how to add the WPML Language Switcher widget to your header template:

  1. Edit your header template using Elementor. Search for the WPML Language Switcher widget and then drag it over to add it to the header.
Dragging and dropping the WPML Language Switcher widget to the header
  1. Customize the language switcher in the Style tab. You can customize further by navigating to the Advanced tab.
Customizing the style of the WPML Language Switcher widget

When you’re done, Publish your changes. Make sure to translate the template or site part template for it to appear in your default language and translations. If you edited an existing template that’s already been translated, update the translation(s). 

This is how our header’s customized language switcher looks like on the default and secondary language pages on the front-end:

A Header template with the WPML Language Switcher widget in the default language
A translated Header template with the WPML Language Switcher widget

Option 2: Add the WPML Language Switcher Widget to a Post or Page

To add the WPML Language Switcher widget to your pages and posts:

  1. Edit a page or post using Elementor and add the WPML Language Switcher widget to your desired location
  2. Set the Language switcher type to Post Translations.
Setting the Language Switcher type to Post Translations
  1. Click Update to save your changes.
  2. Translate your page. If translations for the page already exist, update the translations.

Next, you need to translate the “This post is also available in” string of text that shows the available post translations. To do this:

  1. Go to WPML → String Translation and use the search bar to find the text you want to translate. Click Search.
  2. Click the plus icon under the flag(s) to input the translation for the string. Make sure to just translate the text and not the placeholder.
Translating the string from the WPML Language Switcher widget in String Translation
  1. Hit the Enter key to save the translation.

Now, take a look at your page with the customized language switcher on the front-end in your default and secondary languages.

A page with the WPML Language Switcher widget in the default language
A translated page with the WPML Language Switcher widget