WPML allows you to translate pages built with Divi. You simply need to create your page with Divi and then use WPML to translate the texts in your design.

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

Introduction

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.

What you will need

  • The Divi theme (version 3.0 or above).
  • A recent version of WPML (version 3.6.2 or above), including the String Translation, Translation Management and Media translation add-ons.

Essential resources

Content

Getting Started

  • Activate the Translation Editor : 
  • Set up WPML from WPML > Languages. See our WPML Getting Started Guide for complete reference. The initial, simple three-step setup is self-explanatory, asking you to choose your default language, a set of active languages, and a language selector. (For starters, choose the footer language selector; you can change this later.)
  • Install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management) first, followed by other WPML plugins that may depend on them.
  • Install the Divi theme and activate it.

Go to WPML -> Translation Management -> Multilingual Content Setup tab -> Check the box use the translation editor -> Save

Translate Divi with WPML

Activating WPML Translation Editor

Translating a page built with the Divi Builder (backend)

WPML allows you translate content in three ways. You can translate yourself, send content to your own translators or send jobs to a translation service.

Watch a short overview of translating and updating pages built with Divi in the following video:

 

Scenario 1: You do the translation yourself.

  1. Publish the page you just created with Divi. After publishing, the Language box will be displayed.
  2. Click the plus button for the language you wish to translate into.
    You can find these plus buttons in the Language box when editing your Divi page (in the back end), or on a listing page:
The plus located in the Language box when editing my Divi  page. The plus located under the flag in Pages -> All pages
Divi and WPML The + from the language box while editing a page Divi and WPML - the + from the listing pages

By clicking on one of these plus, you open WPML’s Translation Editor. Use it to translate the contents of your page and tick the box when the translation is complete as shown below:

WPML Translation Editor – Translating a page designed with Divi

When you’ve already translated, the plus icon changes to a pencil icon. Click on the pencil if you need to modify your translation.

WPML pencil icon to edit the translation with divi

The pencil icon replacing the plus if the translation is already made

 

Scenario 2: You want to send the pages to a translator.

WPML allows you to send your content to translators, directly from your WordPress dashboard. But first, you need to add translators to your site or to choose a translation service

You need to go to the WPML -> Translation Management page and select the content to translate (pages or posts).

Then, click to add the selected items to Translation basket.

Finally, on the Translation basket tab, you need to select translators that will translate the content.

The translators will be notified and they will translate on the WPML -> Translations page. The content will appear back in WordPress.

Translating a page built with the Divi Visual Builder (frontend)

In this part we will see how to switch from Divi Visual Builder to WPML Translation Editor.

  1. Create a Page and select Use Visual Builder

    translate divi with wpml

    Use the Visual Builder

  2. Design your page and Save it.

    Save your page

  3. Publish your page

    Design your page and add some Divi Modules

  4. Exit the Visual Builder

    Exit the visual builder

  5. Click on Edit Page, you will be redirected to your WordPress dashboard to do the translation

    Edit Page to access the translation

  6. Click on the plus in the Language box

    divi wpml

    The plus

  7. WPML Translation Editor will open

    WPML Translation Editor

  8. Fill in the fields and mark them as complete until you get 100% . Save and Close.

    Translation Complete

  9. In the front-end you see your Accordion translated:
Accordion in English Accordion in French
 

Translating the Divi Predefined Layouts

  1. On your WordPress dashboard click on Pages, then Add New.
  2. Click on Use The Divi Builder button.
  3. Click on Load From Library.

Load from library

  1. Scroll down and click on the “Load” button next to  “Homepage Corporate” , you can choose any layout you prefer.

Choose your predefined layout

  1. Click on publish.

    Publish the page.

  2. Now, the Language box is displayed, your homepage is ready to be translated:

    After publishing your page you see the WPML language box displayed.

    After publishing your page you see the WPML language box displayed.

  3. To translate, you need to click on the plus icon. You can find these plus buttons in 2 locations:
    – In the Language box when editing your Divi page (in the back end)
    – On the listing pages in “all pages”.

    The plus located in the Language box when editing my Divi  page. The plus located under the flag in Pages -> All pages
    Translate divi and wpml translate divi with wpml
  4. Click on the plus of your choice, it will open WPML Translation Editor:

WPML Translation Editor – Translating a page designed with Divi Builder

On the left you see the Divi Modules in the original language. On the right column, write down the translation in French and tick Translation is complete when you are done for each Module.

translate divi with WPML

Mark every translation as complete until you get 100%

 

Good to know: You can also send Divi Predefined Layouts to a translator as we explained in the previous part.

Updating a page and its translation

In this part we will see how to update your translation if you decide to modify the content of your page.

Scenario: I have added a new Module to my page and I need to translate it.

  1. Add a new Divi Module to your page. For this example it will be a Header Module.

    translate divi with wpml

    New Divi Module

  2. Click on Update.

    translate divi with wpml

    Always update the page

  3. In the Language box you see an arrow, not a plus anymore. The translation needs to be updated as you just added some new content to your English page. Click on the arrow to update the translation in French.

    translate divi with wpml

    The arrow

  4. You see WPML Translation Editor with new fields to fill in. Also note that the translation is back to 92%

    translate divi with wpml

    New Divi Module displayed in WPML Translation Editor

  5. Translate and mark all the translations as complete until you reach 100%. Save and Close.

    translate divi with wpml

    Translation completed

 

