Skip Navigation
October 11, 2021

WPML allows you to translate pages built with Beaver Builder. You simply create your page with the builder and then use WPML to translate the texts.

Page in original content

Beaver Builder and WPML

Page translated to French


Beaver Builder is a complete design system that includes a page builder plugin and a framework theme that will help you create the website that suits your needs. If you want to have a multilingual site, Beaver builder’s integration with WPML will allow you to translate all of the modules side-by-side.

What you will need

  • Beaver Builder plugin.
  • Multilingual CMS version of WPML. Install the WPML core plugin plus String Translation, Translation Management, and Media translation add-ons.

Essential resources


Getting Started

  • Set up WPML from WPML > Languages. See our WPML Getting Started Guide for complete reference. The initial, simple three-step setup is self-explanatory, asking you to choose your default language, a set of active languages and a language selector (for starters, choose the footer language selector – you can change this later).
  • Install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management) first, followed by other WPML plugins that may depend on them.
  • Install the Beaver Builder plugin and activate it.
  • Activate the Translation Editor: Simply click on the displayed message once you have activated Beaver Builder.
Activating WPML Translation Editor

WPML translation tools

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

Besides translating your site content yourself, you can also:

Translating a page built with the Beaver Builder

WPML presents new features that simplify further the process of translating pages created using Beaver Builder. The following new features are added:

  • Preserving the existing translations when editing the default language page
  • Automatic Translation for internal links
  • Copy-once mode for custom fields

WPML allows you to translate content in three ways. You do the translation yourself, you send content to your chosen translators or you send jobs to a professional translation service.

Watch a short overview of translating and updating pages built with Beaver Builder in the following video:

Scenario 1: You are the one doing the translation

Publish the page you just created with Beaver Builder. After publishing, you will see the Language box.

Click the plus button for the language you wish to translate into.
You can find these plus buttons in the Language box when editing your page or on a listing page:

The plus located in the Language box when editing my page.

The plus located under the flag in Pages → All pages

By clicking on one of these plus icons, you open WPML’s Translation Editor. Use it to translate the contents of your page and tick the box when the translation is complete as shown below:

Beaver Builder and WPML
WPML Translation Editor with Beaver Builder modules

When you’ve already translated, the plus icon changes to a pencil icon. Click on the pencil if you need to modify your translation.

The pencil to edit your translation.

Scenario 2: You want to send the pages to a translator.

WPML allows you to send your content to translators from your WordPress dashboard. But first, you need to add translators to your site or to choose a translation service.

You need to go to the WPMLTranslation Management page and select the content to translate (pages or posts).

Then, click to add the selected items to the Translation basket.

Finally, on the Translation basket tab, you need to select translators that will translate the content.

The translators will be notified and they will translate on the WPMLTranslations page. The content will appear back in WordPress.

Adding a new module to the page and doing the translation

In this part, we will look at how to update your translation if you decide to add a new module in your page. Let’s create a new module and add it to the page:

beaver builder and wpml
Let’s add a button

Then click on Done:

Done Button

A window will open with three choices.

The two first options will slightly influence the translation process. We will see the 2 different scenarios below.

Scenario 1: I have added a new Button to my page and I click on “Publish Changes”.

Publish Changes

To translate your page you have to go back to your WordPress dashboard.

Click on Edit Page.

WPML Beaver Builder
Click to edit your page and access the translation editor

The plus icon has become an arrow, which means that you have to update your translation. It makes sense as we have just added a new module in English on this page.

Click on the arrow to open WPML Translation Editor.

NB: We have not translated in Spanish yet, that’s why the plus is still here next to Spanish.

Beaver Builder and WPML
The ‘update translation’ arrow

WPML translation editor will open with the new module to translate (my button):

WPML Translation Editor with the new module

Translate the module, mark the translation has complete and save and close once you get 100%

WPML Translation Editor with the new module

Scenario 2: I have added a new Button to my page and I click on “Save Changes and Exit”.

Save Changes and Exit

If you select Save Changes and Exit your translation is not updated yet. That’s why you need to go back to the back-end to update it.

Click on Edit Page:

WPML Beaver Builder

As you can see below, there is no arrow next to the French translation. There is a pencil instead which means that WPML has not “seen” yet the module you just added.

Important: You need to click on Update to load the module “button” in the translation editor.

After updating, the pen will become an arrow and you will be able to translate your new module. Click on the arrow to translate and load the WPML translation editor. The next translation steps are the same as shown in scenario 1.

Updating an existing module and its translation

In this part, we will see how to update your translation if you decide to modify the content of one of your modules.

Edit an existing module with Beaver Builder (this module has been translated once) and click on Save.

Current text (red) – Adding new content to the module (blue)

Click on Done at the top of the page:

WPML and Beaver Builder
Done Button on the top right hand corner

A Window will open with three options:

Window with the 3 options.

Publish the change:

(If you choose the Save Changes and Exit option, don’t forget to click on update before opening WPML translation editor as we explained in scenario 2 of the previous section.)

WPML Beaver Builder
Publish Changes

Go back to your dashboard by clicking on Edit Page. Now, we need to update the translation.

WPML and Beaver Builder
Edit button to go back to WPML translation editor

Click on the arrow in the Language box to open WPML translation editor:

The arrow next to the French Flag means ‘you have to update’.

The old translation (in red) is still here, you only need to add the translation of the new content (in blue).

WPML Translation Editor. The new content added to my module (in blue) vs the existing content (in red)

This is how the result looks like once you have translated the full module:

Translation of the new content only. The previous translation was already saved.

Click on Save and close:

Save and Close

This is how it looks like in the front-end:

Title – the first column

Title – the second column

List of the Beaver Builder Modules currently translatable by WPML

The following textual elements in the Beaver Builder Modules are supported by WPML. Some of them will automatically be displayed in the Translator Editor. Some other modules like “menu” will need a separate translation as we explained in our menu user guide.

  • Button
  • HTML
  • Heading
  • Text editor
  • Accordion
  • Call to action
  • Callout
  • Contact form
  • Content slider
  • Countdown
  • Gallery
  • Icon
  • Icon Group
  • Map
  • Menu
  • Number counter
  • Posts
  • Pricing Table
  • Sidebar
  • Slideshow
  • Social Button
  • Subscribe Form
  • Tabs
  • Testimonials

Compatible Beaver Builder addons

Known Issues

There are no known compatibility issues between this plugin and WPML.

Getting help from WPML Support

In case you need help translating your site built using Beaver Builder and WPML, visit WPML’s support forum.

Do you want to get WPML?

You can test WPML for 30 days and see if you like it.
If you are not happy with our plugin, we will refund you within the 30 day trial period, no questions asked.