Translate Divi with all the modules, pages, the Divi theme builder global header and footer, with a neat dropdown and even inline URL’s with this step by step tutorial. It is easy IF you know how.

?????? Start here ??????

I want you to succeed with your website, so lets get started.

⏱️Timestamps⏱️

0:00 Translate Divi to Make it Multilingual – Intro
1:29 Get WPML ➜ https://wpressdoctor.com/wpml/
3:23 Install WPML in WordPress
4:50 Setting up WPML for Divi
12:54 Translating pages
18:06 Setting up the navigation menu’s
19:41 Translate the footer (build with Divi Theme Builder)
21:10 Style the WPML dropdown menu with:
.wpml-ls-item .sub-menu { width: 60px; }
.sub-menu .wpml-ls-flag { margin-left: -20px; }
21:44 Translate links to external websites
22:18 Adding custom XML ➜ https://wpressdoctor.com/github-wpml-…
24:55 Fixing internal links
25:20 Translte the header (build with Divi Theme Builder)
26:48 A word from the Doctor – Outtro ✅For tips and tricks on getting the most out of WordPress, don’t forget to subscribe: https://wpressdoctor.com/sub

Upload Font to Divi – FIX “This Filetype is not permitted…” in just 2 minutes!

?Transscript?
In this video I’m going to help you to translate Divi and to make it multilingual. You’re gonna be able to use unlimited languages and we’re going to update your Divi website so that it can contain all these languages in a beautiful drop down in the menu. We’re gonna translate sections, we’re going to translate modules, we’re gonna translate rows, we’re even gonna translate individual URLs that you created in your website that need to be translated to go to a different target. If you follow this video, step by step, your Divi website will be fully translated -the right and stable way- in just approximately 30 minutes. Now to translate your Divi website, we will be using WPML. It is the WordPress industry standard for translating websites. It is fully compatible with Divi, IF you follow these steps, because there are a few critical steps that we need to do to translate everything, in every module into WPML. You can do this, because I’m going to help you out. And I am the WordPress Doctor. I’ve been building websites since 2001, and since 2004 with WordPress. I have my own national hosting company, and my web development agency, and I translate my client websites – I think every single month. So you’re in good hands. And now let’s go, and make your Divi website multilingual.

If you already have WPML installed on your WordPress website, you can skip this step. If you follow this link, you will not pay any more, but you will help me out because I will receive a small fee, if you register with WPML. Go to https://wpressdoctor.com/wpml/ Press enter. And here we are at the WPML website. Press ‘Buy and download’. And what you’re looking for with Divi is that we have ‘page builder support’ so we need a multilingual CMS version or a multilingual agency. Well if you’re another agency, then you should probably use the multilingual CMS version. And with this version also comes that you can install it on three websites, for one year and after that year you have to renew your license or just wait until things break and then you can update again. Alright we press ‘Buy now’. Fill in your details and place the order. Once you have paid, you can log into your WPML account. You will come here, and you click on this ‘Downloads’ button right here. And we’re going to download the WPML CMS. Click on the download button and it starts downloading automatically. We will be needing some other packages, but we’ll be downloading it straight from within WordPress. After we have downloaded all the files we go to ‘your list of sites’. And we press here ‘add new site’. Fill in the URL of your website, and press the button ‘add’. Copy this key because we will need it later.

