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
May 2, 2022

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

If you have not enabled Translate Everything to automatically translate your posts and pages built with Elementor, you can translate them the same as you would regular WordPress pages and posts. See our documentation for more on how to translate pages, posts, and custom post types.

Page in original content

Using WPML to translate Elementor

Page translated to French

Using WPML to translate Elementor

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.

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.

Known Issues

WPML works fine with this plugin, but sometimes there could be minor issues we're working on. This is expected as both plugins provide frequent updates.

Current unresolved issues:

You can also search all known issues including previously resolved issues for this plugin.

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