Elementor is a page builder that allows users to control the styling and content of their site easily. This allows them to build any desired design with Elementor and translate the texts using WPML.

What you need

Essential Resources

Content

Getting Started

  • Set up WPML from WPML -> Languages. See our WPML Getting Started Guide for complete reference. The initial three-step setup is simple and self-explanatory. It asks you to choose your default language, a set of active languages, and a language selector.
  • First install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management). Then install the other WPML plugins that may depend on these core plugins.
  • Install Elementor and activate it.
  • A notification displays at the top of the WordPress dashboard that enables you to easily activate the WPML Translation Editor with a single click. Simply click the Enable it now button in this message window.
Using WPML to translate Elementor
Enable WPML Translation Editor

How to translate Elementor pages using WPML?

WPML presents new features that simplify further the process of translating pages created using Elementor. The following new features are added:

  • Preserving the existing translations when editing the default language page
  • Automatic Translation for internal links
  • Copy-once mode for custom fields

WPML lets you translate content in three convenient ways. You can produce the translation yourself, send content to your translators, or send jobs to a professional translation service without leaving your WordPress dashboard.

  Page in original content   Page translated to French
 Using WPML to translate Elementor Using WPML to translate Elementor

Scenario 1: Translate the content yourself

WPML’s Translation Editor is only accessible from the back-end of your site. Once you have created your page on the front-end with Elementor, click on the Save button. Then, click the Go to Dashboard button.

Using WPML to translate Elementor
Elementor’s “Go to Dashboard” button

Once your page is published, the plus button will be enabled, allowing you to translate your pages. You can find these plus buttons in the Language box when editing your page, or on the listing pages.

The plus located in the Language box when editing my page. The plus located under the flag in Pages -> All pages
 Using WPML to translate Elementor Using WPML to translate Elementor

Clicking one of the plus button takes you to WPML’s Translation Editor.

Using WPML to translate Elementor
WPML Translation Editor

Use it to translate all the content of your page. Note: do not forget to check the box to indicate when a translation is complete.

Using WPML to translate Elementor
Marking each translation as complete

Important note: in order to see the translation on the front-end, you need to get 100% Complete in the Translation Editor:

Using WPML to translate Elementor
The translation is 100% complete

Once the translation is complete, the plus button will change to a pencil button as shown in the following image.

Using WPML to translate Elementor
The pencil replacing the plus

Scenario 2: Send content for others to translate

WPML allows you to send your content to translators. Translators will only see text that requires translation without having to address how your site is built.

1. First, add a WordPress user as a translator to your site or choose a translation service.

2. Select the content you wish to send for translation. Go to the WPML Translation Management page and select the content to translate.

3. Click to add the items you selected to the Translation basket.

4. Finally, on the Translation basket tab, select the translators you desire.

The translators or translation service will receive a notification about your job. When the translation is complete, it will automatically appear on your site.

 Adding a new Element to the page and updating the translation

When you add a new Element to your page and you want to have it translated, follow the same steps as previously described: Save and click on the Go to dashboard button from the front-end builder.

Using WPML to translate Elementor
New Element added to the page

The plus button for this page is replaced by an arrow button, meaning that the translation requires an update.

The arrow replacing the pen

Click on this arrow to re-open WPML’s Translation Editor.

Using WPML to translate Elementor
WPML Translation Editor updated with the new Element

All previous translations appear. Only the new Element must be translated.

Using WPML to translate Elementor
Translation of the new Element

On the front-end, the French translation is also updated as shown on the images below.

 New Element in English   New Element translated in French
 Using WPML to translate Elementor

Using WPML to translate Elementor

Updating an existing Element and its translation

Sometimes, you must edit existing Elements in the original language.

Using WPML to translate Elementor
Editing an existing module

But what happens to your translation in this case? The translation is not lost.

Using WPML to translate Elementor
The existing translation is not lost

Simply translate the new content you just added.

Using WPML to translate Elementor
Adding the missing translation

 

The front-end is also updated with the French translation as shown in the table below.

Updated Element Updated translation
Using WPML to translate Elementor 

Using WPML to translate Elementor

Translating Elementor global widgets

Global widgets is an Elementor Pro feature. It gives you control over a specific widget that is displayed in different areas in your website. Updating the global widget content in one place, updates the rest.