Log into your WordPress website. We will use the website of my client GreenStay to make it multilingual. If you’re still using the login /wp-admin/, that’s not a very safe way to login so please, watch my tutorial about “WordPress security – the circle of five”. You go to ‘Plugins’ -> ‘Add new’ -> ‘Upload plugin’ and select the file we just downloaded. Press ‘Install now’ and press ‘Activate plugin’. So the first thing you will notice is that we are using an unregistered version of WPML. So we click this ‘register’ button. And we click on this button ‘Register WPML’. And this is the place where we paste the site key that we have just copied earlier on, and press ‘OK’. You’ll notice that “To easily translate Divi you need to add the following WPML components”. Right, well let’s install them right now, press ‘install’. And here we are so we’re going to click on ‘String translation’ and ‘Translation management’. We’re going to scroll down and press ‘Activate after download’ and press ‘Download’. Now it’s installing and downloading both extensions for WPML, and we’re going to need it for Divi. If you have anything else you want to add, like Gravity Forms, or Contact Form 7 or ninja forms, you can just select them and install them also. And when it has been activated, you will see ‘Operation completed’. Press this button ‘Configure WPML’. First we need to select our current content language, “Choose your language of your website”. This is an English website so we press ‘Next’. “Select the languages that you want to translate your website to”. I want to translate to Dutch and German. Press ‘Next’, then we need the language switcher options. The order of language, you can change it right here, I would go with English first, then Dutch then German. “How to handle language without translation” ‘Skip language’. This will mean, when there is no translation available for this page, you don’t see any flags on the top corner of your website. We should leave this on, because it is a great feature. Here we’re gonna add our main language switcher, we press this button, and we choose our main menu for the website. I want to have the flags on the last menu item, because it is not logical to place it on the first menu item, because people will only use it one time to change it to their language. Do you want a drop down or a list of language? I would go for a drop down, because a list will make it very long as you can see right here in the preview. Let’s make it a dropdown. I prefer not all the names in it, so I only want to see the flags and I don’t want to see the native language name. You can change your colors right here, but we’re going to do it in Divi so choose ‘Clear all colors’ and press ‘Save’. And as you can see now, it is saved in the main menu we have a little flag icon right here next to the menu items. That’s awesome. All right, we don’t need a widget. If you want the footer language switcher you can turn this on, right here. I would not do that because it is not logical to have it in your footer, but it is logical to have it in your main menu. So we’re going to leave it off for this website. I want to suggest you leave it off because when someone wants to change the language, they’re going to do it in the main menu. So press ‘Next’. I don’t want to send any information to other people, we press ‘Next’. And we already entered the site key, so we can finish this.

So before translating we still need to change a couple of settings. So go to ‘WPML languages’. We still need to activate the WPML translation management so press ‘Activate’. So what do we need to change right here? These are all good, we want to have the language not added as a parameter, but we want to have the language as a directory. And “Use directory for default language” you can leave it off because we’re going to use GreenStayApartments.com for English, GreenStayApartments.com/nl/ for Dutch and /de/ for German, we press ‘Save’. And it says you may need to resave the site permalinks, so we go to the permalinks. And we press ‘Save Changes’. Make sure that your permalink settings are on postname. Alright we go back to ‘WPML languages’ and scroll down the page. So these options are all okay. What you can do with this, we already talked about this, we talked about this. “Hide languages” – you can completely hide your content, when you are reviewing translation or when it is in progress. Well you could enable this, but we already set it up that when translations is not completed, it will not appear in the website, so you can leave this off. This is alright. With the browser language redirect you can automatically redirect visitors according to their language, so if your browser language is Dutch, they will see the Dutch version. And if their browser version is English, they will see the English version. There is only one problem with this one. When I choose this version, then we know that the Googlebot is also English, so that’s why our browser language redirect may affect your site indexing. But apart from that, there is another problem. What if someone in the Netherlands -a Dutch guy- has a English Windows version or a English browser, they will see the English version of the website instead of the Dutch version! They will not know there is a Dutch version in unless they go in the menu and change their language manual. That is why I suggest that we disable browser language redirect. These SEO settings are very important you should leave this because the HREF-Lang links are very important technical data that’s being added to your pages, so Google knows exactly where the different languages are, so you should not change it under any circumstance. “If you love WPML” just press this and they will put a commercial down in your footer. I don’t like it, so we don’t select this. So we don’t need the language filtering for Ajax operations, and we don’t want translation feedback. What is this? Well if you enable this, visitors of your website will see a box on the right side, on the left side of the screen which will show a module which says: “Did you like this translation or can we improve it?”. This way you can ask for feedback about the translated content. This is very helpful if it is not your native language, you don’t have professional translators, and you just want feedback from your community. We will turn it off for this website. Reset settings, this will change everything back to default. We’re not going to use that one right now.

