The new Gutenberg editor which comes with WordPress 5.0 will bring major changes to how you create content. Luckily, building a multilingual website is just as easy as it was on previous WordPress versions thanks to WPML.
Gutenberg works seamlessly with themes such as Astra to allow you to build your content using separate blocks just like other well-known page builders.
The best part of combining it with WPML’s Advanced Translation Editor and its new auto-translation feature is that you can translate your pages without having to create new designs each time you add a new language. With Gutenberg and WPML you design your pages once and only once.
Once you have your website ready you might find you need to add other elements which are crucial for any website such as custom post types, custom fields and taxonomies. One of the best solutions is to use Toolset which works seamlessly with the other tools.
Before we go through exactly how easy it is to translate your multilingual website, let’s look at the tools and what they will each add to your website.
How Gutenberg will revolutionize your website building experience
Gutenberg brings one of the biggest updates to WordPress since its creation in 2002 and it will change the way you add content to websites.
Gutenberg’s block-based editing approach separates your content into little pieces which you can manipulate to fit your pages however you want. Gutenberg has a number of different blocks to help you separate your content such as Image, Columns and List.
Astra is a great theme to support Gutenberg
Astra is fully compatible with Gutenberg so you will avoid a large number of teething problems with the new editor by choosing it as your theme.
Astra combines an ease for customizing your website with a robust performance which means pages take less than half a second to load.
Not only will you be able to use Astra with Gutenberg seamlessly, but it makes sure that what you are viewing in the editor is exactly how it looks on the front-end. Regardless of the colors, typography or content width, it will appear identical on both ends.
WPML’s Advanced Translation Editor makes it simple to translate your content
WPML’s improved Advanced Translation Editor adds a number of important features which will dramatically reduce the amount of time it takes to properly translate your website.
Not only is translating your content easier, but WPML ensures you new pages automatically use the same design as the master language, saving you even more time.
Here are the new features of Advanced Translation Editor:
- Automatic machine translation: All of your content can be translated with just a click of a button. Of course, you will need to go through it afterward to ensure it is completely correct.
- Clean text: Say goodbye to annoying shortcodes and HTML getting in the way of your translating. All you will see is clean text and nothing else on Advanced Translation Editor.
- Add repeat text: Advanced Translation Editor will recognize any repeated text and will automatically add the translation.
- Glossary: You might have a lot of jargon which your translators may not understand. You can create a list of key terms which they can refer to as they work.
- Spell-checker: You will no longer be plagued by basic errors. Just like on Word or Google Docs you will be able to instantly spot and correct any spelling mistakes.
How to translate your content with WPML and Gutenberg
Translating content with WPML which you have created using Gutenberg could not be easier. We have already created a post called “The top 10 beaches to visit in France” in English using the Astra theme. Here is how it looks on the back-end with Gutenberg:
We now want to translate it into French. Let’s look through the steps.
Step 1: Enable French as a language on your website
We first need to make sure that we have activated French as a language for our multilingual website. If we head to WPML -> Languages and look under Site Languages, we check the option next to French.
Step 2: Open the French translation of the post on Advanced Translation Editor
On the back-end, we head to the English post which we want to translate. Under Translate this document, we can see that is now an option to create a French translation. Once we click on the plus icon we will be taken to the Advanced Translation Editor.
Step 3: Automatically translate your content
Now comes the fun part. Before we would have spent a lot of time manually translating the English text into French. Now, all we need to do is click Translate Automatically at the top of the screen and wait a couple of seconds.
Now we have all of our content translated into French.
Step 4: Check through our translated content
Even though we already have our French content, we still cannot blindly rely on machine translation. Therefore, we need to go through it to make sure there are not any errors.
Once we have done this, we click Finish and our content is ready to go with the same design as the English version.
We have just seen how we can translate a WordPress Post into another language. But what if we need other content sections which we want to translate? And if we need to build further advanced elements on top of what we have? This is where Toolset comes in.
Add Toolset to build advanced features with Gutenberg
If you want to add professional elements to your multilingual website then Toolset is the perfect plugin.
You can use Toolset to build advanced features including custom post types, taxonomies and custom search. The best part is that you will not need any PHP coding to build them.
Toolset is completely integrated with the other tools you will use to build your website. It is built by the team which brought you WPML. In addition, it is custom types ready with Astra and works with Gutenberg.
In fact, Toolset adds a number of additional blocks to Gutenberg to provide even more functionality to your website. One of these is content template block which allows you to add the same template for each of your post types.
Tell us what you think
Have you already used WPML, Gutenberg and Astra together to create a multilingual website? Have you tried to create additional advanced features using Toolset? Let us know in the comments below and we will respond to you!