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

Dario
Updated
July 25, 2022

This page shows you how to translate layouts built with Beaver Themer. To learn how to build multilingual sites with Beaver Builder, see our documentation page about translating websites built with Beaver Builder using WPML.

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

On This Page

Getting Started

Start by installing and activating the following:

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

One of these options is Translate Everything. This translation mode allows you to automatically translate pages, posts, custom post types, custom fields, taxonomies, WooCommerce products, and more as you add and edit content.

Translating Beaver Themer Templates

WPML allows you to translate your Beaver Themer templates as well as any saved rows, columns, and modules.

Before you can translate your Beaver Themer templates, you need to set the Beaver Builder Templates custom post type Translatable. To learn more, see our documentation about translating Beaver Builder templates.

Translating Beaver Themer Layouts

Using WPML, you can translate the following Beaver Themer layout types:

  • Header layouts
  • Footer layouts
  • Archive layouts
  • Singular layouts
  • 404 layouts
  • Part layouts

Translating Beaver Themer layouts is very similar to translating posts and pages.

In the example below, we’ll show you how to translate a header we created using Beaver Themer by yourself using the Translate Some mode:

  1. Go to Beaver Builder → Themer Layouts and click on the plus icon under the language you want to translate one of your layouts into. In our example, we’re going to translate a Header layout.
Clicking the plus icon to translate a Themer Layout
  1. You’ll be taken to the Advanced Translation Editor. If you have translation credits, you can click the Translate automatically button and review the translations to ensure they are accurate. If not, enter the translations for each line and then click the Complete button to publish the translation.
Translating a Header layout in the Advanced Translation Editor

 If you set the header or any other layout type to display in a specific location, you now need to manually set the translated location as well. As you can see below, we set the display location of our header in the default language to the Contact Us page.

Setting the header to display on the Contact Us page

To make sure that the translated header appears on the translated version of the Contact Us, use the language switcher in the top admin bar to edit the layout in the secondary language. Then, choose the translated version of the page to be the new location. Once you’re done, make sure to click Update.

Setting the secondary language layout location manually

Now, you can view your page with the header in your default and secondary languages on the front-end:

The page with the header in the default language
The page with the header in the secondary language

You can translate any other layout type by following the same steps.

Translating Pages Built with Beaver Builder

To learn how to build multilingual sites with Beaver Builder, check out our detailed guide that explains the process of translating websites built with Beaver Builder using WPML.

Known Issues

WPML works fine with this plugin, but sometimes there could be minor issues we're working on. This is expected as both plugins provide frequent updates.

Current unresolved issues:

You can also search all known issues including previously resolved issues for this plugin.

Getting Help

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