How to build multilingual sites with WPBakery Page Builder and WPML

Originally written: May 30, 2018

Updated: April 22, 2020

WPBakery page builder is one of the most popular WordPress page builders. It allows you to build your pages in a visual way, using its intuitive drag-and-drop interface. It is also bundled with many popular themes.

What you need

WPML Multilingual CMS package which includes WPML Translation Management and WPML String Translation add-ons
WPBakery page builder plugin

Essential Resources

WPML’s Getting Started Guide helps you set up WPML in a few minutes.
Later, you can refer to some of its subtopics, such as Theme and Plugin Localization and String Translation. We recommend that you keep this guide open while following this tutorial.
WpBakery Documentation provides you with all information needed to set up this page builder’s different features.

Getting Started

Set up WPML from WPML -> Languages. See our WPML Getting Started Guide for a complete reference. The initial three-step setup is simple and self-explanatory. It asks you to choose your default language, a set of active languages, and a language selector.
First install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management). Then install the other WPML plugins that may depend on these core plugins.
Install WPBakery page builder and activate it.
A notification displays at the top of the WordPress dashboard that enables you to easily activate the WPML Translation Editor with a single click. Simply click the Enable it now button in this message window.

WPML translation tools

WPML offers two translation editors you can use for translating your site’s content:

WPML classic translation editor (CTE).
WPML Advanced Translation Editor (ATE) offers affordable automatic translation, a glossary, spell checker, and more!

Besides translating your site content yourself, you can also:

Send your content for translation to a professional translation service.
Create your own team of local translators from the Translation Roles tab in Translation Management and assign translation jobs to them.

How to translate WPBakery pages using WPML?

Detailed steps for translating WPBalery pages are explained on the page about translating page builder contents.

List of all the current translatable WPBakery Page Builder modules

The following textual elements in the WPBakery Page Builder modules are supported by WPML and will automatically be displayed on the Translator Editor page:

Text Block
Separator with Text
Message Box
Hover Box
Single Image
Image Gallery
Image Carousel
Tabs
Tour
Accordion
Pageable Container
Custom Heading
Button
Call to Action
Widgetised Sidebar
Post Slider
Video Player
Google Maps
Flickr Widget
Progress Bar
Pie Chart
Round Chart
Line Chart
Post Grid
Media Grid
Post Masonry Grid
Masonry Media Grid
Tweetmeme Button

Adding support for the Raw HTML element

WPML allows you to manually enable the translation of the Raw HTML element.

Enabling the translation of the Raw HTML element might cause issues when sending a page to professional services or using Translation Editor locally to translate it. The issue is not technical, but stems from the fact that translators often do not, understandably, understand the code and can break it during translation.

To translate the texts in the Raw HTML element, you must add it to the Custom XML Configuration tab found on the WPML -> Settings page. Here is the code snippet:

Adding support for the Raw HTML element

<wpml-config>
  <shortcodes>
    <shortcode>
      <tag encoding="base64">vc_raw_html</tag>
    </shortcode>
  </shortcodes>
</wpml-config>

Maintaining the WPBakery Page Builder Compatibility with WPML

We have prepared a developer’s documentation that explains how the WPBakery Page Builder works with WPML. Additionally, it explains the process of updating the language configuration file in order to maintain the compatibility between WPML and WPBakery Page Builder. Feel free to check it here.