How to Create a Multilingual Website with Divi and WPML

Posted on February 2, 2017 by in Divi Resources | 21 comments

How to Create a Multilingual Website with Divi and WPML

Divi is WPML ready. That means Divi can be translated into other languages, creating a multilingual website. This includes layouts made with the Divi Building from the backend or frontend, Divi modules, and all of the WordPress elements such as menus and post types.

WPML is fairly simple to set up with Divi and can open your website up to multiple audiences across the globe. In this article we’ll walkthrough how to implement WPML into your Divi website and see just how simple it actually is.

What WPML Does

WMPL doesn’t translate your website for you. Instead, it creates multiple versions of the same content and delivers the version based on the language of the reader. Links to each version are available on the website and on the individual posts themselves so your readers can choose the version of the post they want to read.

Setting Up WPML

Your first task of course is to purchase WPML. This will give you several downloads. Upload the plugin and activate as normal (go to Plugins in the dashboard, select Add New, and select Upload and upload the file).

I recommend uploading only the WPML Multilingual CMS file. The plugin will then you’re your download and activate the rest of the add-ons. If you’re using it with WooCommerce be sure to have it active before installing WPML.

Once the plugins are activated you’ll register the plugin. Click Configure WPML and enter your information.

Choose your content language and click Next.

Select the languages you want to translation your content into. You can select as many translation languages as you want.

Set up the Language Switcher options to order the languages and add the switcher for the menu, widgets, footer, and links.

Finally, enter your registration key.

Additional Plugins

To work with Divi, WPML requires two additional plugins:

  • String Translation – lets you translate strings such as tagline, widgets, etc.
  • Translation Management – a translation management interface where you can interact with translators and translation services.

Installing the Add-ons

Select Configure from the plugin screen and choose the plugins from the list. Select Activate After Download and click the Download button.

Translation Management Setup

To set up Translation Management, go to WPML, Translation Management in the dashboard and select the Multilingual Content Setup tab. Here you can choose to create your translations manually or use the translation editor.

Performing Translations

WPML doesn’t do a machine translation. You can do the translating yourself or have someone else, such as a translation service, do it for you. Once the plugins are installed and activated you’ll see a note in the right side that says the operation is complete. You are now ready to use WPML with Divi.

Sample Page

For the example in this tutorial I’m recreating a portion of the Divi sales page.

Before you publish you’ll see a new box called Language. Here you can choose your languages. This will have a new feature after you publish the post.

Here’s the page that I’ve created. For my example this page will be converted into Spanish.

Doing the Translation Yourself

After you publish your page or post you’ll see a Language box in the editor. It works great with layouts created with the Divi Builder.

If you’re publishing from the frontend you’ll need to exit the Visual Builder after publishing and edit the page from the backend and click the plus next to the language you want to translate into. You can also find this button in the list of all posts. This will open the translation editor.

Translate the content by filling in each of the fields. Be sure to check the box to show the field is complete.

When you’re done place a check in Translation is Complete and save your work.

You can edit any of your translation work by selecting the pencil next to the item to edit.

The translation process is the same whether you’re using your own designs or Divi’s Premade Layouts.

Result

The page is now available in Spanish (my translating skills might need some work. Okay, I cheated and used Google Translate). It includes a link to see the article in English.

Using a Translator or Translation Service

Rather than performing the translation yourself, you can assign the task to a translator or translation service directly from your WordPress dashboard. In order to use this you’ll have to either add translators to your list or select a translation service.

Adding Translators and Services

For a local translator create a User for your website that you want to assign translations to. You can assign them any user role you want. In the dashboard go to WPML, Translation Management and click on Your Translators.

Select Add Translator and choose the From and To languages from the dropdown boxes. You can edit this later. Type in the name of the User you want to assign the translation to and click Add translator.

You can now assign work to this translator. The process for the translators is exactly the same as if you were doing the translation yourself using the translation editor.

Translation Services are set up from the Translation Services link. You select the services you want from the dropdown box in the same way as local translators.

Sending the Article to a Translator

Add the selected items to the translation basket.

In the Translation Basket tab select the translators that you want to perform this translation. This will notify the translator. You can also leave it as default which will assign the work to the first available translator.

The translator can use the translation editor or export and import the file. Once they’ve completed the work they can mark it as complete.

You’ll see it completed in the Translation Jobs list and receive an email reporting the completed task.

Editing Pages and Posts

Once you’ve published and translated a post you can still edit it. If you add modules your translation will show that it needs an update. Before leaving the Divi Builder and going to the Translation Editor be sure to save first.

In my original example I didn’t include the page title within the layout. I decided to add it using a module. Once I’ve added it the module will need to be translated.

Once you’ve updated your page or post you’ll see that the translation needs to be updated. You can either update it manually or send it to a translator. For manual translation click on the arrow in the update field.

