How to Translate Your Elementor Website Using Polylang - Multi Language WordPress Websites

The CSS for the language switcher is pinned 📌 to the top comment.

What I use to build amazing websites:

Other mentioned plugins:

Translating your website or online store is a fantastic way to reach more customers. Often, it's not just a plus, but a requirement. And because it's such an important aspect of creating a website, choosing the right WordPress translation plugin can seem like a challenge.

Well, my favourite is by far Polylang. Most other translation plugins rely on strings, which means you can translate one thing one way and that's it. Which produces very poor results for a lot of languages. Things don't make sense, context is missing and the text feels unnatural.

But Polylang gives you full control over what kind of content is displayed for which language. You can simply just translate things or you can display completely different content on the same page. For example, you could use one background colour for one language and another for the other language. Or you could display completely different images, or use completely different widgets. Both the content and the design can be entirely different.

The reason it's so powerful is because Polylang creates a copy of the page, post, custom post type, product or anything else, and it allows you to then edit it directly in Elementor. This gives you full control over everything.

And, with the help of another plugin, called 'Connect Polylang for Elementor', you can very easily translate headers, footers, single post templates and any other kind of template or global site part. Including popups. Polylang integrates seamlessly with Elementor.

Switching between languages is as simple as adding in the language switcher widget and styling it directly in the Elementor editor. You can display flags, language codes or language names, or any combination of the three. And when your users click on their chosen language, they're going to see the website in that language.

On top of that, it also allows you to translate the alternative text, title and description of your media files, which is great for both SEO and accessibility.

All in all, it's an incredibly powerful plugin and it makes creating multilingual websites with Elementor very simple. And it's completely free.

#translate #polylang #elementor

CHAPTERS:
00:00 - Intro
00:47 - Sponsored segment
02:00 - What tools we're going to be using
04:34 - Installing and setting up Polylang
07:32 - Installing and setting up Connect Polylang for Elementor
08:03 - Adding additional languages, changing the order of the languages in the language switcher, basic language settings
10:13 - URL Settings - Decide how your URLs will look like
12:24 - Custom post types and Taxonomies
13:46 - Synchronization
14:54 - Other settings
15:35 - Translating content in the WordPress dashboard
21:37 - Fixing pages that don't get duplicated correctly
25:18 - Translating content in Elementor
26:39 - Hiding content for different languages
27:39 - Changing the links on your Elementor pages
28:40 - Adding, styling and preparing the language switcher
34:19 - Fixing the language switcher bug with CSS
36:10 - Making the language codes bold on hover with CSS
37:14 - Translating headers, footers and other templates
43:30 - What we can and can't translate regarding WooCommerce
46:09 - Queries
47:52 - Translating other plugins and content
50:32 - Translating alternative text for media files and images
54:27 - Changing the flags in the language switcher

Get in touch:

Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.

Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!

[Reialesa]

The CSS for the language switcher 👇

selector ul {
list-style: none;
display: flex;
}

selector {
padding-right: 10px !important;
}

selector .cpel-switcher__code {
transition: all 0.1s ease-in-out;
}

selector .cpel-switcher__code:hover {
font-weight: bold !important;
}

/* Make sure you like the video, subscribe to the channel and check out some of my other videos as well ;) */

[MKMankowska]

Awesome! Thanks a ton for this content! 🚀😊

[narindersingh]

Thank you so much for the creating a very helpful and detailed video tutorial.

[annam]

Thank you, guy. You`re really healped me

[frauvon_christianevonbeuningen]

Hello, great explanation. Thank you very much!
How can I export the entire text of a single page to send it to a professional translator?
Any ideas? Or tips?
I would be VERY grateful!

[francescotateo]

Hello, so there isn’t a way of translating an elementor page automatically? Even with solutions that aren’t free? I tried WPML and it translated everything but it was completely bugged and broke the site. Can I do that with polylang?

[ivanjakic]

All this is OK but with complex home pages create from stratch again is a very demotivating. It would be great if it could create a copy and whatever it and then change the content according to the chosen language.

[saleheg]

Hello brother
In the wpml plugin, you will find on the products page that only the products appear in the primary language that you chose from the flag at the top of the page, let it be English. You will find above the products the names of the primary languages ​​and the translation, and next to them the number. When you click on the language name, the products of this language appear. Is it possible to add this feature with the polylang plugin, because in polylang all translations appear below each other on the same page?

[johannesck]

Great video, very helpful! Question: How can I translate elements like "next" and "previous or "similar posts" in a blog post? Thanks.

[ianrexexanes]

Language Switcher only displays 1 flag on the header. How to fix this ?

[AsadullahTahir-pt]

Can you tell me how to fix different header and footer issues? I have assigned a separate header in English for my English page and an Arabic header for my Arabic page, but the Polylang plugin is displaying the same header that I recently updated on one of them for both pages.

[BeTTerWoRLd]

Do we have to translate all of the texts manually or is there a mode where the whole site gets translated automatically?

[musharibkhan]

while translating the footer what to do when you dont have the language section in the edit in the footer?? how can i translate footer for another language page so that the default language page's footer dont change as well

[ferrywap]

Please can you make a video on how to do a bento layout in elementor

[saleheg]

Another thing in the wpml plugin when I modify the price in the product in the base language the price is automatically modified in the translated product
But in polylang I noticed that during translation the price is actually imported from the base product
But the problem is when I modify the price or code in the English version it is not synchronized and modified in the translated products. Is there a solution to this problem?
And if I update the prices using the wp all import plugin will the product prices be updated in all languages ​​as long as the code is the same?

[maddyshorts]

Hey I need some help. How you set your second language page as home page/front page when there was already a home page present?

[danaebianco]

Does it work the same when I use Gutenberg editor for blog posts?

[juanandresturuhpialmartin]

Hello! I'm having trouble translating field groups and post types created with ACF. When I select the areas of the website where ACF is used in the Polylang settings (similar to your events), the pages break. How can I successfully translate these fields and post types without causing issues?

Thank you in advanced