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|
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.
- 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.
- Getting started
- Translating a page built with the Divi Builder (backend)
- Translating a page built with the Visual Divi Builder (frontend)
- Updating a page and its translation
- Translating posts, Portfolio, and taxonomies
- Translating texts from Divi theme, plugins and other places
- Translating Divi’s custom layouts
- Translating Divi’s global modules, rows, and sections
- Translating Divi’s menus
- List of the Divi Modules currently translatable by WPML
- Translating content from Divi adds-on
- Maintaining the Divi Builder Compatibility with WPML
- Getting help – WPML Forum
- Get help with building and maintaining your site
- Get WPML
Is your site already configured by your developer?
Check with them to make sure that the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management) are installed. Also, make sure that the Divi theme is installed and activated.
Are you setting up WPML yourself?
Then you need to follow the steps below.
- Set up WPML from WPML > Languages. See our WPML Getting Started Guide for a 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. Divi’s documentation will provide you with all the information needed to set it up and using its different features.
- Activate the WPML Translation Editor. To do this,
- Activate the WPML Translation Editor. Go to the WPML -> Settings page. There, check the Use the translation editor option under the How to translate posts and pages section and click Save.
WPML presents new features that simplify further the process of translating pages created using Divi Builder. The following new features are added:
- Preserving the existing translations when editing the default language page
- Automatic Translation for internal links
- Copy-once mode for custom fields
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:
- Publish the page you just created with Divi. After publishing, the Language box will be displayed.
- 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|
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:
When you’ve already translated, the plus icon changes to a pencil icon. Click on the pencil if you need to modify your translation.
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.
In this part we will see how to switch from Divi Visual Builder to WPML Translation Editor.
- Create a Page and select Use Visual Builder
- Design your page and Save it.
- Publish your page
- Exit the Visual Builder
- Click on Edit Page, you will be redirected to your WordPress dashboard to do the translation
- Click on the plus in the Language box
- WPML Translation Editor will open
- Fill in the fields and mark them as complete until you get 100% . Save and Close.
- In the front-end you see your Accordion translated:
|Accordion in English||Accordion in French|
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.
- Add a new Divi Module to your page. For this example it will be a Header Module.
- Click on Update.
- 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.
- You see WPML Translation Editor with new fields to fill in. Also note that the translation is back to 92%
- Translate and mark all the translations as complete until you reach 100%. Save and Close.
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:
- Navigate to “Posts” and click on the plus icon.
2.The Translation Editor will open again:
- 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.
- Click on the category that we have created.
- Click on the add link to add the translation of the category.
4. Fill the Name, Slug and Description fields with the category translation and click on the Add New Category button.
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.
- Go to WPML -> Taxonomy Translation
- Select Project Categories from the Select the taxonomy to translate drop-down menu.
- 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.
Besides contents coming from posts and pages in 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.
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:
- 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.
- Fill in the layout name and choose the Template Type: to be Layout
The Translation Editor will open again with the Layout you just created:
When 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:
- adding a new page > Click on the Use Divi Builder button > Click in Load From Library tab.
- Click on the the Add From Library tab and click on the Load button to load the English layout.
The same steps can be followed to add the translated layout to your secondary language(s) page(s).
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 on different pages.
Translation support for global modules, rows and sections is featured in:
- WPML Multilingual CMS (4.0.5 or above)
- WPML String Translation (2.8.5 or above)
- WPML Translation Management (2.6.5 or above)
We have created a simple page using the Divi Builder. The page includes a text module and a Call to action module we set as a global module.
To translate the global module follow the steps below:
- To translate the global module texts navigate to Divi -> Divi Library. Click the + icon to translate the global module in the desired language. This will take you to the Translation Editor page.
- Enter the translated texts and select the Translation is complete check box. Once you complete translating the texts, click the Save & Close button.
- Navigate back to the content editing page where you have created the global module. Click on the + icon found in the language meta box to translate the page. This will take you to the Translation Editor page.
- You will notice that the global module translated texts are preloaded into the translation fields. Add the translated texts for other elements on the page, tick the Translation is complete checkbox for each field and click Save & Close.
Let’s view the translated page on the front-end:
You can translate Divi’s global rows and sections following the exact same steps above.
You can insert the translated global module, row or section into any page on your website without worrying about translating its texts. Simply, click the + button to translate the page content. The translated global item texts will be preloaded in the Translation Editor page. Translate the texts for the rest of the page and mark all the translated fields as Translation is complete.
Editing global item texts in the default language requires updating the translation of the global item. We have updated the global item text in the default language page.
To update the translation of the global module, follow the steps below:
- Navigate to Divi -> Divi Library. Click the spinning arrows icon to update the translation. This will take you to the Translation Editor page.
- WPML preserves the translated text. Simply translate the new texts you added, tick the Translation is complete check box, and Save & Close.
This will update the translation of the global module in all the pages where the module is inserted.
By “Divi Modules”, we include the ones located in the Divi Predefined Layouts and in the Full Width Sections.
The textual elements in the following Divi Modules are supported by WPML and will automatically be displayed in the Translator Editor screen and can be sent to professional translation services:
- Audio Player
- Bar counterBlog
- Circle Counter
- Contact Form
- Countdown Timer
- Email Optin
- Filterable Portfolio
- Number Counter
- Post Navigation
- Post Slider
- Post Title
- Pricing Table
- Social Media Follow
- Video Slider
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.
If you want to have different background image/video for a specific element, follow the steps below:
- Navigate to WPML -> Settings.
- 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.
<wpml-config> <shortcode> <tag>et_pb_cta</tag> <attributes> <attribute>background_image</attribute> <attribute>background_video_mp4</attribute> <attribute>background_video_webm</attribute> </attributes> </shortcode> </wpml-config>
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.
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.
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.
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.
If you are working with a developer for your site, please use our Translation support forum to get help with translating your site’s content.
If you are setting up the site and WPML yourself, please use our Technical support forum.
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 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.