Marine Larmier

April 26, 2019

How to Build a Multilingual Website with WPML, Gutenberg, and Astra

Multilingual website

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 WordPress language plugin 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 multi-language CRM 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.

Gutenberg is the new editor for WordPress

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.

Your content will appear on the back-end as it will on the front-end.

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 multi-language WordPress plugin – 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:

You can translate content immediately using the “Translate automatically” option.
  • 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:

Our English post, created using 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.

You can select from more than 40 languages or add your own.

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.

We have translated our content instantly using the “Translate automatically” option.

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 now have our French version with the exact same design as the English one.

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.

Easily add the same template for each of your post types using Toolset.

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!

Join 189,054 Subscribers

Get exclusive access to new tips, articles, guides, updates, and more.

About the Author

Passionate by WordPress and the travel industry, Marine is the Partnership Manager of WPML & Toolset. Digital Nomad, 5new adventures seeker, foodies addict, she's always looking for new challenges and deals to make anywhere in the world.

Sharing is Caring!
Share on facebook
Share on twitter
Share on telegram
Share on whatsapp

3 thoughts on “How to Build a Multilingual Website with WPML, Gutenberg, and Astra”

  1. I thought Astra and Beaver Builder were the best combo… Would Gutenberg offer any benefits that Beaver Builder would not? I imagine Beaver Builder and Ultimate Add-Ons would offer many more options and modules than Gutenberg.

    1. Hello Tim!

      Well, Beaver Builder is an external page builder that you will need to add into your website – whereas Gutenberg is the default editor. It sounds better to work with features that are already there.

      I agree that Beaver Builder with the Ultimate Addons for Beaver Builder lets you do far more things than Gutenberg alone. However, Gutenberg is still progressing and it will take things ahead. We too have a free addon for Gutenberg called the Ultimate Addons for Gutenberg that adds more blocks into the Gutenberg editor and allows you to create websites like the ones we offer among the ready-to-use sites for Gutenberg.

  2. Thanks for the informative write-up! I’m at a decision point whether to use WPML or GTranslate to translate an e-commerce site to French.

    The shop manager is a non-techie, and I don’t speak French. This new editor has me intrigued, but what about content made with Elementor? Does it also have a breezy translation experience (like with Gutenberg)?

    With GTranslate.io, the shop owner can pay $150/year and get neural translation, (apparently more accurate than typical machine translator), and neither party needs to dive in and fix much of anything.

    Has anyone tried GTranslate?

    Thanks!

Leave a Comment

Your email address will not be published. Required fields are marked *

Recommended Articles