WPML is a plugin that is used for translations. We also refer to it as the “Translation-function/tool” when communicating with you. It is used to easily create, connect and update pages when your website uses several languages.

As WPML is constantly updating and we want to give you the right explanation for Translation & Language Management, it is important to see if you are using their Advanced Translation Editor or not.


Image Placeholder
Translator 1


Image Placeholder
Translator 2


In case you see translator 2, some items might have to be updated in a different way. Ask someone at OHM to give you a short demo of it. 

1. The Basics

  • You will create the page in the default language in Elementor first.
  • After that you will insert translations of the parts of text through this plugin.
  • After you save these translations, the plugin automatically duplicates the page from the default language, but updates the pieces of text with your translations.
  • This means you will only have to create the page once in the default language and not need to manually create the page for the other languages.


1.1 Rules to Keep in Mind at All Times

  1. Update content (images, text, files) in a page in the default language → Use Elementor
  2. Change the layout of a page → Do so with Elementor in the page’s default language
  3. Update content in a translated page → Through the translation tool/plugin.

Importance

If you do not follow these instructions, you risk overwriting your own content (images or text)


2. Create New Translation

It is very important that you always first create the page in the default set language. Most of the time, that will be English. After that, you can create a translation to other languages by following the next steps.

  1. Hover to the “Pages”-tab and go to “All Pages“. Here you will see an overview of all the pages on your website. Behind the titles, it will show symbols as shown in the image above.
  2. Click on the plus symbol behind the page you want to add a translation for: (If you want to create a new page, do so first, in Elementor for the default language.) 
  3. After you click on the icon, the page opening should look similar to this:
  4. Fill out the empty fields in the specified language. Make sure you click on the Text-tab and fill in the text there in between the parts of code (if applicable).
    • We recommend copying the content from the default language, by using the icon in between the fields, and then adding translations in the Text-tab. In this way, if there is a code in the text, it will not get lost.
  5. Select the ‘Translation is complete-boxes underneath the text fields, when you are done adding translations for that part of text.
  6. Do not forget to press ‘Save and Close’ on the bottom of the page, to make sure all your translations are saved.
  7. The bar at the bottom of the page should be 100% and fully green. If not, you have not checked all boxes or updated all necessary content.
  8. Only when the bar is set at 100% will your changes be visible on the frontend. 
  9. Now the complete page will also be visible in the language you just added the translation for! You can add translations in this manner, for all languages your website is set up for.

3. Edit a Translation – Translating Pages

You can edit translations in the same way as you would add a new translation (explained above), only now it will show different icons behind the title, underneath the flags. 


3.1 When do you need to update a translation?

  • The plugin might show you different icons in the back-end. All mean something different, but action is only necessary when one of the last two icons is shown [of the image shown in Chapter 4, below].
  • These icons – the two arrows in a circle + the wheels – mean you have made changes to this page in the default language, and the translation needs to be updated in order for this change to also show in the translated pages.
  • Just follow the steps in the plugin again and press ‘Save & Close’ to make sure you save your changes.


4. What do the Different Icons mean

Source: WPML.org