How to Translate Your Divi Website with Weglot

Feb 27, 2021 | Everything Divi for WordPress

Translating your website can be a massive undertaking. Even with the help of a WordPress translation plugin, it’s often hard to ensure that you’ve covered all your bases. Fortunately, using Weglot and Divi enables you to see your translations as you complete them, so you’ll feel confident that every text string is available in your target language.

In this article, we’ll introduce you to the Weglot WordPress translation plugin. We’ll also look at how it works with our own Divi Builder to provide a user-friendly translation process.

Let’s jump right in!


An Introduction to Weglot

Weglot is a translation plugin for WordPress. It enables you to use machine translation from Google, Microsoft, DeepL, and Yandex to automatically convert your content into any of the 108 languages it supports:

how-to-translate-your-divi-website-with-weglot How to Translate Your Divi Website with Weglot

You can then go through and make any necessary corrections to refine your website’s localization, or connect with professional translators through your Weglot dashboard. This enables you to easily access the best of both machine and human translation through one solution.

Weglot also helps you take advantage of multilingual Search Engine Optimization (SEO) practices, so your content can rank well in multiple languages. It automatically creates subdirectories for each language for more effective indexing, adds hreflang tags to your header, and enables you to translate post meta data such as your titles and meta descriptions.

In short, Weglot provides all the tools you need to make a truly multilingual site in one convenient package. It’s also easy to set up. The first thing you’ll need is a Weglot account. You can click on the Try for Free button on the plugin’s home page, or check out the pricing page for all the available plans:

how-to-translate-your-divi-website-with-weglot-1 How to Translate Your Divi Website with Weglot

Weglot is free for one language and up to 2,000 words, so you can always take it for a spin and then decide if you want to upgrade to a paid option.

Once you’ve created your account, head to your WordPress dashboard and install the free plugin:

how-to-translate-your-divi-website-with-weglot-2 How to Translate Your Divi Website with Weglot

Then jump back over to your Weglot account and locate your API key under Settings > Setup:

how-to-translate-your-divi-website-with-weglot-3 How to Translate Your Divi Website with Weglot

Enter this key into the relevant field in the Weglot Main Configuration settings in your WordPress dashboard:

how-to-translate-your-divi-website-with-weglot-4 How to Translate Your Divi Website with Weglot

Don’t forget to save your changes. Once the plugin is connected to your site, Weglot will use machine translation to convert your content into your target language(s) automatically.

How to Translate Your Divi Site With Weglot (In 4 Steps)

Although Weglot uses high-quality machine translation to convert your content into your target language(s), it’s still wise to review your translated content manually. This can help you spot any mistakes or incorporate more nuanced language, such as slang or localized dialects.

If you’ve built your website with Divi, you’re in luck. It integrates seamlessly with Weglot’s visual translation experience. Here’s how it works.

Step 1: Access the Weglot Visual Editor in Your Divi Website

First, you’ll need to open the Weglot visual editor on your Divi-built site. Navigate to the post or page you want to work on, and click on Weglot > Edit with visual editor in the admin bar:

how-to-translate-your-divi-website-with-weglot-5 How to Translate Your Divi Website with Weglot

Next, select your target language from the Language details drop-down menu:

how-to-translate-your-divi-website-with-weglot-6 How to Translate Your Divi Website with Weglot

Then you can use the Highlight qualities drop-down menu to identify translatable elements on the page. You can specify specific translation methods to focus on, or simply highlight all of them:

how-to-translate-your-divi-website-with-weglot-7 How to Translate Your Divi Website with Weglot

If you wish to identify translatable elements for multiple methods, they will be color-coded so you can tell them apart.

Step 2: Edit Your Translated Content

Now you’re ready to dive into translating your Divi site with Weglot. Click on the pencil icon next to any translatable element on the page to edit it:

how-to-translate-your-divi-website-with-weglot-8 How to Translate Your Divi Website with Weglot

In the resulting window, you can make changes to the automatic translation as you see fit:

how-to-translate-your-divi-website-with-weglot-9 How to Translate Your Divi Website with Weglot

Click on OK to save your edits. Then simply repeat this process for the other text elements on the page. Note that Weglot doesn’t limit you to translating your page’s body text. You can also update your menu items, button text, forms, footer content, and more.

Step 3: Translate Your Images

When you consider translating your website, you’ll probably think about making your text available in other languages. However, it can also be beneficial to “translate” your images.

Weglot enables you to do this by specifying different media URLs for each language. For instance, if you have a page that features culture-specific imagery, you may want to change it to match the language that’s being displayed.

In order to set up image translations, you’ll have to add them in your Weglot dashboard. Navigate to the Translations tab, and then click on the one you want to edit. Scroll down to the bottom of the screen and click on Add a media translation:

how-to-translate-your-divi-website-with-weglot-10 How to Translate Your Divi Website with Weglot

In the resulting window, enter the URL for the existing image, and the one you want to replace it with:

how-to-translate-your-divi-website-with-weglot-11 How to Translate Your Divi Website with Weglot

You can find your image URLs in your WordPress Media Library. After you’ve entered them, click on Add. Your images will then change based on which language is currently being displayed.

For example, here’s our Coffee Shop layout pack in English:

how-to-translate-your-divi-website-with-weglot-12 How to Translate Your Divi Website with Weglot

Here it is again with translated images in French:

how-to-translate-your-divi-website-with-weglot-13 How to Translate Your Divi Website with Weglot

Once you’ve added the initial media translation in your Weglot dashboard, you’ll also be able to edit your image translations in the visual editor:

how-to-translate-your-divi-website-with-weglot-14 How to Translate Your Divi Website with Weglot

Just click on the pencil icon next to each image to start making changes.

Step 4: Check Your Translations in Your Weglot Dashboard

Finally, once you’ve finished translating your site visually, you can double-check your changes in your Weglot dashboard. Navigate to the Translations tab and select any entry from the list. You’ll then be able to see each string in English and your target language side by side:

how-to-translate-your-divi-website-with-weglot-15 How to Translate Your Divi Website with Weglot

If any of the translations need changes, just click on See details to the right:

how-to-translate-your-divi-website-with-weglot-16 How to Translate Your Divi Website with Weglot

This will open an editor where you can tweak the string in question:

how-to-translate-your-divi-website-with-weglot-17 How to Translate Your Divi Website with Weglot

You can also reopen the visual editor from here if you want to see the string in context.

Conclusion

If you built your WordPress site with Divi, you’ll know that visual editing can make creating your content a more enjoyable experience. Fortunately, you can now translate your site visually too.

In this post, we showed you how to translate your Divi site visually using Weglot in just four steps:

  1. Access the Weglot visual builder.
  2. Edit your translated content.
  3. Translate your images.
  4. Check your translations in your Weglot dashboard.

Do you have any questions about using Weglot with Divi? Leave them for us in the comments section below!

Image by VectorMine / shutterstock.com


Source

WordPress Development

SEO NEWS

seo news