With both theme and plugin versions, Divi is one of the most popular and flexible ways to build a WordPress site. But while Divi gives you a ton of design flexibility, there’s no built-in way to translate Divi sites, which is why you’re probably here reading this post.
In this tutorial, you’ll learn how to translate a Divi site using the free version of the TranslatePress plugin.
If there’s one thing Divi users love, it’s visual design, and TranslatePress brings that same visual approach to creating a multilingual site with Divi.
By the end of this post, you’ll be able to use a visual interface to translate all of your Divi content, including images, forms, buttons, and more, by simply pointing and clicking on a live preview of your site:
Ready to learn how to translate any Divi website? Let’s dig in…
*This method will work for both the theme and plugin version of Divi.
How to Translate Divi Sites With TranslatePress: Step-by-Step
Here’s a bird’s eye view of the process of creating a multilingual site with Divi:
- Design your content using the Divi Builder
- Set up the basic TranslatePress settings
- Use TranslatePress’ visual translation editor interface
- Add a frontend language switcher to your multilingual Divi site
1. Create Your Content With Divi
Divi comes in both a theme and a Divi Page Builder plugin version. Either way, you’ll be able to use a visual, drag-and-drop interface to design your content. Or, you can also use an abstract backend interface if you prefer that approach.
To get started, use Divi to create all the content that you want to use on your site. Don’t worry about language right now – just create the content in what you want your site’s default language to be.
For this tutorial, we’ll choose one of Divi’s many premade layouts as it will provide lots of example content for us to translate. You can also build your content from scratch, though – it’s totally up to you:
Divi comes with over two thousand pre-built templates, along with 342 dedicated “Layout Packs”, which are basically a themed set of templates for a specific website niche.
After importing the homepage template from one of the electrical services website layout packs and customizing it a bit, here’s what our Divi site looks like:
Feel free to customize any of the content and rearrange it as needed using Divi’s drag-and-drop interface – no matter what elements you add with Divi, you’ll be able to translate everything with TranslatePress in the next steps.
You can edit any of the text, change styling, add forms, sliders, etc. Knock yourself out!
2. Configure Basic TranslatePress Settings
Once you’re finished with your Divi content, you’re ready to translate it with TranslatePress.
Before you do that, though, you need to perform a few basic housekeeping steps, like choosing which languages you want to offer your Divi content in.
To get started, install and activate the free TranslatePress plugin. Once you’ve activated the plugin, go to Settings → TranslatePress to configure the basic settings.
Your first choice is which languages to use on your site. Use the Default Language drop-down to choose the language that your site currently exists in (e.g. English). Then, use the All Languages section to add as many new languages as needed.
The free version of TranslatePress lets you add one additional language, but you can upgrade to the paid version to translate your Divi content into unlimited new languages:
Another important choice here is whether or not to use machine translation, which you can configure from the Automatic Translation tab.
If you want to save some time, you can use the Google Translate API to automatically translate 100% of your site’s content, including all your Divi content. Then, you can go back and manually refine your translations where it’s needed:
The premium version of TranslatePress also adds support for the DeepL machine translation service.
Feel free to check out the other settings, as you might find something relevant to your Divi site. Then, once you save your changes, you’re ready to jump into translating Divi content.
3. Use TranslatePress Visual Editor to Translate Divi Sites
To translate your Divi site, you’ll use TranslatePress’ visual front-end translation editor.
To access this editor, open the Divi page that you want to translate on the front-end of your site. Then, click the Translate Page button on the WordPress toolbar:
This will open the visual translation editor, which lets you translate 100% of your site’s content.
To translate a specific piece of content, all you do is hover over it and click the blue or green pencil icon. That will open translation for that piece of content in the sidebar, where you can make your edits:
As soon as you save your translation, the translated text will appear in the real-time editor when you view that language, which lets you make sure the layout of your site still looks great:
To quickly move between different translations, you can use TranslatePress’ keyboard shortcuts.
The powerful thing about this approach is that you can use it for all of your site’s content, including images, button links, menu items, popups…everything!
Let’s run through some examples…
Translating Buttons/Links in Divi
As you saw above, our Divi site contains two buttons/links:
- Submit button – goes to an internal page that shows a success message.
- Book call – takes visitors to a third-party website to make an appointment (Google Calendar).
To translate a button, you just hover over it and click the blue pencil icon.
What’s different, though, is that you can translate both the button text and the button link. For our electrical site example, this means that you can send Spanish-speaking visitors straight to the Spanish language version of Google Calendar:
TranslatePress will automatically change internal links to go to the proper language version – you don’t need to manually edit internal links.
Translating Divi Menu Items, Widgets, Footers, Etc.
TranslatePress doesn’t just work for content inside the Divi Builder – it also lets you translate content from the Divi theme (or any other WordPress theme). This includes your navigation menus and any widgets that you’re using in your sidebar or footer. It also detects and lets you edit/translate gettext strings added by the Divi theme or page builder plugin.
Once you translate the text once, TranslatePress will automatically use that translation across your entire site:
Translating Images
In addition to text content, TranslatePress also lets you “translate” images. That is, you can use different images depending on which language a visitor is browsing in.
For example, you can use a different logo for different languages. Or, you can translate an image that’s used in your content for better localization.
To translate an image, you can use the same approach – hover over it and click the blue pencil icon. Then, you can use the sidebar to choose a new image from your WordPress Media Library or enter the URL to an external image.
Here’s what it looks like to translate the logo in the Divi theme:
And it works the same for images in your content, or even images in a slider that you created with Divi’s slider module:
Translating Forms
Finally, let’s look at one more specific example that’s relevant when you create a multilingual site with Divi – your forms.
Pretty much every single Divi website will make use of Divi’s contact form or email opt-in modules, so translating those modules is an important consideration when you translate a Divi site.
As you can probably guess by now, TranslatePress lets you use the same point-and-click approach to translate your forms, too.
You can even translate the placeholder text that appears inside form fields:
And there you have it! Whether you’re translating text, buttons, links, menu items, widgets, or anything else, translating your Divi site is as simple as point-and-click with TranslatePress.
4. Configure Your Frontend Language Switcher
By default, TranslatePress adds a floating language switcher to the bottom-right corner of your site, which you probably saw in the example screenshots above.
However, if you want to modify that default behavior, TranslatePress also gives you a couple of other options for where you add the language switcher to your multilingual Divi website.
One option is to add it as a navigation menu item, which you can do by adding the Language Switcher menu items (Appearance → Menus):
Here’s what that looks like on the front-end of your site:
You can also display a language switcher with the [language-switcher] shortcode, which you can add in any widget, the native WordPress editor, or directly to your Divi content.
Create a Multilingual Site With Divi Today
Divi gives you the power to build a beautiful WordPress site with a visual, drag-and-drop editor.
Then, TranslatePress lets you take that beautiful design and translate it into new languages using a similarly simple visual translation experience.
When you combine the two, you can build truly custom WordPress sites that are accessible to visitors from around the world.
Everything you saw above can be done with the free version of TranslatePress at WordPress.org. For more flexibility, though, you can consider upgrading to the premium version of TranslatePress, which offers…
- Support for dynamic fields (great if you’re using Divi’s dynamic content feature)
- More detailed support for multilingual SEO
- Support for unlimited translation languages
- Integration with DeepL for automatic translation
- Dedicated translator accounts
- The ability to browse your site as different user roles (great for restricted content sites)
TranslatePress Multilingual
To learn more about the premium features, head to the pricing page.