WPML 3.7 presents new features that simplifies further the process of translating page builders. The following new features are added:

Preserving the existing translations when editing the default language page

You might want to update the default page texts for a specific element, change the texts’ position on that page, or add a new element. WPML preserves the texts that you have already translated. When translating the new texts that you have added to the default page, you can see that the old texts translations are already preserved in the Translation Editor page. You can simply add the translations to the new texts that you have added and click on the Save button to update the translation.

This is an example of how the existing translations are preserved using the Avia Builder (Enfold theme):

  1. Add a new page, and then add a Text Block to your new page. Publish the new page.
  2. Add a text block element to a new page

  3. Make sure that you are using the Translation Editor. You can check that by navigating to WPML -> Translation Management -> Multilingual Content Setup tab. Under the “How to translate posts and pages” section, choose the Use the translation editor option.
  4. Make sure the Translation Editor option is choosen

  5. Click on the plus icon found on the language meta box to translate your page.
  6. Click on the plus icon to add the translation

  7. Add your translated text, and mark it as Translation is complete. Once you have completed translating all the textual elements, click on the Save & Close button.
  8. Add your translated text and save

  9. Edit your Text Block. Add some texts to it, and then Save. Update the page.
  10. Edit the Text Block and add some more text to it

  11. The plus icon found in the language meta box is now a round arrow, indicating that new texts needs to be translated. Click on the round arrow icon to translate the text that you have added to the Text Block.
  12. Click on the round arrow icon to add translation to the added text

  13. The texts that have been translated are preserved. You can simply add the translation for the new text and mark it as Translation is complete. Click on the Save & Close button.
  14. As you see, The translation is preserved

Existing translations are preserved in a similar fashion for all the other integrated page builders.

Some of the page builder elements allow you to add links. For example, in the button element, when you add an internal link to one of the translated pages of your website, WPML detects that link automatically, and then connects that link to the translated version of the page without displaying it on the Translation Editor page. Once you have completed translating the other textual elements of the page from the Translation Editor page, and have saved the translation, you can see that the button on the secondary language page is linking to the translated version of that page.

This is an example of how the automatic translations for internal links work using the Beaver Builder:

  1. Add a new page, and then set your page title to “Internal Page.” Publish the page.
  2. Add a new page and set the page title to Internal Page

  3. Make sure that you are using the Translation Editor. You can check that by navigating to WPML -> Translation Management -> Multilingual Content Setup tab. Under the “How to translate posts and pages” section, choose the Use the translation editor option.
  4. Make sure you are using the translation editor

  5. Translate the “Internal page,” and click on the Save & Close button.
  6. Translate the internal page and save

  7. Add a new page, and then a Button element to it. Set your page title to “Internal Links Automatic Translation,” and the button link to “Internal Page,” which you have created. Save and Publish the page.
  8. Add a new page then add a button element to it linking to the internal page

  9. Click on the plus icon found on the language meta box to translate the page.
  10. Add your translated text and mark it as Translation is complete. Once you have completed translating all the textual elements, click on the Save & Close button.
  11. Translate the "Automatic link translation page"

    As you may have noticed only the button label text loads to the Translation Editor. The URL is linked automatically to the translated version of the page.

  12. Navigate to the translated version of the “Internal Links Automatic Translation” page and click on the “Enlace a la página interna” button. It takes you automatically to the Spanish version of the “Internal Page.”
  13. Automatic internal link translation front-end

Automatic internal links translations work in a similar fashion for all the other integrated page builders.

Copy-once mode for custom fields

Some of the page builders store the page/post settings in custom fields. Setting these fields to copy-once in the language configuration file allows one to set different settings for the translated content than the ones set for the posts and pages in the default language. For example, you might want to set the background color of the same element to yellow in the default language and blue in the secondary language. This setting can be achieved on the post/page editing screen. Note that the custom fields that are set to copy-once will not show in the Translation Editor page.

This is an example of how you can set different post/page settings for your translated and default pages, using the Fusion Builder (Avada theme):

  1. A- Add a new page and use the Fusion Builder to add a Title element to the page.
    Add a new page and add a title element to it
    B- The title element has a Design Options tab that allows you to customize the title design settings (size, title alignment, separator, and separator color). These design options are stored in a custom field that is set to copy-once mode in the WPML language configuration file. Setting these fields to copy-once mode allows you to set different options for your secondary language page.
    The design options for the title element
    C- The Fusion Page Options are also stored in custom fields and can be set differently from your secondary language page.
    Fusion page options
    D- Publish the page.
    Publish the page
  2. Make sure that you are using the Translation Editor. You can check that by navigating to WPML -> Translation Management -> Multilingual Content Setup tab. Under the “How to translate posts and pages” section, choose the Use the translation editor option.
  3. Use the translation editor

  4. Click on the plus icon found in the language meta box to translate the page.
  5. Click on the plus icon to add the translation

  6. Add the translated texts and mark the fields as Translation is complete. Then click on the Save & Close button.
  7. Add the translated text and save

  8. Navigate to the back end of the translated page, by selecting your secondary language from the admin bar language switcher.
  9. Navigate to the back-end of the secondary language page

  10. Click on the edit icon of the title element and navigate to the Design Options tab. The design options are copied from the default language. However, you can choose a different design setting. For example, set the Size to H3 instead of H2, and the Title Alignment to Center instead of Left. Click on the Save button.
  11. Change the title design setting on the secondary language page

  12. Click Update to save your changes.
  13. Click update to save the changes

    Let us examine the different designs for the Title element in the default and secondary language pages on the front end.

    Result on the front-end
    All the custom fields that set to copy-once work in a similar fashion.

Getting help from our technical support

WPML support team is happy to help you and trained on integrating page builders with WPML. If you have any issues or need our advice please create a new ticket.