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.
- WPML Multilingual CMS package which includes WPML Translation Management and WPML String Translation add-ons
- Elementor plugin, free or pro version
- WPML’s Getting Started Guide helps you set up WPML in a few minutes.
- Later, you can refer to some of its subtopics, such as Theme and Plugin Localization and String Translation. We recommend that you keep this guide open while following this tutorial.
- Elementor Documentation provides you with all information needed to set up Elementor’s different features.
- Getting Started
- WPML translation tools
- Translating Elementor pages with WPML
- Adding a new Element to the page and updating the translation
- Updating an existing Element and its translation
- Translating Elementor global widgets
- Translating Elementor templates
- WPML Language Switcher widget
- List of the translatable Elementor Elements
- WPML-Ready Elementor add-ons
- Get help from our support
- Get WPML
- 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.
WPML offers two translation editors you can use for translating your site’s content:
- WPML classic translation editor (CTE).
- WPML advanced translation editor (ATE) offers automatic translation, a glossary, spell checker, and more! The automatic machine translation service starts at $4.98/month for 5,000 words and provides enough word quota for most sites.
Besides translating your site content yourself, you can also:
- Send your content for translation to a professional translation service.
- Create your own team of local translators from the Translation Roles tab in Translation Management and assign translation jobs to them.
WPML presents new features that further simplify the process of translating pages created using Elementor:
- 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|
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.
Once you publish a page, you can see the plus button, 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|
Clicking one of the plus buttons takes you to WPML’s Translation Editor. Use it to translate all the content of your page. Do not forget to check the box to indicate when a translation is complete. In order to see the translation on the front-end, you need to get 100% Complete in the Translation Editor:
Once the translation is complete, the plus button will change to a pencil button as shown in the following image.
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.
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.
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.
The plus button for this page is replaced by an arrow button, meaning that the translation requires an update.
Click on this arrow to re-open WPML’s Translation Editor. All previous translations appear. Only the new Element must be translated.
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|
Sometimes, you must edit existing Elements in the original language.
But what happens to your translation in this case? The translation is not lost. Simply translate the new content you just added.
The front-end is also updated with the French translation as shown in the table below.
|Updated Element||Updated translation|
Global widgets is an Elementor Pro feature. It gives you control over a specific widget that is displayed in different areas on 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.
To translate the global widget follow the steps below:
- To translate the page, click on the plus icon found in the language meta box. This will open the translation editor page.
- Fill in the translated texts and mark them as completed. Once you complete translating the texts save them. You will notice that the texts of the global module are not displayed on the translation editor page.
- To translate the global widget texts navigate to Elementor → My Templates. Click the plus icon to translate the global widget in the desired language. This will take you to the Translation Editor page.
- Enter the translated texts and mark them as completed. Once you complete translating the texts save them.
This is how a translated page that includes a global widget looks on the front-end:
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 plus 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.
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.
To update the translation of the global widget Navigate to Elementor → My Templates. Click the spinning arrows icon to update the translation. This will take you to the Translation Editor page.
WPML preserves the translated text. Simply translate the new texts you added and mark them as completed. Once you complete translating the texts save them.
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, and archive templates:
- For example, you can create a simple section template by navigating to Templates → Add New. There, create a section template and publish it.
- Navigate to Templates→ Saved Templates and click on the plus icon to translate the section template to a desired language. This takes you to the Translation Editor page.
- Fill in the translated texts and once you complete translating the texts save changes.
- Insert the template to a page and click Publish. In our example, we added a simple text module along with the inserted section template.
- In the backend page editor, click the plus icon to translate the page into the desired language. This takes you to the Translation Editor page.
- You will notice that the translated texts in the section template are preloaded into the translation fields. Add the translated texts for other elements on the page and save changes.
The following image displays how our example translated page looks like on the front-end.
- To translate the header template, use the following steps:
- Create a simple header template by inserting a pre-built header block and add a section that acts as a top bar.
- To translate the navigation menu texts, check out our detailed guide on translating menus.
- You can also translate other textual elements in the header template. In our example, it is the top bar text. Navigate to Templates → Theme Builder and click on the plus icon to translate the header under the desired language. This takes you to the Translation Editor page.
- Fill in the translated texts and once you complete translating the texts save changes.
This is the translated header on the front-end:
With the WPML Language Switcher widget, you get all the default WPML language switcher customization options. For example, you can control 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, change the typography and text or also control the margins and padding.
You can add the WPML Language Switcher widget to any place on your website. This includes the header, footer, posts, and pages.
Let’s see how to add the WPML language switcher widget to a header template.
- Edit the header using Elementor and search for the WPML Language Switcher widget then add it to the header.
- The default Language switcher type is Custom. To control the list style navigate to WPML → Languages. Under the Custom language switchers section, click the Customize button. You can set the language switcher style to Dropdown, Dropdown click, Horizontal list, or Vertical list. We will choose the horizontal list option and click Save.
- Let’s go back to the header editing screen and disable the Native language name option. Of course, you can choose the options that fit your design needs.
- Navigate to the Style tab and choose your preferred Typography, Text Color, and Background Color. Additionally, you can customize the language switcher further by navigating to the Advanced tab.
This is how our header’s customized language switcher looks like on the front-end:
You can also place the language switcher in your pages and posts. Use the following steps:
- Edit a page or a post using Elementor and add the WPML Language Switcher widget to your desired location
- Set the Language switcher type to Post Translations.
- Customize the language switcher to fit your design.
This is how our customized language switcher looks like on the front-end:
WPML currently supports the following textual elements found in Elementor:
- Text Editor
- Price List
- Price Table
- Flip Box
- Image Box
- Icon Box
- Icon List
- Progress Bar
- Posts (Here is a short video explaining how to translate this element.)
The process of translating custom Elementor elements provided by third-party plugins is similar to translating the default Elementor elements. Here is the list of the WPML-Ready Elementor add-ons:
In case you need help translating your site built using Elementor and WPML, visit WPML’s support forum.
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.