How to Create a Multilingual Website with Divi and WPML –

How to Create a Multilingual Website with Divi and WPML - WP Mayor

Need to create a multilingual WordPress website?

Given how connected the world is, it makes sense to offer your site in multiple languages if you’re targeting a global audience (or even just a small geographic area with a multilingual population, like California).

Thanks to WordPress’ versatility, it’s easy to translate your site into multiple new languages, as long as you have the right plugin to help.

In this post, we’re going to show you exactly how you can create your own multilingual site using the popular Divi theme and the WPML plugin. However, while we are going to focus on Divi for this tutorial, you could easily adapt this method to another theme if you prefer.

Let’s dig in!

What You Need to Create a Multilingual WordPress Website

To create a multilingual WordPress site, you’ll need the help of a WordPress translation plugin.

WPML, which we’ll use in this tutorial, is a premium translation plugin that comes with a suite of features to help you translate your site.

WPML

Enjoy a completely multilingual website with page load speeds that will keep your users from all over the world happy.


Get the plugin

You can use it to translate your site by yourself. Or, it also helps you work with freelancers or outsource your translations to professional translation services. Thanks to a recent update, you can even use machine translation on a piece-by-piece basis to save some time (while still being able to manually edit those translations).

It also comes with features to let you fully translate your site, no matter if you’re using page builders, WooCommerce, etc. In the tutorial below, we’ll specifically show you how you can use it to translate an entire Divi site, even if you’re using the new Divi Theme Builder feature in Divi 4.0.

How to Create a Multilingual WordPress Website With WPML and Divi

Now, let’s get into the actual tutorial and I’ll show you how you can create a multilingual website using WPML.

While WPML has different plans, you’ll need the $79 Multilingual CMS package to follow this tutorial – you can go here to purchase WPML.

We’ll also assume that you’ve already installed Divi (or whatever theme you want to use).

How to Create a Multilingual Website with Divi and WPML - WP Mayor 1

Divi

Try out the most popular WordPress theme and the ultimate page builder!


Try it for free

1. Install the WPML Components That You Need

To keep things lightweight, WPML divides its core features into separate plugins. This modular approach lets you choose how you set things up.

For this tutorial, you’ll want to install the following plugins:

Once you’ve installed all of the plugins, go to the new WPML tab in your WordPress dashboard to set up the basic features.

You’ll be prompted to go through a setup wizard where you can configure details such as your current site language, your destination translation language(s), your language switcher, and more:

How to Create a Multilingual Website with Divi and WPML - WP Mayor 2

Once you finish that, you’ll see a prompt to enable WPML’s Translation Editor for full Divi compatibility. Click the button to Enable it now:

Enable Divi translation

2. Set Up Translation Management

Next, you need to set up translation management. To do that, go to WPML → Translation Management and choose who will translate your site. For this tutorial, we’ll assume that you’re doing the translating, but WPML also lets you work with freelancers or translation services:

WPML translation manageent

On the next page, you’ll see a prompt to enable the Advanced Translation Editor, which is WPML’s new modern editor. While you don’t have to use this editor, it will make it easier to translate Divi Builder designs, so we recommend enabling it (and we’ll use it for the tutorial).

Advanced translation editor

Now, you’re ready to start translating!

3. Translate Content in the WordPress Editor (Posts/Pages)

Let’s start off with how to translate your posts and pages – this method will work whether you’ve created content with the native WordPress editor or the Divi Builder.

How to Create a Multilingual Website with Divi and WPML - WP Mayor 1

Divi

Try out the most popular WordPress theme and the ultimate page builder!


Try it for free

Open the editor for the piece of content that you want to translate. Then, look for the Language option in the sidebar. There, you should see a plus (+) icon, which is a prompt to translate this content into the listed language:

Add translation

Clicking this plus icon will open the WPML Advanced Translation Editor. Or, if you’re not using the Advanced Translation Editor, it will open the older classic editor. However, as we mentioned earlier, we recommend using the Advanced Translation Editor for Divi sites as it makes things a lot simpler.

In the editor, you’ll see a list of all the content in this post/page, along with an option to translate each string. Since we’re translating content built with the Divi Builder for this example, WPML also tells us where the content came from. For example, you can see that the “Name” string came from the Divi Form module:

WPML Advanced Translation editor

The Advanced Translation Editor also gives you the option to use automatic translation to save time, which you can perform by clicking the Translate automatically button. You get 2,000 automatic translation words per month for free with your WPML purchase and you can purchase additional credits if needed.

Once you’ve added all of the translations, click the Complete button in the bottom-right corner to go back to your WordPress dashboard.

And that’s it! You just translated your first piece of content. All you need to do is repeat the same process for other posts/pages on your site.