Translation support for Elementor global widgets and templates is featured in:

  • WPML Multilingual CMS (4.0.5 or above)
  • WPML String Translation (2.8.5 or above)
  • WPML Translation Management (2.6.5 or above)

We have created a simple page using Elementor. The page includes a text editor widget and a call to action widget we set as a global module.

Simple Elementor page

To translate the global widget follow the steps below:

  1. To translate the page, click on the + icon found in the language meta box. This will open the translation editor page.
  2. Click on the + icon to translate the page
  3. Fill in the translated texts and select the Translation is complete check box for each field. Once you complete translating the texts, click the Save & Close button. You will notice that the texts of the global module are not displayed on the translation editor page.
  4. Add the translated text and save
  5. To translate the global widget texts navigate to Elementor -> My Templates. Click the + icon to translate the global widget in the desired language. This will take you to the Translation Editor page.
  6. Click on the + icon to translate the global widget
  7. Enter the translated texts and select the Translation is complete check box. Once you complete translating the texts, click the Save & Close button.
  8. Add the translated text to the global widget and save

    This is how a translated page that includes a global widget looks on the front-end:

    The translated page on the front end

Inserting a translated global widget to a page

You can insert the global widget into any page on your website without worrying about translating the texts of the global widgets that you already translated. Simply, click the + button to translate the page content. WPML takes care of displaying the translated version of the global module on the front-end.

If you insert a global widget into a page and UNLINK it, it will become a normal widget. Hence, when translating the page, you will see the global widget texts loaded into the Translation Editor page.

Inserting a global widget and unlinking it

Updating/Editing the content of a global widget

Editing global widget texts in the default language requires updating the translation of the global widget. We have updated the global widget text in the default language page.

Update the global widget text in the default language

To update the translation of the global widget, follow the steps below:

  1. Navigate to Elementor -> My Templates. Click the spinning arrows icon to update the translation. This will take you to the Translation Editor page.
  2. Click the spinning arrows icon to update the translation
  3. WPML preserves the translated text. Simply translate the new texts you added, tick the Translation is complete check box, and Save & Close.
  4. Translate the updated texts

Translating Elementor templates

Elementor allows you to create templates that can be inserted into any page on your website. Translating the templates is very similar to translating the global modules. Follow the steps below to translate a section, page, footer, single, archive templates:

  1. We have created a simple section template as an example by navigating to Elementor -> My Templates, create a section template and publish it.
  2. Simple section template
  3. Navigate to Elementor -> My Templates and click on the + icon to translate the section template for the desired language. This takes you to the Translation Editor page.
  4. Click on the + icon to translate the template
  5. Fill in the translated texts and select the Translation is complete check box for each field. Once you complete translating the texts, click the Save & Close button.
  6. Translate the section texts and save
  7. Insert the template to a page and click Publish. We have added a simple text module along with the inserted section template.
  8. Insert the global section into your page and publish
  9. In the backend page editor, click the + icon to translate the page into the desired language. This takes you to the Translation Editor page.
  10. Click on the + icon to translate the page that includes the inserted section template
  11. You will notice that the section template translated texts are preloaded into the translation fields. Add the translated texts for other elements on the page, tick the Translation is complete checkbox for each field and click Save & Close.
  12. Translate the other elements on the page and mark all as Translation is complete

    The translated page on the front-end:

    Translated page on the front-end

Translating header templates

    To translate the header template, follow the steps below:
  1. We have created a simple header template by inserting a pre-built header block and added a section that acts as a top bar.
  2. Simple header
  3. To translate the navigation menu texts, check out our detailed guide on translating menus.
  4. To translate other textual elements in the header template. In our example, it is the top bar text, navigate to Elementor -> My Templates and click on the + icon to translate the header under the desired language. This takes you to the Translation Editor page.
  5. Click on the + icon to translate the header template
  6. Fill in the translated texts and choose the Translation is complete check box for each field. Once you complete translating the texts, click the Save & Close button.
  7. Translate the header template texts and save

    This is the translated header on the front-end:

    The header template on the front-end

List of all translatable Elementor elements

Please see the following link on how to achieve it.
The following textual elements found in Elementor are currently supported by WPML:

  • 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
  • Posts (Here is a short video explaining how to translate this element.)

Getting help from our technical support

The WPML support team is trained on how to integrate Elementor page builder with WPML. If you run into any problems or need our advice, create a new ticket and our support team will be happy to assist you.

Ready to get started?

You can evaluate 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