How to Create a Multilingual WordPress Site with Beaver Builder and TranslatePress [Easiest Way]

Creating a WordPress site from scratch can be intimidating. Things get even more complicated when you throw multilingual pages into the mix. Fortunately, there are some really intuitive translation plugins that'll help you create a multilingual WordPress site fast, using the same visual approach for creating your pages that Beaver Builder does.

In this post, you’ll learn how to create a multilingual WordPress site with our own page builder Beaver Builder and the translation plugin TranslatePress. We'll mostly cover manual language translations but will briefly touch on automated translation as well.

First, let's go over what a multilingual WordPress site is.

What is a Multilingual WordPress Site?

A multilingual WordPress site is any WordPress site that's been translated into two or more languages. Typically, visitors can select which language they'd like to view your site in, though automatic language detection, which relies on the language settings of a visitor's browser, is possible as well.

A multilingual site is a valuable tool that can have a huge impact on your online businesses. It allows you to expand and target new customers that speak other languages. TranslatePress incorporates multilingual search engine optimization (SEO), so the translated version of your site will rank higher in search results in regions where your original pages cannot compete. This lets you stay ahead of the competition and reach untapped marketplaces.

Creating a multilingual WordPress site has never been easier, thanks to translation plugins like TranslatePress.

Beaver Builder and TranslatePress

Beaver Builder is a free page builder plugin that helps you build custom layouts no matter which WordPress theme you use. You can add premium features, including templates, to Beaver Builder for as little as $99. The Moon Landing template, paired with a free WordPress theme called Astra, is featured in this tutorial. Check out our complete beginner’s guide to Beaver Builder if you need help with the page building process.

TranslatePress is a free multilingual WordPress plugin that uses a frontend visual translation interface similar to Beaver Builder, so you can see the translated material right on the page as you work. This makes it easier to use than other multilingual solutions, where the translation process happens in the backend. 

TranslatePress works out of the box with any theme or plugin and even has native support for the Gutenberg editor. When visiting your site, the user can choose the language preference or the language can be automatically determined from the user’s browser.

Let’s dive into how to use this plugin to create your very own multilingual WordPress site.

Setting up TranslatePress

You can translate your site into another language using the free version of TranslatePress, so we’ll install and activate that version from the Add New Plugin page.

This adds a Translate Page/Site menu item to the WordPress admin bar at the top of the screen. Hover over it to access a link to the plugin’s Settings page. You can also go to Settings > TranslatePress.

There are only two settings we’re going to configure right now. Use the Default Language setting to select the current language your site is available in. Be as specific as possible. If you use British phrasing and spelling, select English (UK).

Next, in the All Languages section, select the target language from the list and click Add to confirm it. To add additional languages, purchase a premium Personal license or higher.

If you aren’t sure which language to choose, use a tool like Google Trends (change the regional search to Worldwide and the timeframe from 2004 to Present) to see where your niche is most popular, then do a bit of research to find out which languages dominate regions that aren’t your own.

For example, the topic “baseball” is mostly popular in the United States but is also popular in Puerto Rico and the Dominican Republic. This makes Spanish a great option for a site about baseball.

Save your settings when you’re done so we can get to work building your multilingual WordPress site.

Translating Your Beaver Builder Pages with TranslatePress

If you’re logged into your backend, you should see the WordPress admin bar at the top of every page or your site that you view. Simply navigate to any page you want to translate and click the Translate Page menu item in the admin bar.

Your page will reload in a layout similar to the live customizer in WordPress: TranslatePress on the left and a frontend view of your page on the right. Hover over the first bit of text you want to translate, and click the pencil icon that appears.

This opens the translation options in the left panel, shown in the following screenshot. Enter the translation for the selected text. Click Save Translation to save that text string.

If you want to see your translations as you save them, click over to the French (or your language) version of the TranslatePress editor.

Simply repeat the same process until you have all the content on that page translated. Here’s a visual representation of how quick translations can work with TranslatePress, especially when you use keyboard shortcuts:

This front-end editor recognizes many types of elements with text, including images with text, sliders, forms, and even popups. If you have a WooCommerce store, TranslatePress makes it easy to translate WooCommerce products.

Automatic Translations using TranslatePress

If you’re worried about translating every individual text string for your entire multilingual WordPress site, don’t fret. TranslatePress integrates with a few different translator APIs that translate text on your website automatically based on translations from its own database.

If you’re using the free version of TranslatePress, you can use the Google Translate API. You need an active account at Google Cloud Platform, which is free during your first year. After that, expect to pay $20 per one million translated characters, not including whitespaces.

Premium users have access to DeepL, which a more advanced automatic translation service that uses neural networks and artificial intelligence to translate text.

Adding a Language Switcher to Your Multilingual Beaver Builder Site

You’ve probably noticed the little language element at the bottom right-hand corner of every page on your site.

This is the language switcher, a nifty little button visitors can use to display your pages into any of the languages you’ve made available. Let’s edit its appearance.

Head back to the TranslatePress Settings page and scroll down to the Language Switcher section. By default, your site appears in the original language of your site, and the language switcher displays the full language name in the site’s original language, with flag.

If you want language names to appear in their native form instead (“Francais” instead of “French”), enable the Native Language Name setting.

There are five different ways you can display the language switcher:

• Full language names - “English” and “French”

• Short language names - “EN” and “FR”

• Flags with full language names

• Flags with short language names

• Only flags

There are also three different ways you can showcase the language switcher itself. The button you see at the bottom of your page is the “floating language switcher.” You can change its position to the bottom left, top left or top right. You can also deselect this version to deactivate it if you’d prefer to use another switcher and don’t want to use them simultaneously.

If you want to add the language switcher to the navigation menu, go to Appearance > Menus and add the languages you’ve translated your site into to the bottom of the menu. It’s best to add the Current Language item first, then add your languages as sub-items.

This ensures the language switcher showcases the language the page is currently displaying in.

You can also add the language switcher to any page or widget with the language-switcher shortcode.

Completing Your Multilingual Beaver Builder Site

All that’s left to do now is translate the rest of your site. If you aren’t using a professional translator, you can do this yourself by simply navigating the website page by page and entering the translations. To speed things up you can set up automatic translation and only modify the translated strings that sound out of context.

If you are working with a professional translator, the Business license and higher allows you to add Translator user accounts to your WordPress site. This account type makes it possible for translators to translate text strings on your site without giving them admin access.

Lastly, multilingual SEO is a complicated road to navigate. A page that ranks well in your original language may do poorly when translated, if you don’t make sure you also translate the most important SEO elements (like page title, slug, and description). The TranslatePress SEO addon packs everything you need to rank in multiple languages.

As you’ve noticed by now, turning your Beaver Builder site multilingual is really straightforward using TranslatePress. The two plugins are fully compatible, so you can use TranslatePress to translate any type of element or template available in Beaver Builder, directly from the frontend.

Have you thought about turning your website multilingual and expanding your reach? Let us know in the comments section below.