If you have a lot of content, another option is to use the WPML → Translation Management tool. This area quickly lets you see all of the content on your site, along with whether or not you’ve translated each piece of content yet (you can see this indicated by the icons).

This area also lets you add translations to your “translation basket”, which lets you assign these translations to freelance translators or external translation services:

Translation management

4. Translate Divi Projects

If you’re using the Divi theme’s built-in Projects post type, you can use the exact same approach to translate a project. That is, open the editor for the project item and then click the plus icon in the Language section:

Divi project

5. Translate Categories and Tags (Including Divi Project Categories/Tags)

WordPress categories and tags are called taxonomies. In addition to the built-in categories and tags, you can also have custom taxonomies, like the project categories and tags that Divi adds.

To translate all of these taxonomies, you can go to WPML → Taxonomy translation.

First, choose the taxonomy that you want to translate from the drop-down. For example, Project Categories. Then, you can translate all of those taxonomies by clicking the plus icon:

Taxonomy translation

6. Translate Divi Global Modules

With Divi’s global modules feature, you can create a single template and then reuse it anywhere on your site. The nice thing is that if you update this module once, those changes will automatically propagate to everywhere where you’ve used the global module on your site.

You can translate a global module just like you do a post or page. Open the editor for the global module and click the plus icon in the Language sidebar:

Global module

If you translate an individual piece of content that includes a global module, WPML will automatically pre-fill the global module’s translations so that you don’t need to duplicate your work.

7. Translate Divi Theme Builder Templates

As of Divi 4.0, Divi now includes full theme building. That is, you can use Divi to design the templates for your site’s header, footer, singles, and archives.

If you are using Divi Theme Builder, you can still translate any static text in those templates using WPML.

For non-static text, you would need to translate the piece of content itself or use string translation (featured later on). For example, if you use Divi to create a blog post template, you would translate the actual blog post content from the WordPress editor as we showed you in step #3.

Before translating a theme builder template, we recommend giving it a descriptive name while working in the Divi Builder:

Add template name

Then, to translate it, go to WPML → Translation Management and select the type of template from the drop-down. For example, to translate a Divi Theme Builder footer template, you’d choose Footer Layout. Then, click the Filter button to update the list.

You can then click the Edit link to open the editor page for that template. Then, you can click the plus icon just like we’ve shown you in other examples:

Translate Divi theme builder

To translate menus, WPML gives you two options:

  1. You can create separate menus for each language. This lets you either create the same menu in a different language or change the menu structure based on a user’s language (which can be useful for localization sometimes).
  2. You can “sync” the menus to make them identical and only translate the text using the sync feature.

To do this, go to Appearance → Menus and use the plus icon to create a new menu for a different language. Then, if you want to sync the menus, you can also click the option to Synchronize menus between languages:

Translate menus

9. Translate Other Strings (e.g. Theme Strings)

So far, we’ve shown you how to translate pretty much every aspect of your Divi site, from your content to your global modules, menus, and theme builder templates.

However, you still might have some remaining content. For example, content from other plugins, widgets, etc.

To manage all of these remaining strings, you can use the WPML string translation tool by going to WPML → String Translation

How to Create a Multilingual Website with Divi and WPML - WP Mayor 4

WPML

Enjoy a completely multilingual website with page load speeds that will keep your users from all over the world happy.


Get the plugin

Here, you’ll see a list of all the strings on your WordPress site. You’ll have already translated some of these strings, like text from a Divi Global module. In that case, you’ll see it marked with a pencil icon instead of a plus icon.

To help you find specific strings, you can use the In domain drop-down. For example, this drop-down lets you quickly filter out all of the widget strings:

WPML string translation

10. Translate a Divi WooCommerce Store (Optional)

This might not apply to all Divi websites. However, if you are using Divi to create a WooCommerce store, WPML can also help you translate all of your WooCommerce products and strings.

The process works much the same as we’ve detailed above, just adapted to WooCommerce.

For example, you can translate WooCommerce products from the product editor, product categories from the taxonomy translation tool, etc.

WPML WooCOmmerce

Create a Multilingual Divi Website With WPML Today

If your website targets a multilingual and/or global audience, it makes sense to create a multilingual website to offer a better experience to your visitors.

With Divi and WPML, you can easily create a multilingual site while still benefiting from Divi’s full visual site building. However, while we’ve focused on Divi, you can also use this same approach to translate any other theme (or page builder) – it’s up to you!

Do you still have any questions about using Divi and WPML to create a multilingual website? Ask away in the comments!

Keep reading the article at WP Mayor. The article was originally written by Colin Newcomer on 2020-12-30 07:00:00.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top