WPML 3.6.0 Beta With Translation for Divi and Visual Composer

{Updated Post on 6/12/16} WPML 3.6.1 is now released and it applies the configuration to Divi and Visual Composer automatically. No need anymore to install any XML configuration files manually.

WPML 3.6.0 is now available in first beta. The major new feature of this release is convenient translation for sites built with page builders. In this beta you can experiment with Divi and Visual Composer.

Until today, in order to translate sites that are built with page builders, you had to rebuild each page, with the page builder, in each language. This works fine for small sites that have few languages. It’s more challenging for busy sites that have a lot of content and many languages. And, it was a showstopper for anyone wanting to work with translators.

WPML 3.6.0 changes all this. Now, when you design content with a page builder, you will have the option to conveniently translate only the texts, without going into the builder to translate (it’s a new option. You can still translate “the old way”, by designing with the page builder each language separately). The same workflow will work if you’re translating yourself, sending content to your own translators or using a translation service.

Let’s see how it works.

Install WPML Translation Management, String Translation and Configure WPML

First, you need to install both Translation Management and String Translation. Both are available from your WPML account, if you have a Multilingual CMS account. If you have a Multilingual Blog account, you can upgrade and pay only the difference.

Next, go to WPML->Translation Management-&Multilingual Content Setup and select to Use the translation editor.

^* The production version of WPML 3.6.0 will help you with this step. It will detect when WPML components are missing, suggest to install them for you and set the translation method correctly.

Tell WPML How to Translate the Page Builder

^* This techie step is not required anymore, it was only required for WPML 3.6.0 beta.

Design With the Page Builder

Here is a sample page that we’ve designed with Visual Composer:
(I’ll be the first to admit that we could have designed something nicer.)

You can see the + icons for adding translations to the page.

Translate With WPML’s Translation Editor

I click to add translation to Spanish and I arrive at WPML’s Translation Editor (this is what we’ve configured WPML to do in the first step).

You can see that the translation editor includes fields for translation. There’s a field for the page title and then fields for each of the cells in the page builder. Only cells that have text will appear. This means that the translator working on the page doesn’t need to worry about the design. Translators now only need to translate and only need to translate texts. There are no shortcodes in the text and nothing else to make the translator’s work difficult.

I’m translating all the fields, click on “translation complete” next to each and then “save and close” the translation editor.

When I get back to the translated page, the + icon will change to a pencil. This tells us that it’s translated already and now I can edit it.

Check the Results

We’re all done. Let’s look at the page on the front-end, in English and in Spanish.
And, remember, we only designed this page ONCE using the builder.

Summary of the Translation Process

This blog post is a little long and includes a lot of details because it’s a beta version. The usage instructions for the production version will be a lot simpler:

1. Design with your page builder
2. Translate

There’s a bit of preparation work here because this beta version still doesn’t do all the automation of the production version. If you need help with any of the steps, please let us know.

The Full Divi Translation Tutorial (Added Jan 2017)

If you want to know more, we recommend that you read our dedicated tutorial about how to build multilingual sites with Divi and WPML. There, you will see the entire process and learn how to translate everything that Divi offers.

Download and Try

WPML 3.6.0 is available as beta. To get it, log in to your WPML account, click on Downloads and scroll to the bottom. You will see CMS Beta Package. Download and extract it. Inside, there are ZIP files for all of WPML’s components. To use a beta, you need to use all of WPML’s components from that package and not mix with production versions.

This is a beta, so you should only use it on development sites.

WPML 3.6.0 is going into QA next week. We will probably release more betas and we’re planning to have the production version in about a month. The production version of WPML will also include the new language switcher, more improvements, some fixes and full compatibility with WordPress 4.7.