The compatibility of the Divi Builder with WPML is assured through the language configuration file. We’ll show you how to use this file to maintain compatibility.
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.
On This Page:
- How the Integration of the Divi Builder Works With WPML
- Updating the Language Configuration File
- Page Builder Shortcode Structure in the Language Configuration File
- Testing the Language Configuration File
To understand how the Divi builder works with WPML, let’s start by creating a simple page using the Divi Builder. We will add a few modules, such as a Text Block, a Blurb, and a Call to Action.
To translate, Edit the page and click the plus icon found in the Language meta-box in the right sidebar.
This will take you to the Advanced Translation Editor. If you have translation credits, you can translate your content automatically. If not, enter the translations for each sentence and click Complete once you’re done.
You might need to update the page builder shortcodes in the language configuration file for different reasons:
- Adding a new shortcode to the page builder;
- Adding a new attribute to an existing shortcode
- Removing an obsolete shortcode.
You can download the language configuration file from our repository. Add the shortcodes or attributes to the existing shortcodes within the language configuration file.
To extract strings from pages built using the Divi Builder and load them on the Advanced Translation Editor screen, we need to configure WPML to identify the shortcodes and attributes containing the strings that require translation. This is done by adding a file, called wpml-config.xml, which is typically placed in the root folder of your theme. For Divi, we are hosting the language configuration file on our servers. It is set to override the local configuration file placed in Divi’s root folder, ensuring that the configuration file is always up to date.
The wpml-config.xml file is also used to configure the following elements:
- Custom fields
- Custom taxonomies
- Admin texts / wp_options
- Language switcher configuration
- Page builder shortcodes
See our detailed documentation to learn more about the language configuration file structure and syntax.
As an example, let us see how we added the Call to Action shortcode to the wpml-config.xml file.
<shortcode> <tag>et_pb_cta</tag> <attributes> <attribute>title</attribute> <attribute>button_text</attribute> <attribute>title_phone</attribute> <attribute>title_tablet</attribute> <attribute>button_text_tablet</attribute> <attribute>button_text_phone</attribute> <attribute encoding="allow_html_tags">content_tablet</attribute> <attribute encoding="allow_html_tags">content_phone</attribute> <attribute type="link">button_url</attribute> <attribute type="link">link_option_url</attribute> <attribute type="media-url">background_image</attribute> </attributes> </shortcode>
The structure of the above example can be broken down as follows:
- All the shortcodes are wrapped with the shortcodes tag
- The shortcode tag wraps all the tags belonging to one, single shortcode.
- The tag tag defines the name of the shortcode, which in this case, is the et_pb_cta.
- Shortcodes can have one or more attributes; which is why we wrap them in the attributes (plural) tag and use the attribute (singular) tag to define the title of each attribute. In this case, we have the title, button_text, title_phone, title_tablet, button_text_tablet, and the button_text_phone attributes.
For shortcodes that include link attributes, you can make internal links automatically point to the translated version of that post by using the type option for the attribute. Here is an example:
<shortcode> <tag>et_pb_button</tag> <attributes> <attribute>button_text</attribute> <attribute>button_text_phone</attribute> <attribute>button_text_tablet</attribute> <attribute type="link">button_url</attribute> <attribute type="media-url">background_image</attribute> </attributes> </shortcode>
To test the updated language configuration file, follow these steps:
- Set up a site with both Divi and WPML activated. Make sure to also activate the String Translation and Media Translation add-ons .
- 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.
- 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.
- To translate the page with the button, Edit it and click on the plus icon in the right sidebar. This will take you to the Advanced Translation Editor.
- Make sure that the module textual elements are displayed in the Advanced Translation Editor.
- Fill in your translations and confirm them with the green check mark.
- If you want to translate the button link, begin typing the URL name in the Search Source search bar at the top of the page. Once you’re done adding the translation, click on the Complete button.
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.