WPML allows you to easily translate pages you build using your favorite page builder. This also includes themes which are bundled with Visual Composer.

Contents

Getting Started and What To Check

Is your site already configured by your developer?
We simply recommend you to make sure the following plugins and options are activated.

Are you setting up WPML yourself?
Then you need to follow the steps below.

  • Set up WPML from WPML > Languages. See our WPML Getting Started Guide for a complete reference. The initial, simple three-step setup is self-explanatory, asking you to choose your default language, a set of active languages, and a language selector. (For starters, choose the footer language selector; you can change this later.)
  • Install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management) first, followed by other WPML plugins that may depend on them.
  • Activate the WPML Translation Editor : 

Go to the WPML -> Translation Management page and click the Multilingual Content Setup tab. There, select the Use the translation editor option in the How to translate posts and pages section.

Activating WPML Translation Editor

How to translate page builder contents

There are two ways contents created with page builders can be translated:

  • Manually, by you
  • By sending them to be translated by other translators

Manual translation

Use the following steps to translate the contents yourself.

1. Click the plus icon for the language you want to translate the post into. The plus button is accessible either from the page either from the listing pages as you can see in the table below:

The plus located in the Language box when editing my page. The plus located under the flag in Pages -> All pages
 Using WPML to translate page builders Using WPML to translate page builders.

2. You are taken to the WPML’s Translation Editor. Contents in the original language are on the left. Put your translations into the boxes on the right. Please note that you can also style the translations just like with the original WordPress editor.

WPML Translation Editor

3. Make sure to mark each part of the content as Translation complete:

Using WPML to translate page builder

Marking the translation as complete

 

4. When you are done translating, click Save & Close.

 

Sending translation to other translators

To send contents created using page builders to be translated by other translators, you need to go to the WPML -> Translation Management page and use the following steps.

1. Choose the type of your content (page, post, etc.), select it, and click Add to translation basket.

Using WPML to translate pages built with visual composer

Adding content to the translation basket

 

2. Click the Translation Basket tab, and select the translator for a specific language. Please note that you need to setup the translators beforehand.

Using WPML to translate page builders

Selecting your translator

 

That’s it! Now, translators will be able to go to the WPML -> Translations page and start with the translation job. They will use the same Translation Editor described in the “Manual Translation” section above.

Translation of same texts that appear multiple time

Sometimes, you might have the same text that repeats on your page. WPML automatically recognizes the duplicate contents and offers it for translation as one field. This way, you don’t need to spend time translating the same texts in the page.

Naturally, WPML will display the translation of these texts in all the places that they appear on your page.

The following image displays a design created using Visual Composer, using three instances of the very same text.

Visual Composer design using multiple instances of the same text

Visual Composer design using multiple instances of the same text

When we translate that page, we can see that the editor only shows one instance of the field to translate this text. Again, this means that we only need to translate it once.

Only one field is used to translate duplicated texts

Only one field is used to translate duplicated texts

Finally, on the front-end, the translation of the text is displayed in all the places as intended.

Translated duplicated texts shown in all the right places on the front-end

Translated duplicated texts shown in all the right places on the front-end

Updating translation when a page changes

You can always update the translation of pages that were already translated. When the contents of the translated page change, you can simply translate it, or send to translation, once again. This time, you will not need to translate all the contents once again, but only the part that changed, or was added.

When updating the default language page content make sure not to update the text and the position of an element inside the page as this will result in losing the translated text. Read more about preserving the existing translations when editing the default language page.

In this example, I added a Text Box element to the “About Us” page:

Adding a Text Block to my page

Adding a Text Block to my page

Note: Remember to Update the page after adding the module. This is important because it will load the textual elements of the module to the Translation Editor screen.

In the Language meta box, you will see an arrow instead of a plus button. This indicates that the translation needs to be updated since you recently added some new content to your default language page. Click on the arrow to update the translation in your secondary language page.

The arrow replacing the plus button

You will see the WPML Translation Editor with new fields that need to be filled in. Also, note that the translation completion percentage is back to 75%.
Translate and mark the translations as complete, and then Save and Close.

 

WPML Translation Editor with the new Text Block

 

 

WPML integrations with page builders

We are constantly working on adding more popular page builders to WPML’s list of integrations.

The following page builders are integrated with WPML:

If your favorite page builder is not yet integrated with WPML, learn how to easily do this in our guide about integrating page builders that use shortcodes.