Skip Navigation
Home » Documentation » Translation Management » Translating Content Created with Page Builders

Translating Content Created with Page Builders

Dario
Updated
October 4, 2022

WPML allows you to easily translate pages you build using your favorite page builder. Read this guide to learn which page builders are supported and how to translate page builder designs.

What You Need

  • WPML core plugin and WPML String Translation add-on
  • A page builder plugin

If you’re new to WPML, check out our Getting Started Guide. It quickly walks you through different translation options you can use.

Which Page Builders are Supported

We are constantly working on adding more popular page builders to WPML’s recommended plugin and theme directories.

The following page builders are compatible with WPML:

The following page builders are mostly compatible or compatible using manual translation:

If you have a theme with some custom made page builder modules, you will need to register those page builder modules first.

How To Translate Page Builder Content

There are three ways you can translate content created with page builders:

  • Translating it automatically
  • Translating it yourself
  • Sending it to be translated by others

Translating Your Site Automatically

You can translate all of your site’s content automatically, including most page builder content, by enabling the Translate Everything translation mode. This translates your site content instantly as you create or edit it, and allows you to review the translations before publishing.

You can enable Translate Everything either in the setup wizard when setting up WPML for the first time, or in WPML → Settings.

Enabling Translate Everything in the setup wizard

Enabling Translate Everything in the settings

You can see the status of your automatic translations either in the admin toolbar or by going to WPML → Translation Management.

Viewing automatic translation status on the Translation Management dashboard

Once your content has been translated, you can review how it will look on the site’s front-end. From here, you can either accept and publish the translation, or open it in the Advanced Translation Editor to edit it.

Reviewing translated content on your site’s front-end

Using Translate Everything is the quickest way to translate and the easiest way to keep your content up to date.

Translating Page Builder Content Yourself

Use the following steps to translate the content yourself:

  1. Click the plus icon for the language you want to translate the post into. The plus button is accessible either in the language box when editing a page or from the list of pages, as you can see in the table below:

The plus in the Language box when editing a page

Using WPML to translate page builders

The plus located under the flag in Pages → All pages

Using WPML to translate page builders.
  1. WPML’s Advanced Translation Editor opens, and you can add your translations for each sentence in the field on the right. Click the green check mark to complete each translation.
WPML's Advanced Translation Editor
WPML’s Advanced Translation Editor
  1. You can also use automatic translation to translate the entire page in one click. Double check each translation to make sure they are correct.
  2. When you are done translating, click Finish and then Close.

Sending Content to Other Translators

WPML also allows you to send your content to be translated by local translators or by professional translation services. To use a professional translation service, be sure to activate the service you want to use first.

  1. Go to WPML → Translation Management
  2. Select the content you want to translate, the language you want to translate it into, and click Add selected content to translation basket.
Adding content to the translation basket
  1. Click the Translation Basket tab, and select the local translator or translation service. You will only see translator options that match the translation jobs’s language pairs.
Adding content to the translation basket

Individual translators with translation jobs assigned to them can go to WPML → Translations and start translating. The job will open in the same Advanced Translation Editor as described in the Translating Page Builder Content Yourself section above.

Jobs assigned to professional translation services will be sent to the translation service. You can choose to have the translations published immediately once the job is complete, or to review it first. This setting can be changed by going to WPML → Settings and scrolling to Translated documents options.

Translating Content that Appears Multiple Times

If the same text appears multiple times on the same page, WPML automatically recognizes the duplicate content and offers it for translation as one field. This way, you don’t need to spend time translating the same texts in the page.

WPML then displays the translation of these texts in all the places that they appear on your page.

The following image displays a design created using WPBakery Page Builder, using three instances of the same text:

WPBakery Page Builder design using multiple instances of the same text
WPBakery Page Builder design using multiple instances of the same text

When translating that page, the Advanced Translation Editor only shows one instance of this text. 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

After translating, the translation of the text is displayed in all the places on the front-end 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 Translations When a Page Changes

If you update a page’s styling without updating any content, these changes sync automatically with the translations. There is no need to re-translate the page.

However, if you make any changes to a page’s content or add new content, you need to translate the page again. This time, you do not need to translate all the content again, but only the part that changed or was added.

In this example, I added a Text Box element to an “About Us” page using the WPBakery Page Builder:

Adding a Text Block to my page
Adding a Text Block to the page

Note: Remember to Update the page after adding the element. This is important because it will load the text elements to the Advanced Translation Editor screen.

In the Language meta box, click the icon to update your translation.

The arrow icon replacing the plus button
The arrow icon replacing the plus button

When the translation job opens in the Advanced Translation Editor, the previous translations are still in place, and there is a new field that need to be translated.

Advanced Translation Editor with new text block element to be translated
Advanced Translation Editor with new text block element to be translated

Translate, mark the translations as complete, and then Complete.

Translating Toolset Templates Designed Using Page Builders

Toolset plugins allow you to design Content Templates for displaying single posts of any post type. You can use one template for all languages and translate only the texts inside such as labels or headings.

To translate your Content Templates, you first need to change their settings to make them Translatable post types:

  1. Go to the WPML → Settings page.
  2. On the Multilingual Content Setup tab find the Post Types Translation section.
  3. Mark your Content Template as translatable.

Then, you can send your Content Template for translation.

Alternatively, you can choose to create separate Content Templates for each of your site’s languages. In this case, you should not send such templates for translation. Instead, you should translate the template for each language manually.

Instead of following the previous workflow, you have to use your page builder to individually add content to each language’s Content template.

To check the status of the Create different Content Templates for each language option, go to the Toolset → Settings page and click the WPML integration tab.