All right, the next option is “Theme and plugin localization”. On this page, you can change your plugin strings to another language. This is helpful if you for example have a WooCommerce website and the translated language is not the way it should, and you’ve downloaded a custom translation, you can edit here and change it for tjhe plugins. We don’t need it right now so let’s go to the next option “Translation management”. Before we can use it, we need to complete this quick setup. So, the question is: “Who will translate this site?”. If you are just alone, you can add only yourself, if you use it with other people on your website you should check this one, if you want all users -you can add them all right here, or you want to have it done by a translation service, a professional agency that will do it for you. We will choose for this website, only myself and press ‘continue’. Well, what do we want to use? When we are translating you will see that we will be using both translation editors, because some things are not translatable in the advanced translation editor. But for now, we choose the advanced translation editor, we can always switch back, as I will show you later on this tutorial. And press ‘Continue’. So it is the summary of what we just did, we press ‘Done’. Now you see all the pages of our website right here. Let’s go to translations, no jobs are found, and that’s perfectly fine. Let’s go to media translations. Here we can change all the images to a different language. You can actually upload an other image for another language. That’s very helpful if you have for example, a logo with a English subtitle in it. We can change this subtitle for the Germans for example, because some Germans don’t speak English very well. The Dutch is a way smaller country, so most of Dutch people speak English very well. Let’s go to ‘WPML menu sync’, and we will be changing this later on. Let’s go to string translations”. Here are some strings you can find in your website. We don’t need it right now, so let’s go to “Taxonomy translations”.

You can translate categories, tags, project categories, tags and translation priorities. So, if you have categories for your posts for example, you can change them here for two different languages. Very nice tool. Let’s go to the next option “packages”. Here are special packages, we don’t have any packages installed right now, so we can go to the “settings”. You can change other options of your website. The standard options are fine, so you can just leave them right now. Let’s go to the last option which is support. And the last options support is just some information about your website and everything that’s going on right here.

Alright, let’s start translating pages, we go to ‘all pages’. We gonna translate the Home page. So we’re going to find the Home page. Here is it is. And we press this little translation button to add a translation to Dutch. Press this button. And now we are going to the advanced WPML translation editor. We don’t want to be translated, and I don’t want to see this offer again, So we press ‘not right now’. All right here we see all the text of our website in English, and this is the target, Dutch. So you can just easily press this one, this is the title uses by RankMath as you can see, because it has the site name in it. “Beautiful service apartments in the Netherlands”, let’s translate this one. And when you have added your translation you press this green button ‘Save and complete’. Alright, it will skip to the next line. This is the meta descriptions, used in our Dutch version. This is the English version, and this will be the Dutch. I’m going to edit, and we press the green button. You have to make sure that when they’re using a . at the end of the sentence you should also do that in your translation. So upon translating your Divi website you will notice that sometimes you will have like these things that you don’t know where they are at your homepag: “Apartment rental housekeeping”? I didn’t have that sentence in my home page? This is a admin label for a row or a section or a module. So keep that in mind. Sometimes you will see like this things and apartment 1234, you will see all these things that are your Divi Builder admin labels. So if you are not sure what this is, you can just press the green button, you could always change it later upon reviewing your own translation. On the bottom side of this page, you will see how many sentences are already translated and how many we still need to do. So, back to work.

You’ll also notice sometimes that you will see titles from media files. This is for example a title for a media file. If you don’t want to change it to another language you just press this green button. Or else, just translate it. If you’re translating you see these little green buttons. This way you can join these text together to translate them in one go. These three texts, it is an example review. So if I’m going to translate it, I don’t want to translate it sentence by sentence. No, I’m going to type a translation in just one go. So we press this button, we press the ‘Join’ button again, and we press this ‘Join’ button again. So now we have this entire text we can translate in one go for the review section. By using the ‘Join’ button, you can create a paragraph, instead of single sentences, it’s a very, very nice tool.

