Using Page Builder with WPML

This document is for users utilizing the Page Builder plugin and translating their website using the WPML plugin. It assumes a basic knowledge of both WPML and Page Builder. For more information on both of these plugins check out Site Origins Page Builder Documentation and WPML Getting Started Guide.

Overview

The steps below for using Page Builder with WPML apply to both posts and pages. In this document a page will be used. Begin by navigating to the page you wish to translate. In this example I have created a single row, two column page titled About Site Origin. The permalink of the page is: http://wporigin.com/about-site-origin/.

WPML 5

To the right of the Page Builder editor you will see the Language tab. This is where you select the default language of this particular page that users will see when navigating to the page. In this example I will select English as it will be the main language.

WPML 2

A view of the page from the front end is below:

WPML 6

Creating Duplicates of a Page for Translating

When using WPML with Page Builder you will have to independently translate the page content yourself. Once you have completed the page you wish to translate, look for the “Translate yourself” heading under the Language tab.

Here you will find a list of available languages (as per your initial setup of WPML). Click on the check box next to the languages you want, and click “Duplicate”. In this example I have selected French.

WPML 7

Another heading will appear titled “Translations”, with a list of duplicate pages and the language for which it was duplicated.

WPML 8

It is important to note that this action duplicates the original page in its current language including the title. The difference is in the permalinks. The permalink of each duplicate page will have the  same format as the original followed by the language (/?lang=xxx)

WPML 9

Translating Duplicate Pages Independently

When using WPML with Page Builder you will have to independently translate pages yourself. After creating duplicate pages you can now navigate to each duplicate page and translate it yourself.

To do so Navigate to Pages > All Pages. Under the page filter hyperlinks you will see the additional website languages. Next to each hyperlink is the number of pages associated with that filter type. In this example there is now 1 French page available.

WPML 16

Click on the associated hyperlink to find the page you wish to edit. Click on the page title to open that page.

WPML 10

Under the “Language” tab of a duplicated page, you will find a note indicating the original page from which it was duplicated.

WPML 11

Click on the Translate independently button and begin translating the title and content of the page.

WPML 12

In this example I used Google translate. Once you have finished translating the page, click “Update” and proceed to the next duplicate.

WPML 13

Viewing the original page from the front end, you will now have links in all language selector drop down menu’s for the additional languages. Click on a link to view the page in that chosen language.

WPML 14

WPML 15