Brizy is a new, yet increasingly popular WordPress page builder that helps you build websites fast and with no coding. In this tutorial we’ll focus on how to translate Brizy Page Builder sites using TranslatePress.
Brizy and TranslatePress work great together, making it really simple to create a multilingual Brizy site fast. We’ll go through setting up a Brizy powered website, then translate it into multiple languages using TranslatePress.
Building your site using Brizy Page Builder
The first thing you notice after taking Brizy for a spin is how intuitive and user-friendly it is. It has a drag and drop, visual approach to creating and styling content that just works.
Their free version is packed with a lot of advanced elements and pre-defined blocks (templates), which you would normally have to pay for in other builders.
Another thing you’ll enjoy are the professional pre-made blocks, which even a non-designer can use to build a beautiful layout fast. The Pro version expands even more on this with 150+ premium designs + access to the Brizy Cloud.
Let’s see exactly how easy it is to create a beautiful WordPress page from scratch using Brizy Page Builder.
Creating a page using Brizy
Brizy installs just like any other plugin. Here’s a quick video with the exact steps for installing Brizy free.
Now that the plugin is installed and activated, let’s look at how simple it is to create and style our first page with Brizy.
It took me very little to build this example page by using the pre-designed blocks in Brizy, re-arranging them and editing some of their styling options.
You can easily add multiple elements using their interface, so I added a contact form at the end of the page as well. I’ve also inserted a menu at the top of the page, which will be our site main navigation.
You can replicate the same thing and add as many pages, posts or custom post types your website needs.
Translate Brizy Page Builder sites using TranslatePress
Now that you saw how easy it is to create your website using Brizy page builder, let’s have a look into the simple steps required to make it multilingual.
Adding a second language to make our Brizy site multilingual
Let’s say we also want to translate the content of the page we recently created in French.
First thing we need to do is install and activate 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.
Under TranslatePress Settings, you’ll notice “Translation Languages”. From here you can add the translation languages you want your multilingual Brizy site to be available in.
English is our default language, so we’ll also add “French” 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 Brizy page using TranslatePress
We’re now ready to start translating our Brizy site.
To start translating your site into French, 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 ”Edit Page with Brizy”).
This will open up the TranslatePress visual translation editor. Using it you can translate every text on your page and also see the changes in real time.
Hovering over a piece of text you want to translate will make a pencil icon appear next to it. Clicking it will allow you to enter the corresponding translation in the sidebar editor. Then simply hit the “Save Translation” button and move to the next piece of text.
You’ll notice the same visual and intuitive approach that Brizy has for building your page, TranslatePress uses for translating your content.
Check out how fast it is to translate parts of “Our Founders” area from our page:
All the strings on your page are located under the translation editor list of strings drop-down. You can use the keyboard shortcuts available to speed up the translation process and navigate faster through all the text on a page.
TranslatePress works out of the box with any type of content created with Brizy Page 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 in a certain language.
Adding a language switcher to your Brizy site
A language switcher is a key component of every multilingual site. It will allow people to easily navigate the site in their own language.
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.
To take this even further you can also set automatic user language detection in TranslatePress by using an add-on. This will automatically redirect visitors to their own language preference based on IP or browser language.
TranslatePress offers multiple options for displaying the language switcher in different places of 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 Brizy Page Builder site
Translating Brizy Page Builder sites 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 pages and you’ll have your multilingual Brizy website ready 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.