As you should already know if you read this blog, Divi is a smart and flexible multipurpose theme, which includes an easy-to-use page builder and a lot of predefined layouts that will help you create a website that suits your needs.
WPML is the plugin to use if you want to create multilingual websites. Used by all the professionals who need to offer multilingual sites in a simple and powerful way.
If you want to have a multilingual site, the integration of Divi with WPML will allow you to translate all the elements of the theme and the contents of the website effortlessly.
In this guide we are going to learn how to deliver multilingual sites with this winning combination of Divi and WPML.
If you have not used WPML before we will also see how to configure this plugin, both for Divi and for all types of content, and even for WPML online stores.
What do I need to translate a Divi website with WPML?
The first thing you need is to make sure that the Divi theme is installed and active, and you can check it in the administration of your WordPress, in Appearance → Themes.
You will also need several WPML plugins, all included in the Multilingual CMS price, for about $79 a year, and you can find them in the download area of your WPML account, they are these:
- WPML Multilingual CMS – The translation engine.
- String Translation – To translate parts of the theme or plugins you want to change.
- Translation Management – The internal translation and translator management system.
- Media Translation – To copy and translate all the media of your content.
- (Optional) WPML SEO – Integration with the main SEO plugins, to translate key phrases and meta
titleanddescription. - (Optional) WooCommerce Multilingual – If your site is an online store.
Tip: My advice is to install and activate all the plugins you are going to need before starting the WPML configuration, so they will start their wizards and will be configured just when they are needed.
WPML configuration
As soon as you install the WPML plugins and you have activated the main one (WPML Multilingual CMS) you will see a link to start the wizard, essential, and very easy to configure.
An important detail you should know is that no decision is irreversible, because you can change the settings later, but it is important that you follow the wizard because with a single setting you decide many more are automatically configured, and you will save a lot of configuration time. But we will show you how to configure most of it outside of the configuration wizard.
The first vital decision: choose the default language of the site, in which the original content will be, and from which you will have to add translations. By default WPML will display the language defined in the WordPress general settings. You can also decide into which languages you are going to translate your web.
In the next step it is important that you decide where the selectors will be displayed so that visitors to your site can switch languages.
If you choose to add a menu language switcher, the most common and recommended option, you can fully configure its appearance.
The next screen is to send data to WPML, in my opinion, we say no to it.
Next you may see several messages, like for example:
- If you have to install any additional plugins (like the ones I mentioned at the beginning).
- A warning with a link to translate the media.
- A warning with link to configure WPML for WooCommerce.
WPML Translation Tools
Once you have installed and activated the necessary WPML plugins you should know that there are two ways to translate your websites with WPML, depending on the translation tool you choose:
- WPML Classic Translation Editor – The classic WPML interface for translating websites and their contents (recommended).
- WPML Advanced Translation Editor – Offers automatic translations (up to 2,000 words for free), glossary, proofreader, HTML tags and more.
You may wonder why I recommend the classic editor instead of the advanced one, and it’s because the interface is much simpler, and you won’t get into trouble or additional expenses if you activate automatic translations, because a professional website should not have automatic translations, they should be created by professional translators or native speakers of the target language.
So, in the WPML configuration settings screen, activate the classic WPML translation editor and save the changes.
How to translate content created in Divi with WPML
Once we have chosen the translation editor (remember, the classic one) let’s go to what matters, to make our multilingual website translating its contents with this powerful system.
The best of all is that WPML is fully compatible with Divi and will allow you to translate any content created with it, whether it is a page layout with the Divi builder, projects, taxonomies and any customized element with the Divi theme builder.
The first step is to make sure that all the necessary components are active, you see them in the WPML settings page.
Simply click on the padlock of the items you want to be available for translation (see the list in the screenshot above) and configure it as suggested in the following image.
Save the changes and you are ready to start translating your content with WPML.
Whether they are pages, posts or projects, go through the management screens of these contents and you will see, next to the title of each one, some icons to add or edit the translations.
Clicking on the icon will open the translation editor, where you can check that all the fields of the publication are available, including the elements created with the Divi builder, ready for you to translate them.
The process is simple:
- Manually translate or copy (you have an icon between both sides of the editor) the original content to the target language.
- Mark the translation of each element as complete.
- Save the changes.
An indicator will show you the translation percentage of the content.
Another – less recommended – way to add translations is to open the publication (entry, page, project, etc.) by editing it normally, and from there click on the add translation icon, with the possibility of duplicating the content and then replacing it with the translated one.
I don’t recommend you to use this (old) method because it takes more steps, you will end up hating WPML, something that used to happen a lot in the old days, before the current classic translation editor.
In fact, if you have already started a translation, when you edit the publication, WPML will warn you that it is not convenient until you finish it, which I recommend you to do.
Once you have translated all the elements of your publications, you are not finished, you still need to do something fundamental: translate the media used, or even replace it.
How to translate custom Divi layouts with WPML
With Divi you can save your own designs and templates, and save them for use in other pages or even websites.
And yes, you can also translate these layouts with WPML, to have different custom layouts depending on the language.
The process is exactly the same as the one you would use to translate posts, pages or any other type of content with WPML, as we have seen before, there are no changes so I won’t get into it, just review the previous section.
Also when you translate a post or page that includes a design template that you have already translated, WPML will load the translated content in the translation editor.
How to translate Divi sections, rows and global modules with WPML
Another wonderful feature of the Divi builder is to set sections, rows or modules as global. This way they are added to your Divi library and you can easily insert them later in any other content you create, or export them for use in other websites.
The great thing about these global elements is that if you modify any part of it, it will appear modified in all the pages where it is inserted.
Well, as far as translation is concerned, it’s the same as always with WPML, the same way you would do with a post or page. Use the WPML translation editor to translate sections, rows or global modules just like we saw above.
Also when you translate a post or page that includes a global element that you have already translated, WPML will load the translated content in the translation editor.
How to translate custom Divi theme builder headers, bodies and footers with WPML
I do not forget the Divi theme builder, with which you can create fully customized parts of the theme for different pages or types of content and files.
This Divi functionality would not make sense if it could not be translated, your multilingual website would be lame, with important parts untranslated, but do not worry, you can also translate them with WPML, although the process varies a little with the usual for other types of content.
To translate custom parts with the Divi theme builder follow these steps:
- Go to WPML → Translation Management. Choose from the element type drop-down menu Header Template, Body Template or Footer Template, depending on what you want to translate, and click the Filter button.
- Click the Edit link under the list item you want to translate, this will open the page to edit it.
Once the editor is open (it will be the classic Divi editor), in the language section click on the “+” icon of the language you want to translate the theme element to.
It will open, as usual, the WPML translation editor, which you already know how to use, but in this case, I wanted to show you the advanced translation editor.
How to translate images and other media with WPML
According to Google’s guidelines, there is one fundamental rule for positioning a multilingual website in search engines:
All content that is supposed to be in one language must have all of its content in that language.
And something that many people forget to do is to “translate” the images and other media added to their supposedly fully translated content.
For this reason it is essential to install, activate and use WPML’s Media Translation plugin.
If you have already activated the Media Translation plugin you will have a screen where you can translate them (caption, title, etc.), in a WPML administration submenu.
As with pages and other content, use the icons to add or edit the translation.
So from the first to the last, it’s fundamental.
But you’re not done, because here you’re just translating what’s already there. But what if your media has text in it?
How to replace media with translated media
You are not finished because it is possible that there are media, usually images, that contain text in it, in which case they must be replaced by the corresponding image with the text in the target languages.
To do this simply edit the page/project/input/product/etc. by going to the type of content, selecting the language and enabling the visual builder.
Then, once on the content type with the new language(page in this example) edit normally and replace the media.
Are we done? I’m afraid not. Remember I told you before that everything needs to be translated?
There are still some things to be translated…
How to translate categories and tags with WPML
Something we should never forget to translate is the names of taxonomies, among which the most common are categories and tags.
Fortunately, again, WPML makes it easy for us with its own translation screen, at WPML → Taxonomy translation.
Choose one by one the taxonomy you are going to translate and they will be displayed in their own translation editor screen.
As with everything else, add or edit the translations and save the changes.
How to translate menus with WPML
Did you think we were done? Well no, you forgot about menus, they are also content, and they are seen on your website.
Fortunately, WPML also provides menu translation. And the first tool you should visit is the menu synchronization tool.
Synchronizes the detected menus by simply pressing the “Sync” button.
The next step is to go to the Appearance → Menus administration section.
Once the translation menu is active, add the translated elements, which will be the only ones available to add to that new translated menu.
So if you miss any page or category in the list of items you can add to the menu, you will have to translate them first in order to add them to your translated menus.
This also means that every time you translate a new item or content (page, post, category, etc.) and you want it to appear in your translated menus you will have to add them, either manually from the WordPress menu configuration screen or from the menu synchronization screen, don’t forget.
How to set up and translate WooCommerce with WPML
If your website also has products or is an online store created with WooCommerce, and you have installed the WooCommerce Multilingual plugin that I recommended at the beginning, you will see a wizard to configure the translation environment for everything you need for your E-commerce.
After the presentation, the first thing is the (automatic) translation of the base pages of any online store (store, account, etc.) into the configured languages. You do this with one click by checking the “Create missing translations” box.
After that you have to specify which attributes already existing in your products will be available for translation.
You can then enable multi-currency support in your store.
In the next step you have to make a very important decision: whether to show your products without translation or not.
My advice is to choose yes, because it is better to show a product in only one language than not to show it at all when the visitor switches to his language.
And with this you have finished the wizard.
Obviously, you must translate your products as soon as possible, and this would be the next step.
How to translate WooCommerce products and pages with WPML
Translating WooCommerce products with WPML is very easy. Just add or edit the translation from the WooCommerce Multilingual administration screen.
Open one product after another and add your translations to each of its elements.
When you are done mark the product translation as finished and save the changes.
You may be tempted to translate them from the product editor, but as I said with entries and pages, don’t do it, you will get into trouble.
Next check if the base pages of the store were translated, as we saw in the WooCommerce Multilingual setup wizard.
It is important that in WooCommerce base pages you do not remove or change the shortcodes that make them work. You can add content before or after but do not remove the shortcodes.
Finally, go to the URLs tab of the WooCommerce Multilingual store to add the corresponding translations.
Do not do this step by changing them from the WordPress permalinks settings, it is going to end badly.
We are almost done.
SEO with WPML
It is important that you understand and know how to correctly configure the WPML plugin for SEO, no matter if the theme is Divi or any other, or if you have WooCommerce installed or not.
The principles you should keep in mind are few but important:
- Use a good URL structure for SEO.
- Each page must have the correct HTML lang tag defined.
- On each page you must make hreflang goals with links to each translation of the page.
- All page elements must be translated.
- Define different title and description goals for each language.
And the truth is that WPML helps us with all these principles.
To begin with it automatically creates the HTML lang tag and hreflang goals automatically (points 2 and 3), and it does it well. You just need to make sure it loads them as soon as possible, and you adjust this in WPML’s languages SEO settings page.
Regarding the translation of all page elements (point 4), we have already seen in this guide that WPML offers us tools to translate everything: content, media, taxonomies, custom blocks, etc.
As for the optimal URL structure for SEO (point 1), this is configured in the WPML language URL format settings.
You can choose in directories or different domains, but as far as SEO is concerned never choose the option to add the language as a parameter, because search engine bots can do several things with these URLs with parameters, and none of them good:
- Omit the URL with parameters.
- Mark any URL with parameters as a duplicate of the original.
Also, these URLs are not pretty, nor easy to remember, so don’t use that option.
Important note: When you configure this URL formatting setting go to the WordPress permalinks settings and save changes without changing anything on that screen.
So we would only have to create different title and description meta tags for each translated content, and this is solved with the WPML SEO plugin, included in the WPML plan, which I told you at the beginning of this guide that we had to install and activate.
What this plugin does is to identify if you have specified these meta tags with your favorite SEO plugin and, if it detects them, it offers to translate them in the translation editor.
Simply – when you have installed and activated the WPML SEO plugin – edit the translation of your content and you will see, in the Custom Fields section, the fields to translate from your SEO plugin.
So simple and easy, it’s just a couple more elements to translate from your content. And if you want, you can also translate the target key phrase, for SEO analysis of the translated content, or any other field that your SEO plugin adds.
Best of all, it not only generates the translation of the meta title and description, but also the OG tags.
What about optimization? I’ve heard that WPML slows down websites.
To begin with, WPML and the rest of the plugins need to fully translate a website, that is a lot of code that, whether you want or not, will require more resources from your server, that is, more hosting, and will also generate more code in the resulting HTML of your pages, that’s just the way it is.
With this I mean that if you have a website in only one language, with a basic hosting, when you want to internationalize it, you should consider, or at least test, if you need a hosting plan with more resources on the server (RAM, processor cores, etc.).
The same is for WPML as for any plugin that has many features that need to be active constantly, and WPML has them.
And this with respect to resources, which is also optimization.
Now let’s go to the part of the loading of the pages, to the speed of your website…
On the one hand, the DOM (set of the web document model, everything necessary for a website to be displayed) increases in size because by offering the translation, and by increasing the HTML code, it will be larger, it will have more elements.
In addition, WPML can use scripts to:
- Identify if there are translations of the current page, and display the translation flag, for example.
- Add links to the translation (if you enable this option).
- Generate cookies that remember the visitor’s language.
- Automatically identify the visitor’s browser language and show the translation, if any (if you enable this option).
- More internal scripts to run the translation engine…
Some of these scripts you can choose not to load, but others will always load, because WPML needs to “know” if there are translations, which language selector to show, etc.
Some of these scripts also generate database queries, which can slow down the page load even more.
So how do I optimize WPML loading, is it possible?
The first thing to keep in mind so as not to consume more resources than necessary is not to activate languages that you are not going to offer for the moment. If you are only going to offer content in one language, do not activate more, you will be able to do it later when it is necessary or you are ready for it.
Next, do not activate more language selectors than are really necessary.
Each selector will load its own scripts and queries. My advice is to activate only the menu selector, which is the one that users are most used to.
Also, on the same WPML language page, if it is not absolutely necessary, leave the automatic redirection according to the browser language unchecked.
Once these decisions are made, optimizing a website with WPML is almost no different from optimizing any other website:
- Optimize image size and use new generation formats such as WebP or AVIF.
- Load images in a deferred way.
- Use cache for everything.
- Minimize all codes (HTML, CSS, JS).
- Delay JavaScript loading.
- Optimize fonts.
- Preload any external resource.
- Create the CSS critical path.
- Serve as much as you can from a CDN.
- Remove all unused CSS and JavaScript.
- All the other tricks and techniques we have seen in the section on optimizing WordPress.
There are no mysteries here, the usual: use only what you need, optimize as much as you can.
Well, this is as far as we have come.
I hope this guide on how to translate websites, Divi, WooCommerce, and a little bit of everything with WPML has helped you.
My initial idea was to explain only the part related to Divi, but I realized that for anyone who comes to this tutorial it would be important to know the whole environment of configuration and use of WPML, so in the end I got a total guide to WPML, what can I do, I get that a lot.
