multilingual-website-with-elementor

How To Build A Multilingual Website With Elementor And WPML

Managing an EIementor site is very easy in every aspect. From publishing content to optimizing a site for security everything requires only a few clicks to perform. Also, Elementor enables you to build a multilingual website with ease by translating the content into more than one language.

If your target audience consists of speakers of different languages, it’s better to introduce your products or services to them in their local language. It helps you expand your reach and make an effective connection with your target audience.

You can use any popular and useful WordPress translation plugin to convert your Elementor site into a multilingual website.

In this blog, we’ll show you how to turn your site into a multilingual website step-by-step. Let’s first explain to you-

Why You Should Turn Your Site Into A Multilingual Website

multilingual-website

To convert your website into multilingual means to make your sites available in more than one language.

In addition, you can translate your whole website or some important portion of your site into local languages. As a result, you have a great possibility to get traffic.

Sri Sharma, Net Media Planet’s Managing Director, stated that on average their clients witnessed a 20% increase in conversion when landing pages translated in the local language

Therefore, you can’t drop the idea of investing to make your site multilingual unless your target audience belongs to only one locality.

Today, with technological advances the borderline has diminished and business becomes globalized. With the flow of globalization, people turn to online shopping.

In 2021, over 2.14 billion people worldwide are expected to buy goods and services online.Moreover, it is vert high up from 1.66 billion global digital buyers in 2016. – Statista

In addition, language plays a vital role for the consumers making the final decision of purchase.

Furthermore, not only for eCommerce sites but also it is true for other websites like entertainment, educational, personal, or nonprofit sites.

Therefore, the businesses that maintain great website translations will be able to win the trust of their audience and reap the benefits. Above all, optimized website translation helps to increase the rank on the Search Engine Result Page.

Benefits of Multilingual Website

Concisely, a multilingual website is beneficial due to:

  • Cost-effective and reliable marketing strategy
  • Reach more audiences from different localities
  • Boost traffic to your site
  • Amplify the conversion rate
  • Improve your multilingual SEO
  • Increase the trust and brand value

So, it is the right time to get more traffic to your site and boost your profit margin drastically by making your site multilingual.

Therefore, to keep the high demand for multilingual websites in mind a wide range of addons has been introduced. It can translate the sites built with Elementor into a multilingual site easily. Such as-

  • WPML– The Best WordPress Multilingual Plugin
  • Polylang– Free WordPress language plugin
  • Weglot– Automated WooCommerce Multilingual Site Builder

Today I will show you how to create a multilingual website built with Elementor easily.

Are you new to Elementor? With Elementor Page Builder you can develop your site as per your desire without knowing any code.

Read the ultimate guide on how to build a WordPress site with Elementor to get your site ready by yourself.

Tools and Resources You Need to Build a Multilingual Website

To build a multilingual website in WordPress build with Elementor you will need the following-

  1. WPML Multilingual CMS package which includes WPML Translation Management and WPML String Translation add-ons
  2. Elementor plugin, free or paid version
  3. Quick Installation guide of WPML for easy setup
  4. Elementor documentation to get all the information regarding setting up different features or WPML documentation to learn more about translating your site.

How to Configure WPML for Multilingual Website

You need to install and activate the following plugins to your website for translating the web page into different languages.

If necessary, you check this guide to know how to install a WordPress plugin the right way.

After successfully installing & activating the plugins on your site, you have to configure the WPML on your website.

Let’s do it.

First go to the Dashboard->WPML->Setup section. Here, you’ll get an interface like the following image.

Set  Website Language

Here, you need to set your website’s Default language and Translation Language.

You see that we’ve defined our Translation Language ‘Spanish‘. You can set your one.

Select Language

You can set your translated website page’s URL format from the URL Format area like the following example.

  • www.example.com/es/
  • www.example.com/fr/

In the Register WPML area, you add the Site Key provided by WPML.

Register WPML

Just the paste key into the Site Key area and click on the Continue button. Now you’ll get auto plugin updates.

Add Site Key

Go to the following tab to select your website translation option. Here, you get two options. You can select the Translate Everything option if you want WPML to automatically translate the contents of your site using machine translation.

Set Translation

Otherwise, you can choose the Translate Some option if you want to use WPML’s native translation editor to manually input your own translations or use automatic translation at a later stage.

