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|
- Getting started
- WPML translation tools
- Translating pages built using the Divi Builder
- Translating project pages and categories
- 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 custom global header and footer
- Adding support for more Divi Builder modules
- 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
Make sure that Divi theme is activated, by going to the Appearance → Themes page.
Make sure that the WPML Multilingual CMS, WPML String Translation, and WPML Translation Management plugins are activated.
WPML offers two translation editors you can use for translating your site’s content:
- WPML classic translation editor (CTE).
- WPML advanced translation editor (ATE) offers automatic translation, a glossary, spell checker, and more!
Besides translating your site content yourself, you can also:
- Send your content for translation to a professional translation service.
- Create your own team of local translators from the Translation Roles tab in Translation Management and assign translation jobs to them.
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.
Watch a short overview of translating and updating pages built with Divi in the following video:
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.
Project Categories can be translated while translating your pages, on the Translation Editor screen. There, you can translate the Project elements as well as your Project Categories.
Additionally, you can translate your Project Categories on the WPML → Taxonomy 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.
Keep in mind that the translations of categories are universal: if you make a change, they will be updated everywhere.
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.
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 Translation Editor page.
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 Translation Editor page.
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.
To translate the Divi site header or footer you created from scratch using the Divi Theme Builder, follow the steps below:
- Navigate to WPML -> Translation Management. From the Element type dropdown menu, choose Header Layout or Footer Layout then click the Filter button.
- Click the Edit link under the header/footer you want to translate. This opens the header/footer editing page.
- 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 translation editor page.
- Translate the header content, click on the Finish button and then on the Complete button.
This is how the translated header looks like on the front-end:
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.
In case you need help translating your site built using Divi and WPML, visit WPML’s 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.