Translate Blocks Using WPML (Multilingual)

You can create multilingual sites using Stackable by using WPML. This article will teach you how to use WPML’s Translation Editor to convert a page with Stackable blocks to a different language.

If you’re unfamiliar with WPML, it is a Premium WordPress Multilingual Plugin that allows your entire site to be translated and switched from one language to another. This is perfect for when your site needs to be multilingual like many European, South American and Asian sites.

Important note: You will need  WPML’s Multilingual CMS plugin for this to work.

Setting Up WPML

Before we can begin translating our blocks, we will need to set up WPML first. Since we are going to translate our block’s contents using WPML’s Translation Editor, we’ll first have to enable it. Make sure that you activate the  WPML Multilingual CMS plugin under the Plugins tab.

After installing and activating the plugin, you will be redirected to the WPML set up wizard. You can refer to WPML's documentation for the step by step guide to get you started with your translations!

Upon setting up WPML, you will find yourself in the Translation page in the 4th step. This is where you can choose between the 2 workflows: Translate Everything mode to translate your entire site automatically or Translate Some to choose which pages you want to translate.

Translate Everything Mode

The new Translate Everything mode uses automatic translation to translate site content instantly and allows you to review and edit the translations before publishing. This makes the translation process faster and more affordable.

If you use the Translate Everything mode, you can choose from 3 review options:

1. Hold for review before publishing
2. Publish and add to review list
3. Publish without review

This feature translates pages, posts, custom post types, custom fields, taxonomies, WooCommerce products ONLY. Smaller texts like strings, menus, widgets, and form fields still need to be translated using String Translation. This is because there usually isn’t enough context for automatic translation to translate them effectively.

How it Works

On the Translation step in WPML’s set up wizard, choose the Translate Everything option along with your preferred translation reviewing option (Hold for review before publishing, Publish and add to review list, or Publish without review).

Note: If you wish to change the translation mode after setting it up, you can do so by navigating to WPML → Settings on your WordPress Dashboard.

Once you are done setting up WPML, it will start translating the site content in the background.

You can check the translation progress by navigating to WPML → Translation Management or by clicking the WPML logo in the toolbar on your WordPress Dashboard.

If the translation mode you chose was Hold for review before publishing, you will receive notifications to review the translated content on the Translation Management page or in the toolbar.

As you edit existing content or publish new content, it will be translated automatically.

To review the automatically translated content on your site’s front-end, click on the notification that shows on the Translation Management page. You will be redirected to the Translations screen where you will find a list of all the content that is waiting to be reviewed.

Click on the Review button in order to see the translated page on your site’s front-end.

After reviewing the page, you have the option to accept the translation if you are happy with it, or edit it using WPML’s Advanced Translation Editor.

On the Advanced Translation Editor page, you can see all the translations. Edit the parts that need improvement in translations. Afterwards, click the Complete button to publish the page.

Translate Some Mode

If you use the Translate Some mode, you can choose who you want to translate your site:

1. Only myself (admin)
2. Individual translators: Where you can form your own team of local translators
3. A Professional Translation Service
4. I want to set a "Translation Manager" who will choose the translators for this site

How it Works

Add Your Block

For this example, we’ll be using a Call to Action block and we’ll translate it to  German. Here’s the block we’ll use:

Open the WPML Translation Editor

To translate our block, scroll down to the bottom of your page and you will find the  WPML's Languages panel. Click on the plus sign (+) button on the language you want to translate your block/page to. This will open up the WPML’s Translation Editor.

Start Translating

Once WPML’s Translation Editor is open, it should contain all the text found in your page/post and should also contain the text inside your Stackable blocks.

The editor is straight-forward to use and provides on-screen instructions on how to perform the translations.

Once you complete your translations, go ahead and click on the  Finish button on the lower right corner of the screen.

Note:

If your content changed or you added more blocks to translate, click on the update button in the Languages panel.

If all the text cannot be seen, update your page and refresh the editor.

Translating URLS

If you want to translate your URLs, they are hidden by default. You have to search for "htt.. or http…" for the link to appear in the field.

Viewing Your Translations

After clicking the  Finish button, you will be brought back to your WordPress block editor. Save your changes view your post/page in the frontend.

Here’s what our original block looks like:

Here’s how our German block looks like:

Important Notes

• You will need WPML’s Multilingual CMS plugin for this to work.
• You do not need to perform the translations on a per-block basis. Once you enter WPML’s Translation Editor, the entire contents of your post/page will be available there for translation.
• Make sure there is no Custom XML Configuration for Stackable
• WPML has a tutorial in their site as well on how to perform translations for blocks