How to Create a Multilingual Website with Divi or Extra and WPML

January 3, 2019

Creating a multilingual website with Divi and Extra is easy. Both WPML ready, meaning you can create a multi-lingual website with Divi and Extra. WPML has made changes that improve compatibility with Divi and Extra and has added features that make it even easier to translate your website. In this article, we’ll see how to create a multilingual website with Divi or Extra and WPML.

What is WPML

WPML, or WordPress Multilingual, is a premium plugin that lets you create multiple versions of the same content with each version being a different language. It then automatically delivers the version with the correct language for each reader. The website, as well as the individual posts, also include language links so the reader can choose the language they want.

WPML was already a powerful translation platform, but it now has the Advanced Translation Editor which will perform translations automatically.

Setting up WPML

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml Theme Builder Layout

First, purchase the version of the WPML plugin that works best for your needs. Multilingual CMS and Multilingual Agency support page builders.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-1 Theme Builder Layout

Download and install all of the required plugins.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-2 Theme Builder Layout

Go through the settings, setting up your site language, translation languages, menu switcher locations for the menu, footer, and widgets, links to translation of posts, etc. Each of these settings can be edited later. Come back to this settings screen for even more settings.

Additional Required Plugins

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-3 Theme Builder Layout

To easily translate Divi, you’ll need two additional WPML addons:

  • Translation Management – creates an interface so you can interact with translators and translation services.
  • String Translation – translates strings such as tagline, widgets, etc.

Click to install each addon. String Translation needs no setup, but you’ll need to setup Translation Management.

Setting up Translation Management

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-4 Theme Builder Layout

Go to WPML > Translation Management in the dashboard menu. Here, you’ll choose who will be the translation manager. This can be a new user, current user, or you.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-5 Theme Builder Layout

Choose the translation method. Use your own translators or see the available services.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-6 Theme Builder Layout

This shows a list of services with a description, rating, and a button to activate them. It also includes a couple of tabs for other translation services and add-ons for the translation management system.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-7 Theme Builder Layout

If you don’t use a translation service you can add your local translators.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-8 Theme Builder Layout

Choose your translation editor. I recommend selecting the Advanced Translation Editor because it has automatic translation options.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-9 Theme Builder Layout

Review the summary and click Done.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-10 Theme Builder Layout

The Translation Management screen will now provide a list of items to translation. You can also adjust roles, services, and translation jobs using the tabs.

Performing a Translation from the WordPress Editor

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-11 Theme Builder Layout

You’ll see the translation options in the sidebar of the post editor. This is the Classic Editor. To translate the post, click the + next to the language you want to translate it into. It shows the languages you chose during setup. You can also duplicate the post if you want.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-12 Theme Builder Layout

It’s in the same location if you’re using Gutenberg.

The Advanced Translation Editor

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-13 Theme Builder Layout

Selecting a language takes you away from your website to the Advanced Translation Editor. Click the light blue button close to the center of the header labeled Translate Automatically.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-14 Theme Builder Layout

Select whether to keep the sentences as incomplete so you can review them yourself, or to mark them as complete without reviewing them. Click Translate.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-15 Theme Builder Layout

Once the translation is complete, you’ll see the translated text in the center field. The content is broken into sentences so you can see and edit them independently. Click on any text you want to edit and it will show in the editor in the right. Here, you can copy and paste in the original text, select to perform a machine translation, open a glossary, use spell-check save as draft, and save and complete.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-16 Theme Builder Layout

Clicking the green check marks that section of text as complete, highlights errors, and loads the next section. Approved each translation and click Finish in the bottom right corner.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-17 Theme Builder Layout

Next, it shows a preview of the text in a visual view and in HTML view.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-18 Theme Builder Layout

Clicking Complete in the bottom right will declare the work as done and take you back to your post editor where you can make other translation choices. The language you chose will no longer be available in the list for this post. Under the list is the word Translation and a link labeled ‘show’.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-19 Theme Builder Layout

Clicking the link displays the translations you’ve translated this post into with an edit button. If an update is available it will show a circle or arrows. Clicking opens the Advanced Translation Editor where the translations for you to approve will be highlighted in yellow.

I returned and edited the phrase ‘Bed & Breakfast’ to ‘Bed and Breakfast’ so it would translate. If you update the page but don’t update the translation, the original will still show in the languages that you haven’t updated.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-20 Theme Builder Layout

It now shows a message in the upper left corner that the page is available in Greek.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-21 Theme Builder Layout

