How to build multilingual sites with Oxygen and WPML

Mohamed Khafaja

Updated

April 7, 2021

Oxygen is a visual page builder that enables you to control the styling and content of your site. This allows you to build advanced designs with Oxygen and translate texts using WPML.

Oxygen page in original content	Oxygen Page translated to French

What you need

• Multilingual CMS version of WPML. Install the WPML core plugin plus String Translation, Translation Management, and Media translation add-ons.
• Oxygen plugin

Essential Resources

• WPML’s Getting Started Guide can help you set up WPML in a few minutes. Then, you can refer to some of the subtopics in the guide such as String Translation and Finding strings that don’t appear on the String Translation page. We recommend that you keep the guide open while following this tutorial.
• Oxygen documentation provides you with all the information needed to use Oxygen’s different features.

Content

• Getting started
• WPML translation tools
• Translating Oxygen content (Basics, helpers, WordPress elements, and Design Sets)
• List of translatable Oxygen Builder elements
• Adding translation support for Oxygen Builder elements
• Translating Oxygen Re-Usable elements and Templates
• Adding an element to the page and updating the translation
• Updating an existing element and its translation
• Get help from our support
• Try WPML for free

Getting Started

• • Set up WPML from WPML → Languages. See our WPML Getting Started Guide for a complete reference. The initial three-step setup is simple and self-explanatory. It asks you to choose your default language, a set of active languages, and a language selector.
  • First, install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, and WPML Translation Management).
  • Install the Oxygen plugin and activate it.

WPML translation tools

WPML offers two translation editors you can use for translating your site’s content:

• WPML classic translation editor (CTE).
• WPML Advanced Translation Editor (ATE) offers affordable automatic translation, a glossary, spell checker, and more!

Besides translating your site content yourself, you can also:

• Send your content for translation to a professional translation service.
• Create your own team of local translators from the Translation Roles tab in Translation Management and assign translation jobs to them.

Translating Oxygen Builder pages

Oxygen Visual Builder comes with four elements: Basics, Helpers, WordPress elements, and Design Sets.

WPML allows you to translate your site in three convenient ways. You can produce the translation yourself, send content to translators, or send jobs to a professional translation service directly from your WordPress dashboard.

Scenario 1: Translate the content yourself

Here is page built using the Oxygen Builder:

To translate pages built with Oxygen Builder, follow the steps below:

1. Go to the default language page editing screen and click the + icon corresponding to the language you want to translate your page into. This takes you to the Translation Editor screen.

2. Fill in the fields with your translated content and mark them as completed and save all the changes.

This is how the translated page looks on the front-end:

Scenario 2: Send content to others to translate

WPML allows you to send your content to translators. Translators only see text that requires translation. There are two types of translators; you can add a WordPress user as a translator to your site or choose a professional translation service. This is explained in details on the page about translating your WordPress site.

1. Go to WPML → Translation Management and select the pages or a posts that you need to send for translation. In the “Select translation options” section, choose the translate option crosponding to the language(s) you want to translate your pages/post into then click the Add selected conent to translation basket button.

2. Go to the Translation Basket tab. Choose the local translator or the translation service you prefer and click the Send all items for translation button.

3. You can check the translation status by navigating to the Translation Jobs tab.

The translators or translation service receive a notification. Once the job is complete, the translation automatically appears on your site.

List of translatable Oxygen Builder elements

WPML supports translating the below elements using the translation Editor:

1. Heading
2. Text
3. Text link (with no translation support for URLs)

Adding translation support for Oxygen Builder elements

WPML allows you to add translation support for Oxygen Builder element’s shortcodes manually. This allows you to translate the content in these shortcodes.

You can define the element’s shortcode by adding it along with its attributes to the Custom XML Configuration tab on the WPML → Settings page. Check out our guide to learn more about defining page builder shortcodes.

Translating Oxygen Re-Usable elements and Templates with WPML

With the current WPML technical workflow, we do not support the translation of Re-Usable elements and Templates.

As a workaround to translate templates, follow the steps below:

1. Duplicate the default language template using a plugin such as Duplicate Page.
2. Go to the editing screen of the template that you duplicated and edit it using the Oxygen builder.
3. Add the translated text to the template and click Save.
4. Translate the default language page.
5. On the default language page editing screen, use the language switcher in the Top Admin bar to navigate to the secondary language editing screen.
6. Choose the template that you translated in step (2). Make sure you select the actual template for each page and not the “Default” option.



7. Click to Update the page.

Adding a new Oxygen element to the page and updating the translation

Let’s use Oxygen Visual Builder to add a new element to the page:

To translate the new element content, follow the steps below:

1. Go to the default language editing screen. In the language box, you can see the spining arrows icon wich indecates that the translation needs to be updated. Clicking the pinning arrows icon takes you to the Translation Editor screen.

2. Click the spinning arrows icon to update the translation This opens the WPML Translation editor. Fill in the fields with your translated content and mark them as completed and save all the changes.

As you can see, the new element is translated:

Updating an existing Oxygen element and its translation

Sometimes, you need to edit an existing element in the original language. However, what happens to your translation in this case?

Let us add some text to our heading:

Simply, translate the text that you added to the element by navigating to the Translation Editor screen.

The conent on the front-end is updated:

Getting help from our technical support

In case you need help translating your site built using Oxygen and WPML, visit WPML’s support forum.

Ready to get started?

Evaluate WPML for 30 days and see how you like it! In case you are not happy with it, we will refund your money without any questions within the 30-day trial period.