If you see in your translation sentences like this with percentage signs and numbers, then you know that this sentence is used by a plugin to generate some text. If you are going to translate it, translate it exactly the same with the percentage signs on their places, and just add your text in between, like the original language. If you’ve added all translation you add the last sentence and you press the ‘Save’ button. Now we are 100% complete and we press ‘Finish’. We press ‘Complete’. And we get a message “Success, the translation is completed”. We go back to our pages. Now you see that our homepage has a pencil to it, which we can always go back and edit the Dutch translation. Let’s check if our translation has come through on the front side of the website. And upon loading our website we see a beautiful flag in the right corner. Let’s press it right now and see what happens. Oh there is our beautiful translation, as you can see, everything has been translated the right way that we just have insert. Awesome. Two things you will notice right here. First of all, the menu has been changed and is not working because we didn’t translate all the pages. And the footer has not been translated yet. We’ll be doing that in a second. I’m just going to add also a German translation to the homepage. And I go back to ‘all pages’ and I scroll down to the front page. And I’m going to add this button ‘Add translation to German’ press this button. We go again to the Advanced Translation Editor. From here we will see the same page, but now we can translate it to German. And after we completed the translation we pressed ‘Finish’ again. And we press ‘complete’. And we see on the front page a beautiful German flag. Let’s press this flag, see what happens. Oh yeah schön, Genießen Sie unsere Serviced Apartments. Well, that looks very great all in German. Excellent. Also you see the main menu hasn’t been translated yet, and also the footer is still in English. Let’s get back to our pages. I’m going to show you now how to fix this. So to fix the main menu, you go to ‘Appearance’ -> ‘Menus’. And what you see right here is we have menu items. We have English, Dutch and German. As you can see we don’t have any Dutch and German main menus right now. So let’s add them. Press on the translation -> to your language, and translate your name, in the Dutch version, press ‘Create menu’. I only have translated the homepage yet so I press ‘add to menu’. And I press ‘Save Menu’. And I can also do this for German. I’m going to give it a German name ‘Hauptmenu’ ‘Create menu’. And I’m going to add the home also, press ‘Save Menu’. And let’s see what happens on the front end of the website. And when I look at the front side of the German website now I see the translation flags are also added, and I have a home button right here. Of course we have the home button also here. So we’re going to change it, and we’re going to remove it after we’ve added all the translated pages right here. So let’s switch to the Dutch version. And it works very smoothly. Let’s go to the English version. And now we have the entire website. So what happens now when I go to a page that isn’t translated yet? Let’s go to “Serviced apartments”. What you will see: the flag items will just be removed right here because this page isn’t translated yet by WPML. So now I’m gonna show you how to translate the footer. I have built my footer in the Divi theme builder – as you should also do- because it is such a powerful feature. You go to ‘global footer’ right here. And we’re going to add this entire section, to our Divi library. “Footer” Make it a global item and safe it to the library. Now we can save this layout. And now we go back to the ‘Divi library’ right here. And in the Divi library you see the footer we’ve just added, and also with a translation button. So let’s press the Dutch translation. And here is the footer just as you noticed, just the same way as we translate the pages. So let’s translate this footer also in Dutch. And after translation is complete we press ‘Finish’. We press ‘Complete’. And let’s also translate it to German right now. And when all said and done, we press ‘finish’ and ‘complete’. As you can see the footer has been translated right here. Let’s check on the front end. And on the front end we also see in the footer that everything has been translated the right way in German. And also in Dutch it is looking beautiful.

We’re going to change this ugly drop down menu to make it a bit smaller. It’s very easy if you know how, so follow these steps. We go to ‘WPML’ we go to ‘Languages’. And we scroll down to ‘Additional CSS’, and here you paste in just the code that you’ve copied from the description of this video and we press ‘Save’. We then reload our page. And as you can see the drop down menu has become the way it should be, nice and small.