Clicking the text reopens the page in the new translation. It evens shows my WordPress menu in Greek. The clickable text now shows that English is available.

Performing a Translation from the Translation Management Screen

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-22 Theme Builder Layout

The Translation Dashboard shows a list of articles and the translations. Select the article that you want to mark as ready to translate and scroll to the bottom of the list.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-23 Theme Builder Layout

Select the languages you want the article translated into and click the button to add the selected articles to the translation basket.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-24 Theme Builder Layout

A new tab is added called Translation Basket. It shows the articles to be translated, the languages it’s to be translated into, the batch name, suggested deadline, and dropdown boxes where you can assign translators or services.

Editing Posts

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-25 Theme Builder Layout

Translations can also be added to the posts from the post list. A list of flags is added to the list with a + under each flag. Simply select the + for the language you want to translate into. This opens the Advanced Translation Editor.

Translating Divi and Extra Custom Layouts

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-26 Theme Builder Layout

The Divi Library lets you translate layouts like the pages and posts. Translate individual modules, rows, sections, and complete layouts. Flags are added to the list. The layouts include + symbols that you can click on for the translation you want. Clicking a + symbol opens the Advanced Translation Editor.

Translating Divi and Extra Global Modules

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-27 Theme Builder Layout

You can translate standard and global sections, rows, and modules. When you create layouts, make sure the Multilingual Content Setup at the bottom of the page has Make ‘Layouts’ Translatable selected. You can also choose the custom taxonomies from here.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-28 Theme Builder Layout

I’ve saved entire section as global in my Divi Library. Global layouts can be selected for translation from the Divi Library. You can update any of the translations by clicking the spinning arrows.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-29 Theme Builder Layout

Perform the translation as normal. Now when you translate a page that uses the global module, only the other elements of the page will need to be translated. The translated content of the global module is preloaded into the translator.

String Translation

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-30 Theme Builder Layout

String Translation will translate your Divi theme strings such as widgets, taglines, etc. Go to WPML > String Translation in the dashboard menu and select Divi for the domain.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-31 Theme Builder Layout

Select the strings you’d like to translate, scroll down to Translation Options, select the translations you want, and click Add to Translation Basket. It will appear in the Translation Management list just like pages or posts.

Menus

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-32 Theme Builder Layout

Menus also include translation links. Click on the language you want and it opens a new menu editor.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-33 Theme Builder Layout

Here, you can see any pages that you’ve translated. Create the new menu and select what menu it’s a translation of. This menu will now be used when the visitor chooses that language.

WooCommerce Multilingual

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-34 Theme Builder Layout

WooCommerce Multilingual is an addon for WPML that lets you translate every aspect of WooCommerce. Using WCML with WooCommerce can help increase sales and traffic from multiple international markets. It can help improve your multilingual SEO by translating the products, shopping cart content, shipping, URLs, images, etc. It lets you provide multiple payment options with multiple currencies.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-35 Theme Builder Layout

Once you install it, it asks if you want to run the setup wizard.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-36 Theme Builder Layout

Choose the languages for your store pages. The pages will be created automatically. These are the languages that I chose when I set up WPML initially.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-37 Theme Builder Layout

Choose your global attributes (color and size).

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-38 Theme Builder Layout

Enable the multi-currency mode in order to set prices for different currencies.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-39 Theme Builder Layout

Choose if the products will show even if they haven’t been translated yet.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-40 Theme Builder Layout

Multilingual features are now integrated with WooCommerce. You can make even more adjustments in the settings.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-41 Theme Builder Layout

A translation button is added to the products list.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-42 Theme Builder Layout

This opens WooCommerce Multilingual, where you can choose to translate products in the same way you would pages or posts.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-43 Theme Builder Layout

Clicking on a + opens the Advanced Translation Editor where you can perform an automatic translation.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-44 Theme Builder Layout

Translation features are also added to the product editor. As expected, it works exactly the same as pages and posts.

Ending Thoughts

WPML has added a lot of new features to improve how it works with Divi and Extra. The automatic translation feature of the Advanced Translation Editor alone does wonders for creating a multilingual website. WPML also includes lots of integrations, such as WooCommerce, to help you build a global presence. If you want to provide your Divi or Extra website in multiple languages, WPML is a great choice.

We want to hear from you. Have you tried WPML with Divi or Extra? Let us know about your experience in the comments.

Featured Image via TarikVision / shutterstock.com

Share this article:
 




eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.