Skip Navigation
Home » Documentation » Plugins Compatibility » How to build multilingual websites using Beaver Themer and WPML

How to build multilingual websites using Beaver Themer and WPML

Mohamed Khafaja
Updated
March 2, 2021

WPML allows you to translate layouts for headers, footers, single pages, and archives you build using Beaver Themer.

Content

Getting started

To follow up with this tutorial, ensure that you have installed and activated the Beaver Builder and the Beaver Themer plugins.

Also, make sure to activate the WPML Multilingual CMS, WPML String Translation, and WPML Translation Management plugins.

We recommend enabling WPML’s Advanced Translation Editor for a better translation experience. You can do that by navigating to WPML → Settings. Under the How to translate posts and pages section, check the “Use WPML’s Advanced Translation Editor” option. 

Enabeling the Advanced Translation Editor

WPML translation tools

We recommend using WPML Advanced Translation Editor (ATE) offers affordable automatic translation, a glossary, a spell checker, and more!

Besides translating your site content yourself, you can also:

Translating Beaver Themer layouts

Translating Beaver Themer layouts is pretty straightforward as it’s very similar to translating posts and pages. In this example, let’s see how to translate a header we created using Beaver Themer.

  1. Go to Beaver Builder → Themer Layouts and you will see a list of all your layouts. Click on the plus icon under the language you want to translate your layout into. In our example, we want to translate the “Custom Header” layout. This takes us to WPML’s Advanced Translation Editor.
Navigating to the Themer Layouts listing page
  1. Click the Translate automatically button, review the translation to ensure it is accurate, then click the Complete button to publish the translation.  
Translating the layout texts
  1. In case you’ve set the header or any layout to display in a specific location, you need to manually set the translated location as well. For example, we’ve set our header to show on the homepage.
Setting the header to show on the homepage

To make sure that the translated header appears on the translated version of the homepage, use the language switcher in the top admin bar to edit the layout in the other language. Then, choose the translated version of the page to be the new location. After this is done, make sure to click Update.

Setting the secondary language layout location manually

This is how the translated header looks like on the front-end:

The secondary language header on the front-end

You can follow the exact same steps to translate any layout that you build using Beaver Themer.

Translating pages built with Beaver Builder

Check out our detailed guide that explains the process of translating websites built with Beaver Builder using WPML.

Getting help from our support

In case you encountered any issues translating Beaver Themer layouts using WPML, visit our support forum.