How to Build Multilingual Sites with Elementor and WPML

With the page builder Elementor, you have complete control over the look and content of your website. You may create any desired design and quickly translate all the information on your site using Elementor and WPML.

Take a look at our Getting Started Guide if you’re new to WPML. It promptly guides you through each available translation choice.

The quickest method of translation and the simplest approach to keep your information current is one of these options: Translate Everything.

As you create and change content, this functionality automatically translates pages, posts, custom post types, custom fields, taxonomies, WooCommerce items, and more.

I have build a coupon page with Elementor which you can read in our detailed Elementor Pro review.

Translating Elementor Pages With WPML

You are able to translate posts and pages made using Elementor in the same way that you would translate standard WordPress pages and posts if you have not enabled Translate Everything to automatically translate these types of content. You may find further information on translating pages, posts, and custom post kinds in our documentation.

Elementor Pro comes with a feature called Global Widgets. It grants you centralized management over a widget that may be shown in a variety of locations across your website. The content of the global widget just has to be updated in one location for it to be updated everywhere else.

Using Elementor

When the Translate Everything option is turned on, the translation of global widgets will take place automatically. If the option to Translate Some is selected, the methods following can be used to translate them.

Using Elementor, we have crafted a basic page, included a widget containing a call-to-action button, and then saved the widget as a global widget.

You may translate the texts of the global widget so that when you reuse the widget, you have access to all of the appropriate languages. To do this, visit to Templates > Saved Templates and click on the tab labeled Global Widget.

To begin translating a template, choose the language you wish to use and then click the + sign that appears next to it.

You are then transported to the page for the Advanced Translation Editor, where you will see a pop-up asking if you want the text to be automatically translated or if you want to do it manually. If you select yes from the menu, your translations will be finished in a few short seconds.

Click the Complete button once you have ensured that the translations are accurate and have saved them.

You will be able to change the translations by following the same processes in the event that you decide to modify the content of a global widget in the future.

Inserting a Translated Global Widget Into a Page

After your global widget has been localized into the appropriate language, you will be able to include it into any page of your website. Simply translate the page on which you placed the global widget, and WPML will take care of displaying the translated version of the widget on the front end of your site.

When a global widget is added to a page and then UNLINKed, the global widget transforms into a regular widget. Simply translate the page that the widget appears on, and the text of the widget will be included in the Advanced Translation Editor. This is the only way to translate a standard widget.

Translating Elementor Templates

With Elementor, you can make templates that can be used on every page of your website and insert them with a single click.

Before you may translate a template for a section, page, footer, single, or archive, you must first ensure that it has been published. Then, proceed with the following steps:

Navigate to WPML > Translation Management, make your selection in the first dropdown to be Template, and then click the Filter button. The list refreshes to display all of the Elementor templates you have available.

Choose the templates that you would like to have translated.

Choose the action of translation for each and every language (translate, duplicate, do nothing).

Simply click the Translate chosen content button. Please take note that the label on this button changes depending on whether or not you are the sole translator working on this website. Put the selected material in the basket to be translated.

If you are making use of Translate Everything, the translation of your templates will take no more than one minute.

Go to the Translation Basket tab, choose the translator(s) who should translate the template, and then click to send things for translation, regardless of whether you will be doing the translating yourself or will be employing other translators.

The front-end presentation of our sample page that has been translated is shown in the image that follows.

WPML Language Switcher Widget

You will have access to all of the usual WPML language switcher customisation options when you use the WPML Language Switcher widget. These options include showing the flag and the name of the native language.

In addition to that, you can customize the appearance of the language switcher by utilizing. The many stylistic choices provided by Elementor. For instance, you have the ability to alter the typeface and the tex. As well as manage the margins and the padding.

You have complete control over where on your site the WPML Language Switcher widget is displayed. This encompasses the header, the footer, as well as the articles and pages.

To illustrate, the following steps must be taken in order to integrate the WPML language selector into a header template:

Navigate to WPML

Navigate to WPML > Languages, then look for the area labeled Custom language switchers and enable the custom switcher there. Simply select the desired features by clicking the “Customize” button, then save your changes.

Use Elementor to make changes to the header. Find the WPML Language Switcher widget, then locate. It on the page and drag it to the position you want it in the header.

Modify the language switcher using the Style tab’s available options. You have further personalization options available to you if you go to the Advanced page.

This is how our individualized language selector appears in the header. When viewed from the front-end and we have made similar design for Bloggervoice.

In addition, you can embed the language selector in your webpages and posts like follows:

Use Elementor to make changes to a page or post. And then insert the WPML Language Switcher widget anywhere you want it to appear.

Choose the Post Translations option for the Language Switcher type.

The front-end presentation of our customized language switcher looks like this.

WPML-Ready Elementor Add-Ons

The steps required to translate bespoke Elementor components. That are given by third-party plugins are quite similar to the steps required to translate the standard Elementor elements.

Within our Recommended Plugins Directory, you will discover a selection of add-ons that are recommended for Elementor that are WPML-Ready.

Show More
Back to top button