Manage Translation

There are some plugins that WPML recommends for adding more features. If you need, you can install and activate the recommended plugins.

Install & Active supporting plugins

Manage WPML Settings

After finishing the WPML Setup, you need to set the essential settings. To do this, you should go to the WPML->Settings area.

You can follow the below image to set your WPML setting like us.

Manage WPML Settings

Congratulation you have successfully configured the WPML plugin on your website. Let’s focus on the following part.

How to Translate Elementor Pages Using WPML

New WPML makes the translation process simpler for those pages built with Elementor.

Moreover, you can translate the pages or products in two different ways.

  1. Translate the content by yourself
  2. Install the Translation Management Add-on to translate your content

Therefore, you can choose the right option best fir for you.

Translate Contents by Yourself

You can access the WPML’s translation editor only from the back end of your site. After designing the page by Elementor, save it and click the Go to Dashboard button.

elementor-page-builder
Elementors “Go To Dashboard” button

After publishing the page, the plus button will be activated and you can translate the page. You will get these plus buttons in the language box while editing your page or on the listing pages.

appearance-of-plus-button-multilingual-website
Appearance of “Plus” button

Once you click on the plus button, it will take you to WPML’s Translation Editor. Translate all the content of your page by using the translate editor of WPML.

So, be aware of checking the box after completion of the translation. You can see the complete translation on the front end, after 100% completion of the translation in the editor.

When the translation is complete, the plus button will turn into a symbol of a pencil.

pencil-button-multilingual-website
Plus button turns into “Pencil” button

Send Request to Translator for Translation

Firstly, you can send the content of your site to a translator or translation service from the WPML by adding a new add-on Translation Management.

The translator will only see the specific part of the contents you would specify for translation without knowing any other details of the site.

Moreover, it allows you to translate content developed with the new WordPress Block Editor Gutenberg.

  • Add a WP user as a translator or select a translation service
  • Select any content, you wish to translate. Navigate to the WPML translation management page and select the content needed to translate.
  • Add the selected items to the translation basket.
  • Lastly, on the translation basket tab, select your desired translators.
WPML-translation-management
Translation Management add-on to translate the content

The output will appear automatically on your site when the translation will be done.

After that, the translator or translating service will get a notification about your assigned task from WPML.

Click here to see the detailed process of using Translation Management.

Add New Content to the Page and Update Translation

Now if you need to add a new element to your page and translate it, then simply follow the same mentioned steps above: Go to your front-end builder and add a new element, Save and Click Go To Dashboard button.

add-new-elementor-on-page
Add New Element on Page

Here, you will find a spinning arrow button instead of a plus. This indicates the translation needs an update.

spinning-arrows-button
Spinning Arrows Button

Click on the spinning arrows and re-open the translation editor. You will see all the previous translations. You have to translate the new contents only.

translate-content
Translate new content from English to French

Update an Existing Content and Its Translation

Often you may need to edit the original language of the existing page or post.

update-content-and-translation
Update existing content and its translation

If you update anything, the existing translation is not lost. The updated text will be simply translated.

So that you can build your WooCommerce marketplace easily with Elementor without being a technical gig. Lastly, to grab international clients from all over the world you must turn your site multilingual.

Get the Complete Guide for your WooCommerce Multilingual Marketplace here.

Elementor Global Widget Translation

Global Widget is a premium feature of Elementor. It allows you to control a particular widget displayed in a different part of a website.

Also whenever you update the Global Widget content in one place, it will update the rest automatically.

Translation supports the templates and global widgets for the following versions-

  1. WPML Multilingual CMS (4.0.5 or above)
  2. WPML String Translation (2.8.5 or above)
  3. Translation Management of WPML (2.6.5 or above)

We have designed a simple page using Elementor like the picture. This page contains a text editor widget and a call to action widget which we set as a global module.

multilingual-website

Follow the below steps to translate the Global widgets:

  1. For translating the page click the Plus icon that appeared in the Language Meta Box. It will open the translation editor.
multilingual-website-plus-button
Click on the “Plus Button” to translate the page

2. Fill in the translated texts and mark them as completed. Save it when the translation is completed. You will find that the text of the Global Module has not appeared on the translation editor page.

3. If you intend to translate the Global Widget Text then go to Elementor -> My Templates. Click the plus icon and select the desired language to translate the Global Widget. It will take you to the Translation Editor page.

