How to make your Elementor website Multi Language - Polylang for Elementor

hey and welcome back to living with pixels in this video i'm gonna show you how you can create a multi-language website with elementor for free so this means that after watching this video you can offer your clients this feature where users can click on a different flag and then the translation of that specific page will show up also the menu will change as you see here this even works with elementor pro elements like the header and the footer so when you click on the translation the header and the footer template will also change you can set it up with flags like on this website or you can set it up with land codes like this netherlands and english or if you're really creative you can set it up to both this also works perfectly on mobile phones as you can see in this preview and like i said this is completely free to do which is always a good thing so let's just get started with this tutorial so in this tutorial i'm gonna work with this website which is not multi-language right now and i'm gonna transform this into a german and english website right now this website is german so i'm gonna add english as the second language okay so before we get started you need to know two things about how this works first of all you have to decide what the default language of your website is gonna be this website in particular is a german company so they want german to be their default language and then english and friends as an extra but for most of you guys i think that english is going to be the default language and then you want to have another language on top of the default language so this plugin needs to know what the default language is because the translated pages are gonna be based on the default language that you have to set up inside the plugin so if you don't know what the default language should be then of course ask your client um and then you can set it up inside of the plugin the second thing that you need to know with this plugin is that you should do this when the website is almost completely done the reason is because this plugin makes a copy of the existing pages that you already have created so for example when you have the home page in german and you want to add the english translation it's going to copy all of the elementor sections and elements inside of that page so if you're going to do that from the start then you have to copy all of those sections afterwards because the pages are already created that's not what you want so my advice is make sure that you finish the website in one language and then add this plugin and make sure that you also add the content for those other languages and this is a little business tip this is something that i let my clients do because i am not an expert at translating i'm just gonna set it up for them and then they can change all the text to the right language okay so now you know everything you need to know let's go to the dashboard and download the two plugins that we need so if you go over to plugins click on add new you're going to search for a plugin called polylang that's the main plugin that we need so it's this one it has already 600 000 active installs so that means that it's a popular plugin also the ratings are very good and then just click on activate when it's done now it's going to ask you a few questions they want you to set it up like this but i like to do it manually because we also need to set up some things with elementor so i'm gonna click on not right now and then i'm gonna go back to the plugin section click on add new and search for polylang connect for elementor because the normal plugin doesn't allow you to change the elementor template which is what we need so we're also going to download this one as you can see good reviews also 30 000 downloads so click on install now and click on activate and they will ask you a few things over here would you like to automatically translate your website for free i do not have experience with this but i know google translate and google is very good with this kind of stuff and even google translate is not perfect so i wouldn't trust this but maybe you want to try it if your client doesn't have time and maybe want to do a little bit of tweaks for now i'm not going to do that because this client wants to add the text themselves and that's also the safest way to do so that's what i'm going to show you so you can click this one away and what you want to do is go to the new languages tab over here and then click on languages and as you can see there are no languages right now so first we're going to add the default language so let's go over here i'm going to search for german or deutz that's the main language for me so for most of you guys it's going to be english maybe with the american flag and you can leave this as it is that's good left to right yes germany that's the flag you can choose a different flag if you want to and now just click on add a new language all right and as you can see you have this star over here and that means that this is the default language so now if we're going to add another language which is going to be english then that language will not be default and you can change that afterwards if you've done it in the wrong order so we're going to add another one which is going to be english and i'm going to add it from here the great britain one english this is perfect this is perfect and then click on add a new language and as you can see right now this one is still the default language so that is perfect but now we have two error messages which are this one you must translate your static front page to deutsch or english but we're gonna need this one first there are post pages and galleries that without a language so you have to set up all the things that you already created for the default language so if you click over here so let's go to pages right now and see what has changed so here are the pages that i already created with elementor in deutsch so in german right so let's go to the homepage for example this is the home page and i have put in the text myself with elementor titles just a static page with content the only thing that is not static is this block which of course is dynamic and that's also in german so um for now this is just lauren ipsum because that's what i put in so as you can see all of these pages right here are german and then we can add the english language and if you add other languages you will see extra flags over here it's the same for posts if you go to post i have created two blog posts now and because we have said that all the content right now is german now the blog posts are german and we can add the translation for english but before we're gonna add the translation make sure that you check the settings so go back to languages over here and go to settings all right so there are a few interesting settings over here first of all this one click on it and then you can see a few different settings so here you can see that you can place the length code on the end of the url or at the beginning as you can see over here i like to use this feature because it looks more clean but if you want to use this feature then you have some more options over here so let's just keep it at this all right and then over here you can hide the url language information for the default language that is nice because then for most of the people that use the website they're not gonna see the language code inside of the link which is nice you can also keep slash language in the links which is something that i don't really like so for now this is all i want and i'm gonna click on save changes and now the settings are saved okay this is also nice detect browser language so by default this is turned on so that means that when somebody is an english person and his browser language is in english that the website will automatically show the english version of the website super nice feature you can turn it off right here if you want to but i like to keep this on but you also want to check is this one custom post type and taxonomies make sure that you have everything checked that you need to translate for this website i have used elementor templates i have used team parts and i've used listing items uh listing items on this website don't need to be translated but maybe you have a button right here that says read more and then you also want to translate that so then just also make sure that you have this one checked this feature by the way pops up if you're using croco block which i use right now in this video but maybe you're using advanced custom fields and then you will have different options over here and the last thing that i want to check is synchronization and that means that if you change something for example the page template so you change the template from elementor full width to elementor canvas that it automatically changes the other languages as well that is connected to that page so for example if you change the about page it's going to change the about page for all the three languages not for elementor elements because that is something that this plugin cannot change so for example if you created a whole page with elementor and you change something within elementor you change your column width or whatever you add a new element it will not synchronize so that's not perfect but i think it's smart that elementor doesn't allow other plugins to change the actual things that happen on the elementor editor so i think that's just to keep everything safe but that is something that you have to keep in mind with this plugin also one thing that is nice for example is the featured image for blog post so that the featured image will also change for the other blog post so you can check a few options over here for now i'm gonna check these boxes because i don't use comments on this website taxonomies sticky posts and or maybe also the publish days that's also nice for the blog post so for now i'm just gonna click on save changes and now we're ready to add our first translation all right let's go to our pages and let's go to the home page we're going to just click on the title over here click on edit and then what you want to do because this is a full elementor page let's open that page as well so you can see what's going on so this is the elementor page as you can see this is just text that i put in over here just text fields all right so go back and then click over here and we're going to add a home page as well so what i want to do is i want to click on the plus over here and then i want to give this a title i'm also going to call this home but then it's going to give it a name home too because the home page already exists so this is not something that you can change so even if you want to change it back to home that's not possible because slash home already exists even though this is a different language so what you have to do with pages that have the same name which is not all pages you have to add something to it so for example en which is english it's not very pretty but that is how i solve this issue for most pages on this website as you can see these names are not english so the names are going to change anyway and then it's not a problem so for the home and other pages that have the same name you have to do something like this unfortunately okay so now again we are in the english version we have saved the home the title is just home but the link is just a little different we're going to click on publish and now we want to open this with the elementor editor too so now we are going to open the home page of the english version again this plugin doesn't translate everything inside of it but now we can change this over here so for example welcome to let's only try this one because i'm going to change everything later over here click on update and now this already should work so if we go back to our page and click on the english version this is the english version welcome to but we cannot go to the german version yet because we also need to change the header so what you want to do is you want to go to your elementor team builder and you want to open your header template so here it is but before you click on it make sure that you go to the right over here and also add an english translation for your header so click on the plus and then call this header v1 english that's what you want to do click on publish and then open it in elementor i'm going to open it in new tab so then you want to open it like this and then we want to add the flags so if you go to the widgets over here you can see this new widget over here that is part of that plugin so i want to add a new column so right click in this column and i'm going to add a new column by the way if you don't know how to create a header with elementor i have a tutorial on this you can click over there in the card or in the description to see how you can create a header like this but i want to add a little bit of space for the flags that i want to import so go over here and add the polylink switcher and make sure to edit over here and then it says deutsche english so you want to change a few things over here we want to show the flag but we don't want to show the name you can show the code as i said over here that's what you can do but i just like to show the flags all right you can align this if you want to to the right for example and then you can steal this up a little bit maybe give it a little bit of vertical space to make it match the text and also make sure that you have enough space in between all right like this that looks pretty good the country flag you can add a little bit of margin um there's not a lot you can do but but you don't need to do a lot in here so if you click on update now let's see what happens all right so we're gonna go back to our website and we're gonna click on refresh and now what we can see is that we have two flags super nice so if we click on the german version right now because we now are at the english version we can see that the german version of the home page will show up but now we don't have the flags over here so we also need to edit the header the normal header the uh the german header for this template all right so make sure that you have this one opened and this one and now in the german version we also want to add that thing so what i'm gonna do for now is i'm just gonna copy everything in here i'm just gonna go over here paste it and then delete this old one so i don't have to change anything so now let's see if it works i'm going to save it go back to our home page click on refresh all right we'll come and buy that's german click on english and boom it's english click on german again and boom it's german now this is nice but we're not done yet because the menu still shows german pages and this is because we haven't added the other pages so let's test what happens when we're going to translate this page over here so what i want to do is i want to go on edit this page i want to add a translation over here so i'm going to click on the english version and this page was called munzen medallion action and that is a translation for coin metal auctions all right i'm gonna copy that i'm gonna add a new page i'm gonna publish it without changing anything and let's see what happens when we go back to the website so i'm gonna go back to the home page and i'm gonna click on the english page and now it still doesn't show the english version of that page even though it's published so what you need to do now is you need to go to your menus because we need another menu for each language so i want to go back and i want to go to appearance and then menus so now i have one menu that i've created and now we need to create another menu for our other language so i'm going to call this top main english and check the primary english checkbox and then click on create the menu and also make sure that you go to your top main and make sure that this one is the primary deutsch version click on the save menu all right so that is perfect now go to your english menu and make sure that you add the pages that you want so now this is a little bit tricky because there are two home pages but let's test is if this is good so we need home and we need coin coin metal auctions click on add to menu make sure it's in the right order click on save so now we need to change the header template and tell elementor that inside of our english header translation we need to show this new menu so let's go to our menu but now i forgot which one it was right so let's just close this one go back to the back end go back to templates over here and you can always see which one it was if you go over here uh luckily i've also added this en but if you don't know you just check it over here this is the english version and this is the german version right now we need to go into the english version open it and let's change this menu to the english version so now top main en click on update and now this should work so we're gonna click on the home page again and see if it works all right and now let's just click on the english version and now it only shows the pages that i have added to this english version of the menu so if i click on this it shows the english version of this page right now it doesn't look good you have to open it once with elementor and as make sure that you save it in order for it to work i don't know why but now it should work so now i'm at the english version of this page click on the german one and now i'm at the german one and the german menu shows so now you already know what to do you also need to create an english version for your footer template and for any template that has specific language inside of it so sometimes for example with a blog a blog post you only have dynamic fields so for example the title the date and then the content so in that example you don't have to change the template but sometimes it happens that then it doesn't work because this plugin doesn't see a translation for that actual template and then it keeps it empty which is not what you want so sometimes it happens that you have to create a copy of your elementor template your dynamic template and just save it in the same way so that the plugin knows that there is something that they can load the content in so again this works the same way for posts if you want to translate this post you just click over here you make sure that the title is different and then the translation of this post will show up when there is a translation so for now i am at the german version of a post that is not translated yet so now if i click on english it's gonna redirect me to the home which is perfect because if there's no translation you don't want the user to go to a 404 page it's nice that this plugin automatically redirects you to the homepage when there is no translation for that page so this is also a way that you can test your website okay and the last thing that i want to show is your mobile responsiveness for your menu you can check your mobile responsiveness like this and now of course you need to change the menu a little bit so make sure that you always have a little bit of margin on the left and on the right and make sure that you edit the width of the columns inside of it so for example for this one i'm gonna pick 60 for the logo i'm gonna pick 20 for our lovely hamburger icon and also 20 for this one which is not enough but maybe that is because of the styling so maybe you want to change it up a little bit like this and then make sure to of course change this up so everything is nicely aligned in the middle but again this is not a tutorial for your header template but as you can see this also works on mobile phones so you can play with the settings over here to make sure that it looks nice on a mobile phone all right i'm gonna click on update for now and i know that this tutorial was a little bit more technical it's not a beginner friendly thing so i recommend that you don't offer this to your client if you don't really understand this tutorial so if you have any questions then you can leave them down in the comments below and i try to answer most of the questions but i also like it when you guys help each other because we are just a community i cannot answer all of the questions so please help each other with any issues and i know this is a tutorial that you guys really wanted me to make so if you have other ideas for tutorials then you can also put them in the comments and then i want to thank you for watching and i hopefully will see you in the next [Music] video [Music] you

Channel: LivingWithPixels

Views: 100,240

Keywords: elementor pro multi language, How to make your website multi language, Translate your wordpress website, Polylang Elementor plugin, Language switcher, Language switcher website, multilingual plugin, Multilingual Elementor Website, Multilingual Wordpress Website, How to make your website Multilingual, Multilingual website in Elementor, Multilingual with Polylang, polylang elementor, elementor multi language, wordpress multi language, elementor multilingual, elementor polylang

Id: IkUo7IE5ZRI

Length: 21min 5sec (1265 seconds)

Published: Fri Jan 22 2021