When you open the Translation Editor you’ll see the portions that have not been translated. Their fields will be empty and they will not be marked as complete. Perform the translation the same as before. Once you’ve made the update mark it as complete and save your work.

To send the job to the translator, go to the Translation Management tab and select the post to be updated and click Add to Translation Basket.

Translation Result

The result is an updated page complete with translation and links to the various languages the post is available in.

Divi Modules

All of the textual elements in the Divi modules can be translated. It’s up to the translation editor to recognize the module. This even includes elements such as image alt tags. Here’s the list of modules the translation editor will recognize:

  1. Accordion
  2. Audio Player
  3. Bar counterBlog
  4. Blurb
  5. Button
  6. CTA
  7. Circle Counter
  8. Code
  9. Comments
  10. Contact Form
  11. Countdown Timer
  12. Divider
  13. Email Optin
  14. Filterable Portfolio
  15. Gallery
  16. Image
  17. Login
  18. Map
  19. Number Counter
  20. Person
  21. Portfolio
  22. Post Navigation
  23. Post Slider
  24. Post Title
  25. Pricing Table
  26. Search
  27. Shop
  28. Sidebar
  29. Slider
  30. Social Media Follow
  31. Tabs
  32. Testimonial
  33. Text
  34. Toggle
  35. Video
  36. Video Slider

Custom Layouts

All Divi custom layouts can be translated including those you’ve uploaded and those you’ve created. This even includes global layouts. The layouts can be saved and reused. You can have different layouts for different languages. Go to Divi, Layouts, and click Add New. Click Submit and create your layout.

Create your layout just like you would any page or post.

Once you’ve updated your layout, click the plus button under Translate and perform your translation as with any post. Now you can load them from your library into the language for that page. For example, I can load the English version into an English page and the Spanish version into a Spanish page.

Menus

Menus can also be translated, but they’re done differently. Instead of translating the menu, you’ll create a new menu in a different language and connect them. Choose the menu you want to translate (go to Appearance, Menus). In the upper right corner select the language you want to create a menu for.

Select the language and which menu it’s a translation of, then create a new menu to be linked to the translated menu.

Taxonomies, Custom Post Types, Theme Strings, and More

All custom post types and projects can be translated as well. Many post types, such as projects, work the same as posts and pages. Some, such as WooCommerce product post types, will require an add-on.

WooCommerce

The WooCommerce post type requires the WooCommerce Multilingual add-on. It works the same as any post or page. Simply click the translate button to translate using the translation editor, or send it to your favorite translator using the translation manager.

Here’s a look at a product page in Spanish.

Categories

In the dashboard go to Posts, Categories. Here you can either create a new category or select a category to edit. At the bottom of the screen you’ll see Language added to the category field. Select the language you want and click Add.

Here you can create the category in the new translation. Click Add New Category when you’re done.

Divi Theme Text

Divi’s theme text is translated using String Translation. In the dashboard go to WPML, Theme and Plugins Localization. Choose Translate the theme and plugins using WPML’s String Translation and click Save.

Scroll down and click Scan the theme for strings.

Go to WPML, String Translation. Select the strings to display and the text domain. You can also search for strings. Click Translations and add your text. When you’re done, click to show the translation is complete and click Save.

Divi Theme Options

Go to Divi, Theme Options and choose the tab you want to translate. Go back to String Translation and look for that field, add the translation, and click Save.

Final Thoughts

Divi is fully WPML compatible. This includes modules, theme files, taxonomies, and of course content. Adding WPML isn’t that difficult and the translation management add-on is a great way to assign translation tasks to local translators or translation services. Using WPML, Divi can easily make your website readable in practically any language, giving you a global audience.

Do you use WPML with Divi? Let us know about your experience in the comments below.

Featured Image via Qvasimodo art / shutterstock.com

