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.
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.
Next, we’ll start and create our first website page. Simply navigate to Pages and click “Add New”.
If you’re using the Gutenberg editor, you’ll see something like this.
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.
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:
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.
Just hover over it and click “Settings”. This will take you to TranslatePress Settings page.
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”).
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.
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:
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.
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.