Skip Navigation
Home » Documentation » Plugins Compatibility » How to Build Multilingual Sites with Elementor and WPML

How to Build Multilingual Sites with Elementor and WPML

Dario
Updated
February 13, 2023

Elementor is a page builder that allows you to control the styling and content of your site. Use Elementor with WPML and you can build any desired design and easily translate all your site’s content.

On This Page

Getting Started

Start by installing and activating the following plugins:

  • Elementor plugin, free or pro version
  • WPML core plugin and WPML String Translation add-on

If you’re new to WPML, check out our Getting Started Guide. It quickly walks you through all the translation options you can use.

One of these options is Translate Everything – the quickest way to translate and the easiest way to keep your content up to date. This feature automatically translates pages, posts, custom post types, custom fields, taxonomies, WooCommerce products, and more as you add and edit content.

Translating Elementor Pages With WPML

The Translate Everything mode automatically translates posts and pages built with Elementor. 

In the Translate Some mode, you can translate them like any other pages or posts. 

Page in original content

Using WPML to translate Elementor

Page translated to French

Using WPML to translate Elementor

Translating Buttons

If you add an Elementor Button widget to your page, you can translate the button text in the Advanced Translation Editor with the rest of your page content. However, you may not see the URL available for translation. This depends on where your link points to: 

  • External links appear in the Advanced Translation Editor for translation.
  • Internal links are not available for translation. If a translation for the linked page exists, WPML automatically adjusts the link to point to the right language.

Translating Elementor Global Widgets

Global Widgets are an Elementor Pro feature. It gives you centralized control over a widget that is displayed in different areas on your website. Updating the global widget content in one place updates it everywhere.

If Translate Everything is active, global widgets will be translated automatically. If Translate Some is active, follow the steps below to translate them.

We have created a simple page using Elementor, added a call-to-action button widget, and saved it as a global widget.

Saving an element as a Global Widget

Use the following steps:

  1. To translate the global widget’s texts so that all desired languages are available when you reuse the widget, navigate to Templates → Saved Templates and click the Global Widget tab.
  2. Click the plus icon under the language and next to the template that you want to translate.
Translating the global widget from the Elementor Templates menu
  1. You’re taken to the Advanced Translation Editor page where a pop-up asks if you want to translate content automatically or do it yourself. Clicking yes completes your translations in a matter of moments.
  2. After you’ve checked and saved the translations, click Complete.
WPML’s Advanced Translation Editor

If you update the content of a global widget in the future, you can update the translations following the same steps.

Inserting a Translated Global Widget Into a Page

Once your global widget is translated, you can insert it into any page on your website. Simply translate the page you added it to, and WPML takes care of displaying the translated version of the global widget on the front-end.

A translated page and global widget on the front-end

If you insert a global widget into a page and UNLINK it, it becomes a normal widget. To translate a normal widget, translate the page it appears on, and the widget text will be included in the Advanced Translation Editor.

Inserting a global widget and unlinking it

Translating Elementor Templates

Elementor allows you to create templates that can be inserted into any page on your website.

To translate a section, page, footer, single, or archive template first make sure to publish it. Then, follow these steps:

  1. Go to WPML → Translation Management, select Template in the first dropdown, and click the Filter button. The list updates and shows all your Elementor templates.
  2. Select the templates you want to translate.
  3. Select the translation action for every language (translate, duplicate, do nothing).
  4. Click Translate selected content. Please note that if you are not the only translator in the site, this button is labeled Add selected content to translation basket.
Sending an Elementor template for translation using WPML Translation Management

If you’re using Translate Everything, your templates will be translated in a minute.

If you’re translating yourself or using other translators, go to the Translation Basket tab, select who should translate the template, and click to send items for translation.

The following image displays how our example translated page looks on the front-end.

A translated Elementor template on the front-end

Check out our dedicated page to learn more about using translation management to send content for translation.

Creating Different Elementor Templates Per Language

