How to build multilingual sites with Oxygen and WPML?

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

• WPML CMS Package (version 3.7 or above), WPML String Translation, WPML Translation Management.
• 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 Theme and Plugin Localization and String Translation. 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
• Translating Oxygen content (Fundamentals, Components, and Design Sets)
• 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.
• Add your Components & Design Sets license number in WordPress Administration, go to Oxygen -> License -> Components & Design Sets from your Oxygen account.
  A notification displays at the top of the WordPress administration, which enables you to easily activate the WPML Translation Editor with a single click. Simply click the Enable it now button in this message window:

Translating Oxygen elements (Fundamentals, Components, and Design Sets)

Oxygen Visual Builder comes with four elements: Fundamentals, WordPress, Re-Usable, Components, 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

When you create a page with Oxygen, you have two choices.
Either the page is rendered with a Custom Design, Just For This Page, or it is rendered with a Template.

Let us see how to translate the content rendered with Custom Design, Just For This Page.

1. Click on the Create Custom Template button.
2. You are taken to the front-end and Oxygen Visual Editor opens.
3. Design the page using Oxygen Fundamentals, Components, and Design Sets.
4. WPML’s Translation Editor is only available from your WordPress Administration. Once you are done creating your page, click on SAVE. Then, click the back to wp button.

Oxygen visual editor

5. A plus button will be displayed in the Language box, allowing you to translate your pages. You can find these plus buttons in the Language box while editing your page or on the listing pages.

The plus button when editing the page	The plus button from all pages

6. Click on the plus button to open WPML’s Translation Editor:

WPML Translation Editor

7. Use it to translate all the Oxygen elements on your page.
Important Note: check the box to indicate when a translation is complete as you need to receive the 100% Complete input to view the translation on the front-end.

Translation is 100% Complete

8. When the translation is completed, the plus button will change to a pencil button as shown in the following image.

The plus icon replaced by the pen icon

Scenario 2: Send content to others to translate

WPML allows you to send your content to translators. Translators only see text that requires translation.

1. There are two types of translators: you can add a WordPress user as a translator to your site or choose a professional translation service.

2. Go to WPML -> Translation Management and select the page or a post that you need to send for translation.

3. Click on the page of your choice to add the items you recently selected to the Translation basket.

4. Finally, on the Translation basket tab, you can assign translators of your choice.

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

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. You can translate them page by page, but not reuse the translation.

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

Let’s use Oxygen Visual Builder to add a new Component to your page: “Adding a subheading.”

Adding a new element to the page.

Then, follow the same steps as explained previously: SAVE your page and click on the back to the wp button from the Visual Builder.

The plus button for this page is replaced by an arrow button, implying that the translation requires an update.

The arrow replacing the plus

Click on this arrow to re-open WPML’s Translation Editor. All previous translations appear. Note that only the new Component “Adding a subheading” needs to be translated.

Only the new element needs translation

Once your translation is 100% complete, click on save and close. Your new Component is now translated from English to French.

Component in English	Component translated to French

Updating an existing Oxygen element and its translation

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

Let us add some content inside our H1 Component:

Adding some text to the original content

Simply translate the Component you just added.

The original translation is not lost

The front-end is also updated with the French translation as shown below:

Translation in French

Getting help from our technical support

Our WPML support team is trained on how to integrate the Oxygen page builder with WPML. If you run into any problems, create a ticket and our support team will be very happy to assist you.

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.