Skip Navigation
December 2, 2020

Divi is a smart and flexible multipurpose theme, it comes with an easy to use page builder and a handful of pre-made layouts that will help you create the website that suits your needs. If you are willing to have a multilingual site, Divi’s integration with WPML will allow you to translate all the theme elements effortlessly.

Divi  Page in original content Divi Page translated to French
Translate divi with WPML Translate divi with WPML


Getting Started

Make sure that Divi theme is activated, by going to the AppearanceThemes page.

You will need the Multilingual CMS version of WPML. Start by installing the core WPML plugin. For most websites, you should also install WPML String Translation and WPML Translation Management.

WPML translation tools

WPML offers two translation editors you can use for translating your site’s content:

Besides translating your site content yourself, you can also:

Translating pages built using the Divi Builder

With WPML, you can translate any types of contents on your site, including pages and posts. For an easy start, read our Getting Started Guide.

Translating project pages and categories

To translate Project items or any custom post type items, you need to follow the same steps as for translating any other types of pages. Visit our documentation page for exact steps on translating the contents yourself.

Click on the plus icon to translate the Project page

You can translate your Project Categories on the WPMLTaxonomy Translation page. Select the Project Categories from the drop-down menu and a list of your categories will appear. Click the plus icon to translate a category for the respective language and use the dialog box that appears to add your translation.

Translate the categories using the Taxonomy Translation page

Keep in mind that the translations of categories are universal: if you make a change, they will be updated everywhere.

Translating texts from Divi theme, plugins and other places

Besides contents coming from posts and pages on your site, there are usually some texts coming from other places. Most common examples are themes and plugins.

To learn how to translate these texts, read our documentation page about translating strings.

Translating Divi’s custom layouts

With Divi, you can create your own layouts and save them to be used in different pages or posts. Check Divi’s documentation of Saving and Loading Custom Layouts. These layouts can be translated using WPML, you can even have different layouts for each language on your website.

Follow the same steps of translating posts, pages, and custom post types to translate Divi’s custom layouts.

When translating a page/post that includes the default layout template that you have already translated, WPML automatically preloads the translated content in the Advanced Translation Editor.

Translating Divi global modules, rows, and sections

Divi Builder offers setting a module, row or section to be global. This adds it to your Divi library and you can insert it into any page you want. Updating any instance of the global item will update all the items inserted into the different pages.

Follow the same steps of translating posts, pages, and custom post types to translate Divi’s global modules, rows, and sections.

When translating a page/post that includes a global item that you have already translated, WPML automatically preloads the translated content of the global item in the Advanced Translation Editor.

Divi’s Theme Builder allows you to create a custom global header, body, and footer.

Before you proceed with translating header, body, or footer layouts, we highly recommend that you give your layouts a descriptive name to easily distinguish which layout you want to translate on the Translation Management page. You can do this while editing your layout by navigating to the Layout Setting box and adding a descriptive name in the Title field.

Adding a descriptive title to the layout

To translate the Divi site header or footer you created from scratch using the Divi Theme Builder, follow the steps below:

    1. Navigate to WPMLTranslation Management. From the Element type dropdown menu, choose Header Layout or Footer Layout then click the Filter button.
    2. Click the Edit link under the header/footer you want to translate. This opens the header/footer editing page.
Navigating to the header editing page
    1. In the language box, click the plus icon corresponding to the language you want to translate your header or footer into. This takes you to WPML’s Advanced Translation Editor.
Clicking the plus icon to translate the header
    1. Translate the header content, click on the Finish button and then on the Complete button.
Translating the header content

This is how the translated header looks like on the front-end:

Translated header

Adding support for more Divi Builder modules

WPML allows you to manually enable the translation of additional Divi Builder elements and element attributes.

We removed the list of attributes below from all the Divi Builder element, as they hold links to background images and videos. Removing these attributes won’t affect the translation workflow as they will be copied to the secondary language page(s) and are displayed on the front-end.

  1. background_image
  2. background_video_mp4
  3. background_video_webm

If you want to have different background image/video for a specific element, follow the steps below:

  1. Navigate to WPMLSettings.
  2. Add the element short code and attributes to the Custom XML Configuration Tab. In our example we will add the background image and video attributes to the Call to action element.
Example - Call to action

This will allow the links to the image and video files to load into the Translation Editor page. You can translate them by linking to the secondary language image/video that you wish to add.

You can use the steps above to display the attributes of any element you want on the Translation Editor page.

You can find more information on the page about defining page builder shortcodes in the language configuration file.

Translating content coming from Divi add-ons

Divi has many useful add-ons and plugins that enhance its usability. While we are constantly working on expanding the support and the compatibility for these add-ons, not all of them are yet integrated with WPML.

In case of you run into a non-translatable add-on, we provide you with a workaround to manually integrate it with WPML. Follow the simple instructions provided on our page about integrating page builders that use shortcodes, with WPML.

Maintaining the Divi Builder Compatibility with WPML

We have prepared a documentation that explains how the Divi Builder works with WPML. Additionally, it explains the process of updating the language configuration file in order to maintain the compatibility between WPML and Divi builder. Feel free to check it here.

Getting help from our support

In case you need help translating your site built using Divi and WPML, visit WPML’s support forum.

Need help with building and maintaining your site?

If you need help with building or maintaining your site, take a look at our list of WPML Contractors. They are experienced developers specialized in developing multilingual sites.

You don’t have WPML yet?

You can test WPML for 30 days and see if you like it.
If you are not happy with our plugin, we refund you without any questions in the 30 days.

Buy and Download