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

How to Build Multilingual Sites with Elementor and WPML

Dario
Updated
October 4, 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.

Creating a multilingual website can grow your business and boost organic traffic without breaking the bank. But adding new languages to your site might feel overwhelming – especially if you don’t speak these languages.

With WPML and Elementor, you can easily translate your entire website automatically, saving you hours of work and translation costs. WPML also automates various technical tasks, like managing your language versions and automatically translating new content. 

In this guide, we’ll explain how you can translate your website using Elementor and WPML, as well as how you can add an Elementor language switcher to let visitors change languages.

On This Page:

Getting Started

Requirements

Install and activate the following plugins:

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

Multilingual Blog Accounts

Don’t have a WPML Multilingual CMS or Agency account? See our page about translating Elementor sites with the WPML Multilingual Blog account.

Different Domains per Language

Make sure you have the auto sign-in and sign-out feature enabled if you’re using different domains per language. This lets you switch between domains to edit content without getting logged out.

New to WPML?

Read our Getting Started Guide to learn how you can quickly translate your entire website automatically.

Using WPML’s Translate Everything Automatically feature, you can automatically translate pages, posts, custom post types, custom fields, taxonomies, WooCommerce products, and more as you add and edit content.

Translatable Elementor Widgets

WPML allows you to translate over 20 built-in Elementor widgets, ensuring every element of your site is multilingual. Using WPML you can translate:

  • 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

Can’t Translate Your Custom Elementor Widget?

Some themes and plugins add their own custom Elementor widgets. If you can’t translate a custom Elementor widget, it’s probably coming from a theme or plugin that isn’t compatible with WPML.

Here’s what you can do:

  1. Contact the theme or plugin author – Tell them about the issue and share WPML’s guide to registering page builder widgets for translation. With a few easy configuration steps, the author can make their widgets work seamlessly with WPML.
  2. Ask our Support team for help – While you wait for the author to respond, open a ticket in our Support forum. Our team will try their best to assist you. In some cases, we may be able to provide a custom configuration file to make the widget translatable. If we can’t provide a quick solution, we’ll contact the theme or plugin author ourselves to speed things up.

Translating Elementor Pages With WPML

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

In the Translate What You Choose 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

Adding an Elementor Language Switcher with WPML

You can add an Elementor language switcher to your site by inserting the WPML Language Switcher widget. 

Using the Elementor page builder, you can place the language switcher anywhere on your site. This includes the header, footer, posts, and pages.

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.

To add the WPML Language Switcher widget to your 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.

To add the WPML Language Switcher in 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

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

WPML language switcher in a post or page

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 Automatically is active, global widgets will be translated automatically. If Translate What You Choose 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. If you have translation credits, your content is immediately translated automatically for you. You can review and accept the automatic translations, or click the Undo translation button to clear the automatic translations and input your own.
  2. Once you’re done, click Complete.
Translating content in the 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 option to Translate your template(s).
  4. Select whether you want to translate your template automatically or by yourself. If you choose to translate by yourself, click Add to Translation Queue. Please note that if you are not the only translator on the site, this button is labeled Add to Translation Basket.
Sending an Elementor template for translation using WPML Translation Management

If you choose the Translate automatically option, your templates will be translated in a minute. You’ll see the automatic translation status appear at the top of the Translation Management page.

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 offers different ways to translate WordPress menus. However, translating menus that include custom links or navigation labels requires a specific workflow.

For every Custom Link that you add to your WordPress menu, you can input the URL you want to direct visitors to and create a custom label. You can translate both the URL and label of your custom link manually or by using the WPML menus sync feature. To learn more about both options, see our guide to translating custom links. 

From the Appearance → Menu page, WordPress also lets you change the way items appear in your menu. You can do this by editing the Navigation Label for each item you add to your menu, such as posts, pages, custom post types, and categories. In this case, you need to translate your custom navigation label manually. 

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