So there is another thing I want to show you, because this little button. As you can see down here, this link will go to RoomRacoon, it is a booking engine my client wanted. But as you can see in the URL, there is a /nl/ that is the Dutch language. Even if I go to the German version of the website we just created. When you look at the button, it also goes to the /nl/. I want this to go to the international version of the booking engine. So how should we do that? There is a simple way, and I will show you. To do this we need to go to ‘WPML’, and we go to ‘Settings’. Then you go to ‘Custom XML configuration’. Follow the link in the description of this video and you will go to GitHub. And on GitHub, there is a XML configuration file, especially created for Divi. It is a huge file with 484 lines of code. So what you do, you’re just select this entire code – you can do this easily by clicking on ‘Raw’, press Ctrl+A (select all) and press ‘copy’. And we copy the entire code found on GitHub. And once we have saved the XML configuration file, we go back to the ‘Content setup’. And what we do, we press ‘Translate link targets’. We press ‘Scan now and adjust links’. All right, now it is completed, we go back to ‘pages’. So on the home page I’m just going to edit the slide URL to be the English version. So we have now, let’s make this in English. And we save this page. And we go back to our pages. And here we will see that the homepage, the Dutch translation and the German translation needs to be updated because I changed the links. Alright let’s update the Dutch translation. Now what you’ll see right here that URL is not added to the Advanced Translation Editor. As you can see there’s no way to change this. However, I got some couple of tricks in my sleave so we’re going back to the settings of WPML. You go to ‘WPML’, we go to ‘settings’, and we’re going to use the “WPML classic translation editor”. Press ‘save’. Now we go back to our pages. And now when I edit my homepage you will see that this is the classic editor just straight into WordPress. But there is something different here, here is our URL you see? To the bookingroomRacoon. Well let’s change it to Dutch version /nl/ and now, and we press ‘Save and Close’. Now I head over to the Dutch version of our website, and I will see that the URL has been changed to /nl/. Alright, that’s the way we can change it. Now that it worked -the translation- we go back to ‘WPML’, we go to ‘settings’, we’re going to change it back to the Advanced translation editor. Press this button and press ‘Switch to using the Advanced Translation Editor’ and press save again. If you see that your internal pages are not linking to the translated pages that are on your website – your internal links, you can press this button and it will scan now and adjust links on your website. This little tool will translate and replace all links that are pointing to your translated pages on your website. Really handy tool. And when you change your links, this is something you definitely should use.

Now on the website I’m also using a theme builder to create my header in a different languages. As you can see, this logo is the home button for all languages as you can see it still goes to the English version, even though I’m on the Dutch version. How we can fix that? It’s pretty easy, we’re gonna do it the same as our footer. We go to ‘Divi theme builder’, we edit the ‘global header’. And we’re gonna add the section to the library. And make it a global item, and press save to library. Save this layout. We’re gonna close this one. We go to the ‘Divi library’ right here. And now we see our header. And we’re going to add our header to the Dutch language. Ans as we just learned, we can only change this in the classic translator yet. So what you can see is that the logo URL is right here. And as you can see in a Dutch translation its going to / but I want it to go to /nl/. Alright we press ‘Save and Close’. And let’s see if it works on the front end on the website. As you can see now the URL is going to /nl/. If I repeat those steps for the German version. And I will see that the menu is also updated on the German version. and that is the way you can change all these things.

Well done! Gut getan! Goed gedaan! C’est trés bien! Well done, you just translated your Divi website into different languages. Now you know how to translate all your pages, and to really build a multilingual website. Isn’t that awesome? If this video helped you out, hit that like button, and if you want to know more about WordPress, then you can just hit that subscribe button and you’ll be notified when I upload new interesting videos. Now, one important thing of translating your website in different languages is that you also need to have your SEO in order. So follow this video and I will show you exactly how you can do your SEO. All right, have a awesome day.