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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

Download and install all of the required plugins.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-2 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

Review the summary and click Done.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-10 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

Choose your global attributes (color and size).

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-38 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

A translation button is added to the products list.

how-to-create-a-multilingual-website-with-divi-or-extra-and-wpml-42 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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 How to Create a Multilingual Website with Divi or Extra and WPML

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

SEO News and More

SEO News and More

Share This