multilingual-website-with-elementor

How To Build A Multilingual Website With Elementor And WPML

If you have a site built with Elementor, you already know that it’s very easy to manage pages and contents of your site in Elementor. What, if you want or need to translate your site into multiple languages?

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

If you have clients from all over the world it’s better to introduce your products or services to them in their local language.

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 the multilingual site easily.

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 from only one locality.

Today, with the technological advances the borderline has diminished and business becomes globalized. With the flow of globalization, people turn into 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 Search Engine Result Page.

Benefits of Multilingual Website

Concisely, a multilingual website is beneficial due to:

  • Cost-effective and reliable marketing strategy
  • Reach more audience 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.

Popular Translator Addons for Elementor

  • 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 Resource 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 set up different features or WPML documentation to learn more about translating your site.

How to Configure WPML for Multilingual Website

At first, you have to login your CMS and open the dashboard. At the next step, navigate to WP Dashboard->Plugins->Add New->Search.

After that, input the name of the translation plugin WPML into the search box and install the plugin.

  • Activate the WPML plugin.
  • Go to the WPML Dashboard and select the Language URL format.
  • Now translate the pages and your products.

Further, when you activate WPML for the first time, you will get a setup wizard to specify the basic settings like-

  • Set the default language
  • Add additional languages
  • Specify where to display language switchers
  • Register WPML

Indeed, the essential settings now you are ready to translate the content of your site in any language you require.

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 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 WPML translation management page and select the content need 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 detail 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 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 translation. 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 into 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 over 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 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 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 bellow image shows how a Global Widget looks on the front-end.

multilingual-website-global-widget-frontend

Add Translated Global Widget in 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 click 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 in 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 navigates 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 template-using Elementor, which can be easily added into 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

Happy Addons: Powerful Elementor Widgets to Build Beautiful Websites

happy-addons

Happy addons will boost the power of your Elementor built website by adding extra features that are well designed, super flexible, and suitable for any type of website.

This easily customizable plugin help you to add an elite look to your Elementor WordPress site.

Finally, you can take your website to the next level of elegance with the uniquely designed Happy Effects.

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 30-days trial period if you don’t get satisfied with their services.

Share this post

Share on facebook
Share on twitter
Share on linkedin

Related Post