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.
A page built with the Divi Builder (wireframe view)
To translate, go to WPML → Translation Dashboard 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.
Translating the Divi page using the Translation Dashboard
Using the Language Configuration File
In the wpml-config.xml file, you can configure the following elements:
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:
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 and click on the Custom XML Configuration tab. Copy the content of your updated language configuration file to the editor and then click Save.
Adding the updated file to the Custom XML Configuration tab
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.
Adding the new module or the module that has an updated attribute to the test page
4. To translate the page with the button, you can use the Translation Dashboard. An alternative is using the Advanced Translation Editor (ATE), which can be useful when testing — it allows you to see the module tag for every Divi element on the page. To open ATE, go to Edit the page and click on the plus icon under the Language Box in the right sidebar.
Using the plus sign to open the Advanced Translation Editor
5. Check the elements, and add your translations or allow ATE to translate automatically.
Translating with the Advanced Translation Editor
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.
Known Issues
There are no unresolved compatibility issues between this plugin and WPML. Search all known issues.
Example of xml for Divi blocks in the language configuration file