Important note about the new content added with Divi Visual Builder:
When you leave the Visual Builder to go to WPML Translation Editor, always click on the Update button of the page you just edited. This action will upload the new content to translate in the WPML Translation Editor.

Always update your page in the Backend

Translating pages, posts, post categories, custom post types and custom taxonomies

In a similar manner, you can translate all other pages and posts, including the custom post types “Projects”. For example, here is how to translate a post :

    1. Navigate to “Posts” and click on the plus icon.
translate divi with wpml

The plus to translate a post

2.The Translation Editor will open again:

wpml translate divi

WPML Translation Editor scree when you translate a post, including the category

Translating post categories

    1. Navigating to Posts -> Categories, as an example we will create a category and name it “En-Category” and click on the Add New Category button.
    2. Click on the category that we have created.
    3. Click on the add link to add the translation of the category.

add tranalation to catagory

4. Fill the Name, Slug and Description fields with the category translation and click on the Add New Category button.

add translated content to the catagory

Translating custom post types (Project) and Project categories

The custom post type “Project” can be translated using the same steps followed to translate the regular post. Also, the post project categories can be translated in the same manner as we translated the regular post categories.

Translating custom taxonomies

    1. Go to WPML > Taxonomy Translation
    2. Select Project Categories from the Select the taxonomy to translate drop-down menu.
    3. Click on the translate button to add the custom taxonomy translation by filling the required fields and then click on the “OK” button, as shown below.

Taxonomy Translation

Translating Divi’s theme text and other strings

To translate the theme strings, you will need to scan it for strings. This will register the strings for translation on the string translation screen. (Read more about Theme and Plugin Localization.)

This can be done by following the steps below:

    1. Go to WPML > Theme and plugin localization.
    2. Choose the Translate the theme and plugins using WPML’s String Translation option and click the “Save” button.

Translate the theme and plugins using WPML's String Translation

3. Click on the Scan the theme for strings button. This will register the theme texts for translation on the string translation screen. Check the illustration below.

Scan theme for strings

4. Now you can navigate to WPML -> String translation

Strings can be filtered by:

    1. Select which strings to display (Translation complete, Translation needed, Waiting for translator).
    2. Select a specific text domain.
    3. Search for a specific string by typing it in the search for: field and click the search button.
    4. Click on translations and add your translated text. Then choose the Translation is complete option and click Save.

String translation

Note that translating the theme options can be achieved by choosing admin_texts_et_divi string domain on the string translation screen.

Translating Divi’s theme options

Theme options can be translated using the string translation page. For example if we want to translate the Homepage custom title available in Divi’s SEO theme options.

theme options translation 1

Navigate to the String Translation page and choose the string domain admin_texts_theme_Divi, find your Homepage custom title and add the translated content then click on the Save button as shown below.

theme options translation 2

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 your languages. Follow these steps to create, save, translate and load your custom layouts:

    1. On your WordPress dashboard navigate to Divi > Divi Library and click on the add new button. Ensure that the main language switched in your WordPress dashboard is set to be your default language.
    2. Fill in the layout name and choose the Template Type: to be Layout

English LayoutCreate the layout structure that you prefer, in our example we will add a text module to the left and an image module to the right, then click on the Publish button:

translate divi with WPML

Publishing the custom layout

Again, click on plus in the language box:

Click the plus in the language box

The Translation Editor will open again with the Layout you just created:

WPML Translation EditorWhen loading these layout templates to your pages, you can load the English layout to your English pages and the French Layouts to the French pages. This can be done by:

    1. adding a new page > Click on the Use Divi Builder button > Click in Load From Library tab.
    2. Click on the the Add From Library tab and click on the Load button to load the English layout.

Load English Layout template

The same steps can be followed to add the translated layout to your secondary language(s) page(s).

Translating Divi’s menus

With WPML, you can easily synchronize between your languages’ menus. For more information, please check our full menus translation tutorial.

List of the Divi Modules currently translatable by WPML

By “Divi Modules”, we include the ones located in the Divi Predefined Layouts and in the Full Width Sections.
The following textual elements in the Divi Modules are supported by WPML and will automatically be displayed in the Translator Editor:

    1. Accordion
    2. Audio Player
    3. Bar counterBlog
    4. Blurb
    5. Button
    6. CTA
    7. Circle Counter
    8. Code
    9. Comments
    10. Contact Form
    11. Countdown Timer
    12. Divider
    13. Email Optin
    14. Filterable Portfolio
    15. Gallery
    16. Image
    17. Login
    18. Map
    19. Number Counter
    20. Person
    21. Portfolio
    22. Post Navigation
    23. Post Slider
    24. Post Title
    25. Pricing Table
    26. Search
    27. Shop
    28. Sidebar
    29. Slider
    30. Social Media Follow
    31. Tabs
    32. Testimonial
    33. Text
    34. Toggle
    35. Video
    36. Video Slider

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.

Getting help from our technical support

We have many supporters ready to help you in our WPML forum 6 days a week. They are trained on integrating WPML with Divi page builder.

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.