Maintaining the Divi Builder Compatibility with WPML

Learn how to maintain compatibility of Divi modules with WPML through the wpml-config.xml language configuration file.

This documentation is intended for the Divi development team and web developers using Divi. It explains the process of maintaining the compatibility of the Divi Builder with WPML, which is done by updating the language configuration file.

This page refers to Divi 5 which stores content as Gutenberg-compatible blocks (Divi 4 used to use shortcodes).

How the Integration of the Divi Builder Works With WPML

To understand how the Divi builder works with WPML, let’s start by creating a simple page using the Divi Builder. We added a few modules in our example below, such as Text, a Number Counter, an Icon, etc.

To translate, go to WPML → Translations and find the page under the Pages section. Select it and click Translate your content to select the translation method. If you have automatic translation credits, you can translate this page automatically in minutes.

Using the Language Configuration File

In the wpml-config.xml file, you can configure the following elements:

• Page builder blocks
• Custom fields
• Custom taxonomies
• Admin texts / wp_options
• Language switcher configuration

For more information about structure and syntax, see our language configuration file guide.

Getting the configuration file for Divi

Configuring the wpml-config.xml file extracts strings from pages built using the Divi Builder and loads them on the Advanced Translation Editor. Use this file to add new block types and attributes, as well as remove obsolete block types. 

You can download the language configuration file from our repository and place it in the root folder of your theme once configured. 

We’re hosting the language configuration file for Divi on our servers, so it overrides the local configuration file placed in Divi’s root folder. This ensures the configuration file is always up to date.

Configuring Blocks in the Language Configuration File

Divi 5 uses block syntax, so registering Divi modules for translation is similar to the process for translating Gutenberg Blocks:

• All block definitions are wrapped inside a <gutenberg-blocks> parent element. 
• Each individual block is declared with a <gutenberg-block> element,where the type attribute corresponds to the block’s registered name.
• Translatable fields are declared as <key> child elements.

Let’s take the example of a Divi Call to Action module:

<!-- wp:divi/cta {"module":{"title":"CTA","button_text":"Contact Us","button_url":"https://example.com/contact/"}} /-->

Here’s how it’s configured in wpml-config.xml:

<gutenberg-blocks>
    <gutenberg-block type="divi/cta" translate="1">
       <key name="module">
         <key name="title" />
         <key name="button_text" />
         <key name="button_url" type="link" />
       </key>
    </gutenberg-block>
</gutenberg-blocks>

The structure breaks down as follows:

• The <gutenberg-blocks> element wraps all block definitions.
• A <gutenberg-block> element defines a single block type, identified by the type attribute. The translate="1" tells WPML to process this.
• Each <key> element identifies one translatable field: title and button_text for plain text fields, and button_url for a link.
• The type="link" attribute tells WPML to automatically replace the URL with the translated version of the linked post or page.

Testing the Language Configuration File

To test the updated language configuration file, follow these steps:

1. Set up a site with both Divi and WPML activated. Make sure to also activate the String Translation and Media Translation add-ons .

2. To override the remote language configuration file with the updated version, navigate to WPML → Settings → Custom XML Configuration. Copy the content of your updated language configuration file to the editor and then click Save.

3. Create a new page, and add the new module(s) to it. If you updated some attributes for existing modules, add these to the page as well. In this example, we will assume that the Button module was newly added to the Divi Builder. Add it to the page and then click Publish.

4. To translate the page with the button, you can use the Dashboard tab of WPML → Translations. An alternative is using the Advanced Translation Editor (ATE), which can be useful when testing: it shows the module’s texts as fields under the page’s content, so you can check that each of them reached the job. To open ATE, go to Edit the page and click on the plus icon under the Language Box in the right sidebar.

5. Check the elements, and add your translations or allow ATE to translate automatically.

Now, you can take a look at the translated page on the front-end. The translated page should show all the translated strings, implying that the updated language configuration file is working properly.

In case you are encountering any issues, please contact our compatibility development team. They will be happy to check issues related to the language configuration file.

Once done with the tests, please submit a merge request to our repository. Our compatibility developers will receive your requests and review it.