multilingual-website-global-widget
Hit the “Plus Button” to translate the Global Widget

4. Insert the translated text and mark them as completed. When you have done translating the text simply save them.

The below image shows how a Global Widget looks on the front end.

multilingual-website-global-widget-frontend

Add Translated Global Widget to a Page

You can simply insert the already translated Global Widget into any page without translating the text as it will be updated automatically.

You can translate any page content by simply clicking on the Plus Button. WPML for WordPress takes the responsibility to display the translated version at the front end.

Unlink turns a global widget into a normal widget on the webpage. Now, during translating, you will find the global widget on the translator editors’ page.

unlink-global-widget
Insert a global widget and unlink it

Edit or Update the Global Widget Content

If you edit or update the Global Widget Content from the original, you have to update the translation page.

update-global-widget-content
Update Global Widget Content

Updating the translation is simple. To update the translation of Global Widget navigate to Elementor-> My Template. 

Click on the spinning arrows icon to update the translation. It will bring you to the Translation Editor page.

update-traslation
Click spinning arrows to update the translation

Translating Elementor Template for Multilingual Website

You can create a template-using Elementor, which can be easily added to any page of your website. The Elementor WordPress template translation is almost the same as the Global Widget translation. 

Follow the below-mentioned steps to translate a section, page, footer, single, and archive templates.

  1. You can create a simple block template by navigating Templates-> Add New. Create a simple template and publish it.
elementor-built-template
Simple Template Built With Elementor

2. Go to the saved template and click the plus button to translate the section template into the desired language. It will bring you to the translator editor page.

saved-template-translation

3. Fill in the translated texts and once you have translated the texts save changes.

4. Insert the updated template to a webpage and click on the Publish button.

insert-updated-template
Insert updated template

5. In the back end Page Editor, click on the plus icon to translate the content into the desired language, it sends you to the Translation Editor page.

translation-editor-page

6. You will find the translated text in the section template is pre-loaded into the translation fields. Finally, add the updated text for other elements on the page, and don’t forget to save them.

The following image shows how a translated page looks like on the front end.

translated-page-view
Translated page frontend view

Translatable Elementor Items in Multilingual Website

WPML generally supports the following textual items in Elementor-

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

How To Add WPML Support For Elementor Pages Using Happy Addons

Happy Addons is fully (both free and pro) compatible with WPML. So you have the flexibility to translate into the WPML-supported languages of the sections made with Happy Addons on your website.

Let’s see how can you make your page multilingual using the Happy Addons.

We’ve already created a page for the demonstration.

First, you need to go to the Pages->All Pages area for translating the pages.

Our Page

Next, select a page and click on the (+) icon to add the language.

Go to the Pages area

You are able to select multiple pages for translating as well as set translation language.

Select multiple pages for translating

Now it’s time to activate the translation.

To do this, you need to edit the page first and then define the translation language.

Add Translation Language

How To Translate Strings With WPML String Translation?

The theme or plugin you have on your website has tons of string text. You should focus on the string text translation.

Visit the WPML->Theme & Plugins Localization area to translate your themes or plugins’ string text. Then you need to define your theme and plugins name for translating the string.

Now hit on the Scan selected plugins for strings area to scan the plugin’s strings. It takes some moments so wait for a while for counting the strings.

Theme & Plugins Localization

After scanning all the plugin strings, you should go to the WPML->String Translation area.

Select strings

Now, click on the (+) icon to add the language.

Click on the + icon

Finally, select the right languages for translating your website string text.

Select the languages

That’s it.

Translation Management

You can also manage the translation from the WPML->Translation Management area. You can easily manage the translation languages of your website.

Manage Translation Management

That’s all.

Final Thoughts

You may lose your potential consumers due to language issues and eventually, it will affect your business growth.

Therefore, to improve your client’s experience you may offer easy navigation and their preferable language for easy understanding of your products or services.

Moreover, Elementor let you customize your sites regarding your requirement.

In addition, it is the best fit for your business where WPML adds a language switcher widget to the Elementor Page Builder.

Also, WPML offers a dedicated customer support system to assist you in any difficulties.

Hence, you will get a refund within the 30-day trial period if you don’t get satisfied with their services.

Share this post

Related Post