How To Build Multilingual Sites with WPBakery and WPML

Dario

Updated

November 25, 2024

Learn how to translate WPBakery content into more languages and create a multilingual website with WPML.

Getting Started

Start by installing and activating the following plugins:

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

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

How To Translate WPBakery Pages Using WPML

WPBakery is compatible with WPML’s Translate Everything Automatically mode. If you choose this mode when setting up WPML, all of your WPBakery page content will be automatically translated as you add or edit it.

If you want to decide yourself which of your content gets translated, choose Translate What You Choose mode when you set up WPML.

To translate your site’s content using the Translate What You Choose mode:

1. On your list of pages, click the plus icon under the language and next to the page that you want to translate.
2. You’ll be taken to WPML’s Advanced Translation Editor. If you have translation credits, you’ll see your content automatically translated. You can review these translation and accept them, or click Undo translation to input your own. If you don’t have translation credits, add the translations by yourself.
3. Click Complete once you’re done with all your translations.

You should now be able to view your default language and secondary language pages on the front-end.

Page in default language

Page translated to Polish

You can find detailed explanations of both translation methods in our documentation about translating page builder content.

All the Current Translatable WPBakery Page Builder Modules

WPML supports translating text in the WPBakery Page Builder modules:

1. Text Block
2. Separator with Text
3. Message Box
4. Hover Box
5. Single Image
6. Image Gallery
7. Image Carousel
8. Tabs
9. Tour
10. Accordion
11. Pageable Container
12. Custom Heading
13. Button
14. Call to Action
15. Widgetised Sidebar
16. Posts Slider
17. Video Player
18. Google Maps
19. Flickr Widget
20. Progress Bar
21. Pie Chart
22. Round Chart
23. Line Chart
24. Post Grid
25. Media Grid
26. Post Masonry Grid
27. Masonry Media Grid
28. Tweetmeme Button
29. FAQ
30. WP Search
31. WP Meta
32. WP Recent Comments
33. WP Calendar
34. WP Tag Cloud
35. WP Text
36. WP Recent Posts
37. WP Categories

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 the Advanced 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 them to the Custom XML Configuration tab found on the WPML → Settings page. Here is the code snippet:

Read more about registering page builder modules for translation.

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. Read more about updating the language configuration file to maintain the compatibility between WPML and WPBakery Page Builder.