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
- Translatable Elementor Widgets
- Translating Elementor Pages With WPML
- Adding an Elementor Language Switcher with WPML
- Translating Buttons
- Translating Elementor Global Widgets
- Translating Elementor Templates
- Creating Different Elementor Templates Per Language
- Creating Different Elementor Templates for Specific Posts and Pages in Secondary Languages
- Translating Menus with Custom Links or Navigation Labels
- WPML-Ready Elementor Add-Ons
- Known Issues With Elementor
- Get Help From Our Support
- Get WPML
Install and activate the following plugins:
- Elementor plugin, free or pro version
- WPML core plugin and WPML String Translation add-on
Don’t have a WPML Multilingual CMS or Agency account? See our page about translating Elementor sites with the WPML Multilingual Blog account.
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.
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.
WPML allows you to translate over 20 built-in Elementor widgets, ensuring every element of your site is multilingual. Using WPML you can translate:
- Text Editor
- Price List
- Price Table
- Flip Box
- Image Box
- Icon Box
- Icon List
- Progress Bar
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:
- 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.
- 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.
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
Page translated to French
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:
- 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.
- Edit the header using Elementor. Search for the WPML Language Switcher widget and then drag it over to add it to the header.
- Customize the language switcher in the Style tab. You can customize further by navigating to the Advanced tab.
This is how our header’s customized language switcher looks like 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:
- Edit a page or post using Elementor and add the WPML Language Switcher widget to your desired location
- Set the Language switcher type to Post Translations.
This is how our customized language switcher looks on the front-end:
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.
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.
Use the following steps:
- 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.
- Click the plus icon under the language and next to the template that you want to translate.
- 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.
- Once you’re done, click Complete.
If you update the content of a global widget in the future, you can update the translations following the same steps.
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.
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.
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:
- 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.
- Select the templates you want to translate.
- Select the option to Translate your template(s).
- 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.
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.
Check out our dedicated page to learn more about using translation management to send content for translation.
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:
- Go to Templates → Theme Builder and create a template for your site’s default language.
- 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.
- 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.
- Once again, go to Templates → Theme Builder screen, click on Add New, and create a template for your site’s secondary language.
- Publish the template and do not set any Display Conditions. Then, exit the Theme Builder.
- In the top admin bar, use the language switcher to switch back to your site’s default language. Then, click on Templates.
- This will take you to a table view of all of your templates. Edit the template you created for your site’s default language.
- 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.
- A new popup asking you to confirm the action appears. Click on the Assign button.
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:
- Using the language switcher in your top admin bar, switch to your site’s secondary language.
- Navigate to Templates → Add new and create a new template.
- Once you build the template, hit the Publish button. You’ll see a popup asking you to set the conditions.
- 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.
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.
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.
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:
- Elementor Pro – Inline CSS not rendered for translated pop-ups
- Elementor – Slideshow Background Images added in Sections Not Appearing Translated
- Elementor – Social Icons widget: Links and Attributes translation issues
- Elementor Pro – Global Form Widget: Custom Messages are not translated
- Elementor – Custom Fonts Cause CORS Policy Issue With Different Domains Per Language
- Divi or Elementor – Product Category Archive Template Not Applied to Translated Category Archive
- Elementor Pro – Merchandise Shop kit library: WooCommerce Pages created with Elementor are not translated with Translate Everything
- Elementor Pro – Merchandise Shop kit library: Automatically translate Elementor Templates in bulk gets “stuck”.
- Elementor Pro – Merchandise Shop kit library: Empty cart notice for Mini-Cart is not translated
- Elementor Pro – Custom Thank You Page Not Displaying in Second Language when WooCommerce Endpoint “order-received” is Translated
- Elementor – It’s not possible to fully customize the language switcher widget
You can also search all known issues including previously resolved issues for this plugin.
In case you need help translating your site built using Elementor and WPML, visit WPML’s support forum.
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.