21 Comments

  1. Thank you very much, I need to translate a website to english, now I will do oit faster.

  2. Interesting article, thank you.

    In the past I had some issues with Divi ( Divi version 1) and WPML. Haven’t tried it with the latest version. But for sure things have changed if Iook at this article. Will give it a try soon again.
    Thank you for the heads up!

  3. This looks interesting.

    I do this using Multisite, Divi and MultilingualPress. Our sites in the different languages are not totally in sync, so the multisite approach seems to work for us.

  4. Good thing to address this, now Divi is truly compatible with WPML. I’ve translated two sites before the full WPML-Divi integration was made, and though it worked, the translation process was somewhat awkward. Now I’m working on a new site and I must say: the side-by-side blocks when making the actual translation (one for parent language, one for new language) is a real time saver. It’s also very convenient to have all page elements presented in the same manner. So I think this integration is very well done.

    Two important remarks:

    – Sometimes the side-by-side translation blocks don’t seem to work as expected, and the actual text is entangled with Divi in-line code. For me the solution was to upload the wpml-config.xml to the child theme folder as well (this file is placed in the WPML plugin folder by default)

    – If you have made translations using WPML before the Divi-integration, using the ‘old way’ of duplicating and then translating pages, for these pages you’ll have to stick to that method. New pages can take full advantage of the new way. Of course, you can always convert these old translations to the new way.

    Not only ET’s support is excellent, WPML’s is as well! So I can only recommend them too.

  5. How Do I plays with polylang?

    • Polylang works but like older WPL, you need to create a layout for each language.
      Also free version of Polylang has only basic function.
      If you need complete function like Woocommerce support, you need Polylang Pro which pretty expensive.
      I wouldn’t choose Polylang.

  6. Great article !
    I’ve used qTranslate X for my client website and it worked very well with Divi.
    For next projects I’ll try WPML 🙂

    • Hi Alessandro,

      Did you achieve this with qTranslate-x keeping only one design per page?
      I’m testing it now and as far as i can see changing a design element (e.g a row background color) needs to be edited for each language alternative. i.e 3 languages…same change needs to be made 3 times. Which is a headache.

  7. This is a great tutorial! Thank you!

  8. DIVI and WPML work fine, except the search module: the text “search” from this module button is harcoded and WPML can not translate it!

  9. Hi

    This (excellent) tutorial is missing one very important aspect:
    language flag selector, how to place them at the top. Not too difficult in the secondary top menu but Is there a convenient way to embed the default WPLM language selector ?

  10. There is a big problem with the new WPML translation capability for PageBuilders based on shortcodes such as DIVI.
    The problem is that once all the texts of a page are translated, if one of the texts of the main language is modified, when we return to the translator for a language we will observe that the translation has been eliminated, reason why we have to return to translate all the Text or have it saved somewhere to re-place and do the small modification we have done.

    • Indeed. We have found the same issue being signifiant for a project. Looking forward to some kind of fix.

  11. Thanks Randy,

    Very good tutorial! But one point is not addressed: What happens at the level of keywords and more generally with SEO?

  12. Great tutorial!
    How about Extra? Is Extra WPML compatible just like Divi?

  13. Last week I finally finished redesigning a website, using Divi as the new theme and translating it using WPML.

    My experience with Divi has been mostly excellent, but I can’t say the same about WPML integration… It made me go mad to translate the website, it was a HUGE mess. Many times the string translation boxes didn’t work and the whole shortcode was shown instead; I also suffered the big problem mentioned above: when updating the original version of the page the translation was altered, half lost or completely erased.

    So I asked for help at the WPML Support and, though their were great helping me out with everything, it turned out that loosing the translations after updating the original page was a big bug happening to several people and they were working on a solution. It was unacceptable for me that they released an update with such an important and frustrating bug.

    BUT they updated the plugins a week ago, a day before I switched the website to the new design just finished, and now supposedly it works better. The changelog says this about the update-erase problem: “Removed feature for page builders that updates the translated post when the original post is updated”. So, they didn’t fix the bug but just erased the feature of updating the translation when updating the original page’s structure, then the integration is not as great as it should be…

    I really hope that they get to make the integration of DIVI and WPML as good as expected. That would be a huge step further in a basic pillar of web design process: easy translations and no doble work for each little change you make.

    • Hi Eleazar,
      I’m experiencing similar problems – although I’m using the current version of both Divi and WPML, I seem to lose all translations below the change I make in the original page.
      Can you currently make changes to the original without losing translations of other parts of the page?

      Thanks!
      Robert

  14. Great! Exactly what I need 🙂

    But just to clarify (I’m a complete beginner just starting to make my way through it all…): can I launch my page in one language first and then “go back” and add a version in a second language? Or would it be better to simultaneously build the page in both languages? For me it is right now much more important to get the site going in one language than launching it multilingual…

  15. Thank you for this tutorial.

    But what’s is the difference between just simply translate a page and duplicated it?
    And how could I translate a menu if I didn’t duplicated pages translated?

  16. Hello,
    I am a divi licensed user, i need some bilingual site to develop in English | Bengali, Can anyone suggest pls what i can do ? I can see in WPML language selection theres no Bengali Laguage selection option. pls suggest.

    Lipton

  17. Hello.

    I am a Divi licensed user also.

    I would like to know if a website made usind Divi Theme can be translated by the Weglot WordPress plugin?
    Here is the link https://wordpress.org/plugins/weglot/

    I see that Weglot translate automatically the website and let you adjust/customize the translation if you need. That is much faster than do it entirely manually.

    But I don’t know if it works with Divi Theme.

    Could you write an article about that integration?

    Thank you.

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest