Divi is WPML ready. That means Divi can be translated into other languages, creating a multilingual website. This includes layouts made with the Divi Building from the backend or frontend, Divi modules, and all of the WordPress elements such as menus and post types.
WPML is fairly simple to set up with Divi and can open your website up to multiple audiences across the globe. In this article we’ll walkthrough how to implement WPML into your Divi website and see just how simple it actually is.
What WPML Does
WMPL doesn’t translate your website for you. Instead, it creates multiple versions of the same content and delivers the version based on the language of the reader. Links to each version are available on the website and on the individual posts themselves so your readers can choose the version of the post they want to read.
Setting Up WPML
Your first task of course is to purchase WPML. This will give you several downloads. Upload the plugin and activate as normal (go to Plugins in the dashboard, select Add New, and select Upload and upload the file).
I recommend uploading only the WPML Multilingual CMS file. The plugin will then you’re your download and activate the rest of the add-ons. If you’re using it with WooCommerce be sure to have it active before installing WPML.
Once the plugins are activated you’ll register the plugin. Click Configure WPML and enter your information.
Choose your content language and click Next.
Select the languages you want to translation your content into. You can select as many translation languages as you want.
Set up the Language Switcher options to order the languages and add the switcher for the menu, widgets, footer, and links.
Finally, enter your registration key.
To work with Divi, WPML requires two additional plugins:
- String Translation – lets you translate strings such as tagline, widgets, etc.
- Translation Management – a translation management interface where you can interact with translators and translation services.
Installing the Add-ons
Select Configure from the plugin screen and choose the plugins from the list. Select Activate After Download and click the Download button.
Translation Management Setup
To set up Translation Management, go to WPML, Translation Management in the dashboard and select the Multilingual Content Setup tab. Here you can choose to create your translations manually or use the translation editor.
WPML doesn’t do a machine translation. You can do the translating yourself or have someone else, such as a translation service, do it for you. Once the plugins are installed and activated you’ll see a note in the right side that says the operation is complete. You are now ready to use WPML with Divi.
For the example in this tutorial I’m recreating a portion of the Divi sales page.
Before you publish you’ll see a new box called Language. Here you can choose your languages. This will have a new feature after you publish the post.
Here’s the page that I’ve created. For my example this page will be converted into Spanish.
Doing the Translation Yourself
After you publish your page or post you’ll see a Language box in the editor. It works great with layouts created with the Divi Builder.
If you’re publishing from the frontend you’ll need to exit the Visual Builder after publishing and edit the page from the backend and click the plus next to the language you want to translate into. You can also find this button in the list of all posts. This will open the translation editor.
Translate the content by filling in each of the fields. Be sure to check the box to show the field is complete.
When you’re done place a check in Translation is Complete and save your work.
You can edit any of your translation work by selecting the pencil next to the item to edit.
The translation process is the same whether you’re using your own designs or Divi’s Premade Layouts.
The page is now available in Spanish (my translating skills might need some work. Okay, I cheated and used Google Translate). It includes a link to see the article in English.
Using a Translator or Translation Service
Rather than performing the translation yourself, you can assign the task to a translator or translation service directly from your WordPress dashboard. In order to use this you’ll have to either add translators to your list or select a translation service.
Adding Translators and Services
For a local translator create a User for your website that you want to assign translations to. You can assign them any user role you want. In the dashboard go to WPML, Translation Management and click on Your Translators.
Select Add Translator and choose the From and To languages from the dropdown boxes. You can edit this later. Type in the name of the User you want to assign the translation to and click Add translator.
You can now assign work to this translator. The process for the translators is exactly the same as if you were doing the translation yourself using the translation editor.
Translation Services are set up from the Translation Services link. You select the services you want from the dropdown box in the same way as local translators.
Sending the Article to a Translator
Add the selected items to the translation basket.
In the Translation Basket tab select the translators that you want to perform this translation. This will notify the translator. You can also leave it as default which will assign the work to the first available translator.
The translator can use the translation editor or export and import the file. Once they’ve completed the work they can mark it as complete.
You’ll see it completed in the Translation Jobs list and receive an email reporting the completed task.
Editing Pages and Posts
Once you’ve published and translated a post you can still edit it. If you add modules your translation will show that it needs an update. Before leaving the Divi Builder and going to the Translation Editor be sure to save first.
In my original example I didn’t include the page title within the layout. I decided to add it using a module. Once I’ve added it the module will need to be translated.
Once you’ve updated your page or post you’ll see that the translation needs to be updated. You can either update it manually or send it to a translator. For manual translation click on the arrow in the update field.
When you open the Translation Editor you’ll see the portions that have not been translated. Their fields will be empty and they will not be marked as complete. Perform the translation the same as before. Once you’ve made the update mark it as complete and save your work.
To send the job to the translator, go to the Translation Management tab and select the post to be updated and click Add to Translation Basket.
The result is an updated page complete with translation and links to the various languages the post is available in.
All of the textual elements in the Divi modules can be translated. It’s up to the translation editor to recognize the module. This even includes elements such as image alt tags. Here’s the list of modules the translation editor will recognize:
- 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
All Divi custom layouts can be translated including those you’ve uploaded and those you’ve created. This even includes global layouts. The layouts can be saved and reused. You can have different layouts for different languages. Go to Divi, Layouts, and click Add New. Click Submit and create your layout.
Create your layout just like you would any page or post.
Once you’ve updated your layout, click the plus button under Translate and perform your translation as with any post. Now you can load them from your library into the language for that page. For example, I can load the English version into an English page and the Spanish version into a Spanish page.
Menus can also be translated, but they’re done differently. Instead of translating the menu, you’ll create a new menu in a different language and connect them. Choose the menu you want to translate (go to Appearance, Menus). In the upper right corner select the language you want to create a menu for.
Select the language and which menu it’s a translation of, then create a new menu to be linked to the translated menu.
Taxonomies, Custom Post Types, Theme Strings, and More
All custom post types and projects can be translated as well. Many post types, such as projects, work the same as posts and pages. Some, such as WooCommerce product post types, will require an add-on.
The WooCommerce post type requires the WooCommerce Multilingual add-on. It works the same as any post or page. Simply click the translate button to translate using the translation editor, or send it to your favorite translator using the translation manager.
Here’s a look at a product page in Spanish.
In the dashboard go to Posts, Categories. Here you can either create a new category or select a category to edit. At the bottom of the screen you’ll see Language added to the category field. Select the language you want and click Add.
Here you can create the category in the new translation. Click Add New Category when you’re done.
Divi Theme Text
Divi’s theme text is translated using String Translation. In the dashboard go to WPML, Theme and Plugins Localization. Choose Translate the theme and plugins using WPML’s String Translation and click Save.
Scroll down and click Scan the theme for strings.
Go to WPML, String Translation. Select the strings to display and the text domain. You can also search for strings. Click Translations and add your text. When you’re done, click to show the translation is complete and click Save.
Divi Theme Options
Go to Divi, Theme Options and choose the tab you want to translate. Go back to String Translation and look for that field, add the translation, and click Save.
Divi is fully WPML compatible. This includes modules, theme files, taxonomies, and of course content. Adding WPML isn’t that difficult and the translation management add-on is a great way to assign translation tasks to local translators or translation services. Using WPML, Divi can easily make your website readable in practically any language, giving you a global audience.
Do you use WPML with Divi? Let us know about your experience in the comments below.
Featured Image via Qvasimodo art / shutterstock.com
The post How to Create a Multilingual Website with Divi and WPML appeared first on Elegant Themes Blog.