You can use WPML with the Elementor Theme Builder to create separate templates for each of your site’s languages. To show you how to do this, we’ll create different Single Post templates per language:

  1. Go to Templates → Theme Builder and create a template for your site’s default language.
  2. Publish the template. In the Display Conditions popup, determine how to display the template across your site. In this example, we want to use the template for all default language posts. So, we set the display conditions to include all posts.
Setting the display conditions for the default language template
  1. Go back to your site’s dashboard and use the language switcher in the top admin bar to switch to your site’s secondary language.
Switching to the site’s secondary language
  1. Once again, go to Templates → Theme Builder screen, click on Add New, and create a template for your site’s secondary language.
  2. Publish the template and do not set any Display Conditions. Then, exit the Theme Builder.
  3. In the top admin bar, use the language switcher to switch back to your site’s default language. Then, click on Templates.
  4. This will take you to a table view of all of your templates. Edit the template you created for your site’s default language.
  5. Locate the Language box in the right sidebar and click on Connect with translations. In the pop-up that appears, input the name of your secondary language template.
Choosing the secondary language template to assign
  1. A new popup asking you to confirm the action appears. Click on the Assign button.
Assigning the secondary language template to the default language template

Creating Different Elementor Templates for Specific Posts and Pages in Secondary Languages

Elementor’s Display Conditions allow you to determine where you want to display the templates you create. You can use this option to create different templates and assign them to specific posts or pages in your site’s secondary languages.

To do this: 

  1. Using the language switcher in your top admin bar, switch to your site’s secondary language.
Switching to your site’s secondary language
  1. Navigate to Templates → Add new and create a new template.
  2. Once you build the template, hit the Publish button. You’ll see a popup asking you to set the conditions.
  3. Click on the Add Condition button and select whether you want to display the template across Posts or Pages. A third dropdown appears. Type in the title of the post or page in the secondary language you want to use the template on. 
Setting the conditions to display the template on specific posts in the secondary language

If you want to display the template on more than one post or page in your site’s secondary language, add another condition. 

WPML Language Switcher Widget

With the WPML Language Switcher widget, you get all the default WPML language switcher customization options such as displaying the flag and the native language name. On top of that, you can style the language switcher using Elementor’s styling options. For example, you can change the typography and text or control the margins and padding.

You can add the WPML Language Switcher widget anywhere on your website. This includes the header, footer, posts, and pages.

For example, to add the WPML language switcher to a header template:

  1. Go to WPML → Languages and enable the custom switcher in the Custom language switchers section. Click the Customize button and set the options you need.
  2. Edit the header using Elementor. Search for the WPML Language Switcher widget and then drag it over to add it to the header.
Adding WPML language switcher widget to header
  1. Customize the language switcher in the Style tab. You can customize further by navigating to the Advanced tab.
WPML language switcher widget styling options

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

The header language switcher on the front-end

If you want to add the language switcher to a footer template, simply set the Language switcher type to Footer.

You can also place the language switcher in your pages and posts:

  1. Edit a page or a 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

This is how our customized language switcher looks on the front-end:

WPML language switcher in a post or page

List of All Translatable Elementor Elements

If you are using a custom Elementor widget, you need to add WPML support for it.

WPML currently supports the following Elementor widgets:

  • Heading
  • Text Editor
  • Video
  • Button
  • Icon
  • Price List
  • Price Table
  • Flip Box
  • Slides
  • Image Box
  • Icon Box
  • Icon List
  • Counter
  • Progress Bar
  • Testimonial
  • Tabs
  • Accordion
  • Toggle
  • Alert
  • HTML
  • Form

WPML-Ready Elementor Add-Ons

The process of translating custom Elementor elements provided by third-party plugins is similar to translating the default Elementor elements. You can find a list of recommended WPML-Ready Elementor Addons in our Recommended Plugins Directory.

We also recommend checking out our article about best Elementor addons for multilingual sites.

Getting Help From Our Technical Support

In case you need help translating your site built using Elementor and WPML, visit WPML’s support forum.

Ready To Get Started?

You can try WPML for 30 days and see how you like it. If you are not happy with it, we will refund your money without any questions within the 30-day trial period.

Buy and Download