Translate Beaver Builder Sites using TranslatePress plugin

Translate Beaver Builder sites using TranslatePress

Beaver Builder is a very popular drag and drop WordPress page builder. In this tutorial we’ll show you how to translate Beaver Builder sites using TranslatePress.

Similar to Beaver Builder’s front-end approach to creating content and templates, TranslatePress has the same visual approach when it comes to translating all your site content (including images, sliders, forms, popups, you name it).

Building a multilingual site using Beaver Builder and TranslatePress has never been easier.

Below we’ll dive into the simple steps required to translate Beaver Builder sites using TranslatePress.

Creating your website using Beaver Builder

Due to its drag and drop visual editor, Beaver Builder makes building a website from scratch fast and intuitive. Plus, you don’t need any coding knowledge.

It comes in both a free and paid version. The free version offers standard elements for tackling both structure and content of your site. You can easily add rows and divide them into columns. Then populate them with content in the form of text, images, headings, html & more.

Beaver Builder website

The paid version of Beaver Builder comes with premium modules and a lot of templates you can choose from. You also get access to a Beaver Builder theme that offers extended control of the header, footer and styling of your site.

Building our first page using Beaver Builder

Once the Beaver Builder plugin is installed and activated, you’ll be taken to the plugin settings page.

Beaver Builder plugin settings

Next, we’ll start and create our first website page. Simply navigate to Pages and click “Add New”.

Edit page using Beaver Builder

If you’re using the Gutenberg editor, you’ll see something like this.

Edit page using Beaver Builder in Gutenberg

Simply click the “Launch Beaver Builder” button and you’ll be taken to the visual front-end interface where you can start building your page.

The Beaver Builder editor will let you choose Modules, Rows or Templates that can be used to customize your page and add content.

To speed things up we’ll use one of the existing Templates. Under “Templates” you have plenty options to choose from, we’ll go for an agency landing page.

Once you selected the template you’ll notice it will display on your page.

Beaver Builder Add New Template

You can easily move content elements around, customize their settings and display options. Even duplicate them if needed. Beaver Builder offers a lot of flexibility which I invite you to explore.

Here’s how our page created with Beaver Builder looks like:

Beaver Builder Agency Templates

You can apply the same visual approach to creating and styling content for the rest of your website.

Translate Beaver Builder sites using TranslatePress

Now that you saw how easy it is to create your website using Beaver Builder’s drag and drop interface, let’s have a look into the simple steps required to make it multilingual.

Adding a second language to your Beaver Builder site

For this tutorial we’ll look into translating the page we created using Beaver Builder into a second language (let’s say Italian).

We’ll start by installing and activating the TranslatePress multilingual plugin.

Once TranslatePress is active, you’ll notice a new “Translate Site” item added in the admin bar.

TranslatePress Settings in Admin Bar

Just hover over it and click “Settings”. This will take you to TranslatePress Settings page.

TranslatePress Settings Page for translating Beaver Builder sites

The first thing you’ll notice is “Translation Languages”. From here you can add the translation languages you want your multilingual Beaver Builder site to be available in.

English is our default language, so we’ll also add “Italian” by selecting it from the language drop-down and clicking the “Add” button.

You can add as many languages as your project needs using the Multiple Languages add-on for TranslatePress. The free version is limited to 2 languages.

There are a few other things you can setup (things like Google Translate integration for automatic translation, or customizing the language switcher), but we’ll skip them for now and click “Save Changes”.

Translating your Beaver Builder page using TranslatePress

We’re now set to start translating our Beaver Builder website.

To start translating your site into Italian, you can either click the “Translate Site” blue tab under TranslatePress settings or simply navigate to the page you want to translate and click the “Translate Page” item from the admin bar menu (located right next to ”Beaver Builder”).

Translate button in Beaver Builder

This will open up the TranslatePress visual translation editor. Using it you can translate every string on your page and also see the changes in real time.

Translate Beaver Builder sites

Once you hover over a certain text you want to translate, a pencil icon will appear, and by clicking it you’ll be able to insert the corresponding translation.  Click “Save translation” and you’re done, you can move to the next piece of text.

Check out how fast we translated the Services area in Italian:

Translate Beaver Builder site using TranslatePress

You can find all the strings on your page in the TranslatePress editor list of strings drop-down. There are keyboard shortcuts available to speed up the translation process and make it easier for you to navigate through all the text on a page.

TranslatePress works out of the box with any type of content created with Beaver Builder. The same translation process can be applied to all elements on a page, whether you translate a WordPress menu, a contact form, even an image containing text.

If you’re looking to build a multilingual store powered by WooCommerce, TranslatePress makes it easy for you to translate WooCommerce products as well.

Adding a language switcher to your site

Last but not least, what is a multilingual site without a language switcher?Rest assured, TranslatePress takes care of this as well.

By default, once you add a secondary language under TranslatePress settings, it will automatically add a floating language selection dropdown in the front-end of your site. This will follow the user on every page.

Once you hover over it, it will show all the available languages.

Add TranslatePress Language Switcher to Beaver Builder site

You have three options to display language switchers on your website:

  • Shortcode ( Use the [language-switcher] shortcode on any page or widget. )
  • Menu item ( Go to Appearance -> Menus to add Language Switcher Languages in any menu. )
  • Floating language selection ( Have a floating dropdown following the user on every page. As mentioned before, this is set by default.)

Translating the rest of your Multilingual Beaver Builder site

Turning your Beaver Builder site multilingual is really straight forward using TranslatePress.

You simply navigate the site, page by page, using the visual translation editor, select a certain text, hover and click the pencil icon, then enter its translation. Save and move to the next one.

Do this for the remaining strings and you’ll have your pages and website translated in no time.

 If you haven’t used TranslatePress yet, make sure to play with our demo.

It’s fast (won’t slow down your site), SEO friendly and really easy to use.