Creating a multilingual website can significantly expand your reach and cater to a global audience. Using the WPML plugin to translate your Divi Theme Builder templates ensures a seamless and professional presentation in all languages.
In this article, we will guide you through the process of using the WPML plugin to translate your Divi Theme Builder templates.
Using WPML, you can translate the Theme Builder Layout to multiple languages. The WPML plugin can be downloaded from https://wpml.org/.
Setting up WPML
If you're setting up WPML for the first time, please refer to our guide on creating multilingual websites using Divi or Extra and WPML.
This guide walks you through installing the necessary plugins, setting up your site's languages, and choosing who will translate your site.
We recommend using WPML's Advanced Translation Editor if you translate the site yourself or use local translators. It includes many great tools, such as automatic translation, translation memory, a spell checker, and more.
On the other hand, if you intend to use automatic translation, we recommend WPML AI for the highest quality translations. You’ll also find options for DeepL, Google, and Microsoft translation engines.
Enable the Advanced Translation Editor
Go to WordPress Dashboard → WPML → Settings
Scroll down to the Translation Editor section and ensure that the Advanced Translation Editor option is Enabled
Translating Theme Builder Layouts
Once you have WPML set up and your languages and translators chosen, translating theme builder layouts is pretty straightforward.
The process is the same whether you have created a header, footer, or body layout.
When creating your layouts, we recommend giving them descriptive titles so you can easily recognize which Layout you want to translate later.
Open any of the Template parts (Header, Body, or Footer)
Expand the Visual Builder Tool Bar by clicking on the Elipse icon
Click on the Gear icon
In the Content Tab → Title, type a descriptive title.
In the above example, I am going to translate the Global Footer Template.
Note: In the above example, I set my Global Footer Template to be named Site Footer EN. Usually, it is a good practice to add the language code. In this case, since the default language website is English, I have used EN.
Translate the Footer Template
To translate the Footer Template, follow the steps below:
Go to WPML →Translation Management
Scroll down to the Footer Template section and expand it
Select the footer template that needs to be translated by checking the checkbox on the left of the title
Scroll down to the Translate your content section and choose the Translate myself option for the Translation Method option
Click on the Translate button
Click on the Go to Translations option, or you can close the modal window and choose WPML → Translations
In the Translations page you will see the Footer template. Click on the Translate button.
Using the WPML Advanced Translation Editor, check or edit the translation using the right column
Ensure that the Translation progress is at 100%, and click on the Complete Translations button
Congratulations! At this point, the Footer Template will be translated. The same process can be used for translating a static footer template and/or Global Header Template.
Different Footer Layout on the Second Language
If you also want to make changes to the Footer layout, which was just translated, without affecting the Footer content and Layout of the original Language, follow these steps:
On the Frontend, switch to the Second Language
Activate the Visual Builder from the top of WordPress's Admin bar.
Once the Visual Builder is loaded, click on the Footer Layout and make the changes.
Have a look at this video to see how to use the second Language to make changes to the Footer Layout.
Not only is the content already translated, but we can also make changes to the design without affecting the original Footer Language - which was set for English in this case.
You can make styling and content changes, as you would normally do, without affecting the English Footer Layout.