WPBakery is one of the leading page builders for WordPress, used on over 5.8 million sites worldwide. Known for its dual drag-and-drop editors and widespread theme integration, especially through platforms like ThemeForest, it’s been a go-to choice for developers, agencies, and site owners since 2011.
Unlike other builders, WPBakery is highly preferred by non-technical users due to its ease of use, making it easier for agencies and developers to hand off sites to clients who want to update content on their own.
In this tutorial, we’ll show you how to translate sites built with WPBakery using TranslatePress. WPBakery is fully compatible with TranslatePress, and we’ll walk you through the basic steps to translate any page or post in its frontend editor with TranslatePress.
Creating a website with WPBakery Page Builder
As a page builder, WPBakery lets you control the content area of posts, pages, and custom post types. The header and footer, however, are dependent on your WordPress theme.
WPBakery doesn’t offer a free version, but you can try it on a free demo site. A regular license costs $69 for one site, which includes free lifetime updates and one year of Support Plus. You can renew support yearly, with subscription discounts increasing up to 50%. Bulk and multisite plans are also available.
WPBakery has both a frontend and a backend editor, which can be used interchangeably.
The backend editor provides a detailed overview of the page structure and is good for tracking down used elements. But in this tutorial, we’ll be using the frontend editor, as it allows us to see how the page will look live while editing it, thanks to its visual interface.
Creating our first page with WPBakery Page Builder
You can purchase a WPBakery license from the official website. Afterwards, you can install and activate it just like you would any other plugin.
Then, from your WordPress dashboard, go to create a new page. From there, you will be able to select between the backend and frontend editor.
Once you open the editor, you’ll be able to select to start either from the default layout of your WordPress theme or from a blank page. We’ll start with a blank page.
From there, you’ll be prompted to start by adding elements or templates to your page.
To speed things up, we’ll be using one of the pre-built, full-page templates available in WPBakery. You can access the template library from the editor by clicking on the “Templates” icon in the navigation bar. To download a template, simply hover over it and click the download button.
We selected the “Business Layout Full Page” template. Each element can be customized, rearranged, and duplicated (not just across pages, but also across sites).
You can also save certain element settings as presets or save your own layouts as templates to reuse later on. You can repeat the same process with other pages on posts on your WordPress site.
If you’re just starting out with WPBakery and need more guidance, we recommend you watch the complete tutorial for beginners, which covers the basics of using the page builder:
Translating a WPBakery Site Using TranslatePress
Now that we’ve created a WordPress site using WPBakery, let’s make it multilingual using TranslatePress.
Adding a second language to your WPBakery site
For this tutorial, we’ll be translating the site we created with WPBakery into a second language. Let’s go with Spanish as it’s the second most spoken language in the world.
First, install and activate the TranslatePress multilingual plugin.
After activating the plugin, you’ll see “Translate Site” in your WordPress admin bar.
Hover over it and click Settings (or click on TranslatePress under Settings in your WordPress admin dashboard).
This will take you to the TranslatePress General Settings page. Here we can add the second or even third, and fourth language we want our page and site built with WPBakery automatically translated into. For our site, English is set as our default language, so we’ll add “Spanish” (you can even select the dialect).
Choosing and customizing the frontend language switcher
Next, let’s choose how our visitors can switch to their preferred language.
In the Language Switcher tab, TranslatePress offers a bunch of customization options for displaying a language button or dropdown. You can watch this video to learn everything about this customizer, but for now, let’s simply enable the Floating Switcher and choose a preset design.
This will automatically create a dropdown-type switcher that stays on top of every page of your website. If you want to further customize it, you can scroll down the page and adjust colors, borders, flag shapes, and much more.
Automatically translating a WPBakery page
Now that you have your languages added and switcher in place, all you need are the translations.
Now, if you want this done as fast as possible, TranslatePress AI is the way to go. You can enable automatic translations by navigating to the Automatic Translation tab in the TranslatePress Settings.
Each TranslatePress license comes with a set number of AI words to use for automatic translations; you’ll be able to track your usage here.
If you prefer to use your own Google Translate or DeepL API, you can choose one of these two from the Alternative Engines section right below. However, keep in mind that this will require some setup on your part in order to connect your API key to TrnalsatePress.
Now, let’s simply Save our changes at the bottom of the page and go test everything out by visiting any page on our site.
At the bottom right corner (if you kept the default settings), you’ll see the language switcher. Simply hover over it and click on the language you want to translate the page into, and it will be translated automatically.
Now every time someone visits any page on your site, they will be able to select their preferred language.
Manually translating a WPBakery page
Now, let’s explore how to manually translate a singular page with TranslatePress. This is useful if you want to edit any of the automatic translations, or if you simply want to go the manual route from the start.
Open the page we built with WPBakery in the previous steps in your browser, and from the admin bar, click Translate Page.
This will open the page in the front-end visual editor of TranslatePress, where you can translate every string on the page and make corrections in the translations if needed.
All you need to do is either select the string from the dropdown menu on the left side (under the default language) or hover over it and click the pencil icon next to it.
Then, in the second language window (“To Spanish” in our case), make the necessary changes. If there are any suggestions, they will be available below.
The same can be done with all WPBakery elements on the page, whether it’s a button, a copyright element, or even an image.
In addition, TranslatePress can also help you translate menu items, forms, and even WooCommerce Products, which can be integrated into WPBakery pages.
Don’t forget to click “Save” after each edit.
Turn Your WPBakery Design into a Multilingual Experience
And that’s it for our tutorial. As you can see, translating any site, page, post, or element built with WPBakery is now easier than ever using TranslatePress. Plus, it’s pretty intuitive and straightforward, so your WPBakery site can be multilingual-ready in no time!
Learn also how to show/hide WPBakery multi-language elements based on language.