Do you want to support my channel? Leave a like or buy Divi / Elementor Pro with 10% discount via the link below. That will help me enormously to create these free videos for you and keep going!
⇒ Software that I recommend:
✅ Divi with 10% discount
✅ Elementor Pro
✅ SiteGround 70% discount
✅ WP Rocket 10% discount
I want you to succeed with your website, so lets get started.
All scripts and CSS snippets: 📜 https://wpressdoctor.com/translatecss/
⏱️Timestamps⏱️
0:00 Intro
0:39 Installing TranslatePress
1:18 Settng up TranslatePress
3:00 Translating the website
4:03 Translating buttons
4:23 Translate images
5:57 Adding translation to the menu
7:35 Adding more languages ⇒ https://wpressdoctor.com/translatedivi/
8:36 Installing the paid version
9:25 Setting up the paid version
11:00 Automated translation with DeepL
13:37 Adding more translations to the menu
14:47 Fixing styles in languages
18:20 Change dropdown width
18:52 SEO multilingual
20:10 Exclude a word from translation
✅For tips and tricks on getting the most out of WordPress, don’t forget to subscribe: https://wpressdoctor.com/sub
📖Transscript📖
At your wordpress dashboard you go to ‘Plugins’ -> ‘Add new’. Then we’re going to search for the plugin “TranslatePress”. Press enter. As you can see TranslatePress has been active for more than 200 000 websites it’s very popular. And last update is four days ago. The last update is very important because that tells you if the plugin is still being maintenanced. Press ‘Install now’. And after it been installed we press on ‘Activate’. There are two ways to go to the settings of TranslatePress. You can scroll down and you can press ‘Settings’ right here, or you can go to ‘Settings’ and then we go to ‘TranslatePress’. Click on it. Well let’s first close this advertising right here. If you want to receive the newsletter you can sign up. We don’t want it right now. So let’s start with the default language. It is in English and that’s right our website is in english. Now we can add our languages we want to translate the website in. I’m going to translate it to Dutch. And press ‘add’. If you want to add more languages you will need the pro version. I’m going to show you later on this video how we’re going to do that but one language is completely free. So let’s start with this one. Here you can choose if you want to show the language name in the native name. So it won’t say Dutch but it will say ‘Nederlands’. I don’t like that I just want the flags up there so we’re going to leave it on ‘no’. You can use a subdirectory for your languages. I would not advise you to do this for SEP purposes. Just leave this on ‘no’. All right if we now scroll down the ‘force language in custom links’ is is yes it’s okay. The language switcher, we have a shortcode, the short code I want to be the flag with full language names. You can change it anytime you want. For the menu item I only want to have flags. Later on this video we’re going to add it into our menu, first we’re gonna translate it. And the floating language selection we can use the flags with names, and it’s dark and it’s on the bottom right, you can do whatever you want. I’m gonna turn it off right here, because i don’t like the style of this entire thing, I only want to have it in my menu up in the right corner. Press ‘save changes’. Wasn’t that easy? These are just the options we need to change right now.
Let’s go to ‘translate site’. If you press this button the translator will be open. How we translate the word of TranslatePress is really amazing. Just hover your mouse over the text you want to Translate. Press on the icon, here you can see from English “Dealing with the”… to Dutch. If you don’t want to translate it all manually, just copy your text go to the DeepL translator: just search for DeepL translator. You go here. And then you just paste in your text. And we go to Dutch and we just copy it right there, get back to our website and paste it in right there. Then we press ‘Save translation’. You can press ‘next’ or you can just press this one. And again we’re gonna translate it really fast and that applies to everything you see on this page just press the icon copy your entire English text, translate it with the DeepL translator, and paste it in right there.
Also with buttons, you can just hover your mouse over it, press the icon, and it says “get in touch” so in Dutch it’s just “Contact”. In Dutch its just “Contact”. Press ‘save translation’ go to the other one.
When you press next sometimes, you will see images that you can translate to a Dutch version. This is very useful for SEO purposes. For example: these images has been called “ZEPCAM T3 Live Body Cam”. This is a good URL for the Dutch people because the Dutch language also says bodycams. So this is this is all right. But if you have the French versions or the German versions, we might need to change this. In this way you can just upload a new file, put it there, and press the title attribute you can just change it or the alt text you can change it, and save your translation right there. If you press ‘next’ you will go to the next file or image or button or whatever. Sometimes you might encounter this: You see in English, you see an entire code, and some text between it. Well, just copy the entire code, paste it to the language you want to make, and then you only change the words between the lines. Never change the entire code, because your website needs it. Sometimes when you’re translating you see this: “Suggestions from translation memory.” It means that you’ve already translated it before, and TranslatePress is just adding it there so you can just click on it and then it’s been added to your translation. And then you just press CTRL+S on your keyboard, it’s been saved and you press ‘next’. Once you’re done translating your entire page you have selected every button when you have translate everything on the entire page then you press up there on the cross icon and then you go up here and you go to ‘Menus’. Because we’re gonna add the flags in the top right corner. In the main menu on your website, you now see that there is a language switcher right there. We click on this one, and we’re just gonna add the opposite . Just press on this one, and press ‘Add to menu’. Now when you scroll down in your menu, you see that there is all the way down a opposite language language switcher. Now I want everybody to see this one, not only logged out users, also the loggedin user, just everyone may see this. I press ‘Save menu’ and then we go to the front end of our website. Always open up your website in a private window or incognito or whatever. And then we can see that everything on the website is still English. That’s okay, but there is the flag, right there. Click on the flag and now everything has been translated completely free on our website, well only this page. The only thing that has not been translated is of course this video. Because as you can see this is a video with text inside of it. So what we should do is, we should upload a new video with the translated text for every single language we’re going to create. So TranslatePress is really easy to translate your entire website. So if you want to translate another page on your website because we only did the homepage just go to your menu inside the translation editor and just click on the page you want to translate. It just actually goes to that page and here you can translate all this again. It is really simple. But what if you want to add more languages? Well as you can see when I now want to add the German language, and I press ‘Add’, this is what it says: ‘you will need a add-on. And the add-on is not free. Of course they have to make money somewhere, so if you want this then just go to https://wpressdoctor.com/translatedivi and press enter. When you use this link and you buy something then I get a very small commission that helps me out to keep making these awesome videos. So thank you very much. If you just have one website and you only want to translate it in multiple languages and using the DeepL translator like i’ve showed you just manual, then the personal license is perfect for you. However, if you have more websites or you want to have a automatic translation with DeepL for example, you would need the business account. So we’re gonna use the business account. I’m gonna press ‘buy now’. And then you can fill all this in with your details and press ‘I agree’ and press ‘purchase’. Go to translatepress.com, log into your account and this is what you see. You see your downloads, your orders, your subscriptions and your profile. So let’s download the business version or the personal version – you will see it right there if you have one- and if you press on it it just downloads. And then you go back to your website. And you go to ‘plugins’ -> ‘add new’. We’re going to press ‘upload plugin’ select the plugin we just downloaded and press ‘install now’. When it’s installed we press ‘Activate plugin’. When you scroll down you now see that there is a business version and the normal version. You still need the normal version, you cannot disable this one or else the business or the personal, or the pro version will not work. Allright let’s go to the settings of TranslatePress multilingual. And now we can add another language so I want to have German language added, and I press ‘add; . And here we go. And I also want to have the French language added, and I also want to have the Italian language added to this website, and I also want to add Spanish and last but not least I also want to add Portuguese. Like that. As you can see my client want a lot of different languages on their website. No wonder they want to translate all automatically using DeepL. I’m going to show you that in just a second. First we’re gonna make sure that the language selector works properly. When you have added all the languages you want, you just go down – you can always add more languages later on, no problem- and press ‘Save changes’. When you go to ‘Appearance’ we go to ‘menu’ we’re gonna see what happens with the plugin. And if we now see our menu and you scroll down, you will see that the language selection has been deleted. It has been removed because our translations are not ready yet. When I’ve added all these languages, I go to translate site again and when I now click on a title or text or anything I can see that all these different languages has been added to the left side. As you can see Dutch, we already done that German, French, Italian, Spanish Portuguese… those are a lot. So I don’t want to translate this entire page or my entire website all manually. You can choose to do so, but I don’t want it. So there’s a solution for that how are we going to do that? Well if you go back to the TranslatePress settings, there is a ‘Automatic translation’ right there. Enable automatic translation: we say ‘yes’. What are we going to use? We’re going to use DeepL, because I think DeepL is better than Google Translate. And if you just go to plans and pricing you can see that you need the DeepL API key. If you click on this one you will see that you have a free version with only max 500 000 characters a month. This might be enough for you, because it’s every month it will be added to your account. So maybe if you just translated for one language extra, this might be enough. Then you can just sign up for free get your API key. Follow the video of TranslatePress, but we want the DeepL API pro. Now we have more than 500 000 characters a month, so that’s what we have. So we go back to TranslatePress, and we’re going to add our API key, and then we press ‘save changes’. After we’ve set up the automatic translation, let’s go to ‘addons’ because what we need is we need the SEO pack. We need to activate this one. Why? Because we want to change every slug, every page title, every description, we want to change it everything into the other language so that we can actually rank in Google within TranslatePress on our website. Once we have set that up we go back to ‘translate website’ and then we can just switch to another language like German, see what happens. DeepL automatic translation has translated our entire homepage already in German. How awesome is that? Everything has been changed so this actually works pretty good. Leave this all, because DeepLl is working for us right now. If I want to see an automatic translation how many characters has been translated, I just scroll down and here I see that there are 17 000, almost 18 000 characters has been translated with just the home page. So that’s awesome, it will translate it on the fly, it will save it in the database. That’s what it says right here: “To minimize the cost, each untranslated string is automatically translated only once. Then stored in the database.” So when my website visitors are actually checking the website, changing new languages, it will automatically translate it to their language. So when we have multiple languages, we need to change something in the menu. If we scroll down we will see that our opposite language has been removed from our menu that is because it works slightly different, because we need to create a drop down. So you go to ‘language switcher’ you go to ‘view all’ and you’re going to select all the languages you’ve added and you press ‘add to menu’. Then scroll down again and what you can see now is that the current language is right there, but if you just create this one you can change the location but now we are creating a drop down. Press ‘save menu’ and now when I open up my website, I see the American flag right there so i know we’re in English, and when I hover over it, you will see that I can change it to any language I want. So let’s go to theSpanish version of our website. As we are opening it now it will be translated into Spanish with a dblthe DeepL translator on the fly. So now the home page has been translated into Spanish and all the strings and all the words has been saved inside of our database, so it only has to translate it once. So the next thing I’m going to show you is how we can change the buttons. Because as you look at the website now you can see in English we have two beautiful buttons here and a lot of spacing between them. But when I switch to another language, look what happens. Let’s go to French and scroll down, here you can see this those buttons are completely messed up they’re spacing. How are we going to change that? Because it’s not only in French, it is also in German. This button is just way too close to the other one. So that’s not the way it’s supposed to be. How can we change that? Well i’m going to show you. So when you just go to your original build you scroll down and you go to the buttons or anything you want to change in another language. Just open up the settings, and then you go to ‘advanced’ and then you go to the ‘CSS Class’ and we type in something like “contextbutton-left”. And this way we can select it using some CSS. Alright press ‘save’. And you go to the other button we’re also going to give it a class and that class would be “contactbutton-right”. All right, just save it and save your page right now. And we’re going to exit the visual builder and we go into the Divi theme options. You go to Divi -> Theme options. And when you scroll down you can here enter some custom CSS. Now I’ve already placed some CSS right there, but we’re going to add something more. So the trick is, to select these buttons in another language. And for that you need another code which is TranslatePress and then the language. Where do you get the language? Well if you go to your settings and you go to TranslatePress open link in a new tab. And here you’ll find all your languages that have a code with it you see? Now this code is the one we need to add within our CSS. so for the French language this would be the code. Now we’re going to type in the button classes we’ve just added. Which is in our case: “contactbutton-left”. Now the thing we need to do right here, is we need to give it some spacing. So what I did, was just getting the margin on the right side -50 pixels and padding right to 0 pixels. Now if I now save my changes, and there is our button. You’ll see that the size of the this first button is okay, but we need to add some more space between the first one and second one. So we’re going to back to the settings. So we’re going to type a second rule, in the second rule we will add the contactbutton-right have a margin on the left side of 75 pixels. Which is important. And now you can see that there is some space between the two buttons and this is exactly the way how I want i.t if you want to change more items in more languages this is the way you should do. So my final CSS looks a bit like this. I have all these different languages where the button wasn’t right and I’ve given them all some some more margins some less margin some padding and now when I save my changes all the language buttons will be great! So this is the way you can change anything from images to buttons from anything and to target it’s very specific to change the spacing or margin per language. Another thing that really bothers me is the size of this drop down menu. Look at this. This is amazing, why is it so enormous? It doesn’t have to be this way. But we’ll need a little bit of CSS to make it smaller. Because there’s no option in TranslatePress – well I couldn’t find it – How to change it. So this is what we’re going to do, make some space here. Just paste it in here. You can find it in the description of this video. And press ‘save changes’. The drop down menu is just a lot more smaller. This is exactly how I wanted it to be.
Another thing I want to show you is how to change the SEO for your multilingual website. And what you have to do is you have to click on this one select string to translate, and the first thing is your slug. Now your slug is the URL. So here we change the body cam law enforcement all the different languages that we have added in our TranslatePress website. And here you can change them because Germany – it’s not law enforcement, in Germany it’s a completely different title, because in Germany this doesn’t make sense. And if you’re in doubt about what it was you just go to your German version. And i’m going to select the slug again, and here you can see that the STrafverfolgung is a translation of law enforcement. I don’t know if this is the right translation for this purpose, but we’ll use it anyway. So we’re just gonna copy it, and we’re gonna paste it in this URL. And we’re gonna save translation and now the URL has been updated. You can also change all the other different things of SEO, like the page title, the description, og title for your social sharing. Also if you want to change your description in different languages – it has already been automatically translated by DeepL of course – but you can here change the translation if you want so.
Alright another very important thing i want to show you is how you can exclude some words from being out of translated this is very important i’ll show you why if you go to the solution of products we have a product called zapcon cloud you already see what i’m aiming at we all know of course how it is meant the cloud an automatic translation will recognize this as a cloud in the sky and that gives us some really strange translations how we gonna change that well it’s pretty easy just go to your dashboard just go to TranslatePress settings and go to advanced and if you just scroll down here you can see exclude strings from automatic translation and here we can just add the word cloud that’s it just scroll all the way down and press save changes and now the word cloud will not be translated very useful and good to know another thing i want to show you is how you can change the american flag in your translate for another flag for example a english flag it totally depends on your target audience but i’m going to show you how you can do so just go to plugins and add new and here we’re going to type in wp file manager and press enter and you can also use another file manager or your ftp or your hosting company which shows you your file managers or you can do it via your hosting company it’s all good as long as you can change some files on your website press activate on the file manager and then we go to wp file manager right there and then we’re going to navigate to TranslatePress so you go to wp content click twice then you go to plugins and then we go to TranslatePress multilingual then we go to assets and then we go to images after that we go to flex right there all right so what you can see within the flags are all the flags used and there are their names are the codes that we saw in the beginning with these settings of translator press what you’re looking for is this one the english we have english south africa we have english us and we have english great britain i’ve already saved the english you us original because i’ve already done this of course so what do you need to do if you want to have a great written flag you just download the great britain flag there press on this download button and save it to your computer then you go to english us click on rename right there copy this name then go to your computer and here you change the english great britain to to the name we have just copied english us press somewhere else now it has been changed and now we drag and drop this file and drop it in your wp file manager the item already exists do you want to overwrite it and press yes and now the english us flag has been overwritten by the great britain flag that’s it now when you look at your website right now it has not been updated immediately that is because the images has already been saved in your computer and it’s cached so it will not change however if you look on some other laptop or another computer other device or maybe a mobile phone you will see that the the flag has been already changed don’t forget to empty your cache you can use wp record for example to clear your cache right there if you don’t use any caching plugin and you’re still looking why should i do that then please look at my tutorial right here because wp rocket will extremely speed up your website it feels blazingly fast also google’s google likes your website a lot more and now you know how to make your divi website multilingual isn’t that great and wasn’t it easy i mean TranslatePress is so easy so if you have questions just drop them in the comments below and i’ll be glad to answer them if i helped you out with this video hit that like button so i know we were on the right track and of course subscribe if you want to see more videos about wordpress related stuff alright guys i’ll see you in the next video have a awesome day.
