How to Create a Multilingual Website With Elementor and TranslatePress

In this article, we’ll give you a brief overview of what TranslatePress does, and show you how to use it with Elementor to translate your site’s pages, directly from the front-end.

Creating a website for your business or portfolio is easy thanks to WordPress and plugins such as Elementor. It’s a great way for potential clients to notice you and find you online. But, just as clients in your country can easily find you, so can potential clients from the rest of the world.

And if you run the type of business who can serve clients from all over the world, wouldn’t it be nice if you could direct them to the version of your site that displays in their native language?

Fortunately, WordPress is available in many languages thanks to the translations contributed by the community. But, what happens when you need a website that’s available in more than one language?

That’s where plugins like TranslatePress come in handy. In today’s post, we’ll give you a brief overview of what TranslatePress does and then show you how you can easily use it with Elementor to translate your site’s pages directly from the front-end.

What Is TranslatePress?

TranslatePress is a translation plugin for WordPress that can be downloaded for free and used to translate your entire site directly from the front-end. The plugin is even compatible with WooCommerce so you can easily translate your entire storefront. Main features include:

  • User-friendly interface which displays translation in real-time
  • Fully compatible with all themes and plugins
  • Support for both manual and automatic translation (via Google Translate)
  • Ability to translate dynamic strings added by WordPress, plugins, and themes.
  • An editorial control allowing you to publish your language only when all your translations are done
  • And more.

It’s worth mentioning that the plugin does have a premium version which offers several add-ons which allow you to add unlimited languages, automatically detect a visitor’s language, display different navigation elements for different languages, and more.   

Why You Should Use TranslatePress Instead of Google Translate

You might be wondering why you should be using TranslatePress instead of Google Translate. The main benefit of using TranslatePress is that you are able to translate all the pages on your site yourself. As good as Google translate is, a machine-translation can never compare to the accuracy of a human translator.

When it comes to similar translation plugins, TranslatePress offers all the functionality you need for free and includes a much more intuitive user interface than other popular plugins.

How to Use TranslatePress With Elementor

Now that we’ve covered what the TranslatePress plugin offers, let’s take a look at how we can use it to translate pages built with Elementor. Here’s a step by step walkthrough of the process.

1. Install and Activate the Translatepress Plugin

The first step is to install and activate the TranslatePress plugin. Start by logging into your WordPress dashboard and navigate to Plugins > Add new. Search for TranslatePress, install it, and then activate it.

2. Configure the Plugin’s Settings

After the plugin has been installed, go to Settings > TranslatePress. From there, you will be able to set your desired language and configure other settings of the plugin. As you can see from the screenshot below, you can choose how the language name displays, whether you want to use Google Translate, purchase and activate add-ons, and more.

For the purposes of this tutorial, we’ve set the desired language to Italian but you can choose whatever language you want. When you’re done configuring the settings, save the changes.

3. Create a Page to Be Translated

Once you’ve set up the plugin, we’re going to create a new page that will be translated with the help of the TranslatePress plugin. Go to Pages > Add New. Name your page and then click Edit with Elementor.

For this tutorial, we’re starting off with an About page template. If you want to follow along, use the About – Personal Page template, otherwise, feel free to use any template you want.

We’ll change the text to include English text and then we will add some extra elements which include a form as well as a few buttons below the infoboxes. We’ve also added the header and footer using saved templates in Elementor.

When you’re done adding your information, click the Publish button to make your page live. Here’s how our demo site looks after we’ve made all the changes:

4. Translate the Page

To start translating the page, you’ll need to go back to your dashboard, head on over to Pages > All Pages and then click on View under the page you’ve just created. Once the page loads, you can click Translate page from the top admin bar.

In case you have the admin bar disabled, you’ll need to add your page to your main menu by going to Appearance > Menu. There, find your page, add it to the menu, and then click Save. You can then click on Translate Site which will load your homepage by default. To go to the Demo page we’ve created earlier, click on it in the navigation menu.

Once your demo page loads, you’ll notice the plugin’s interface on the left and your page on the right-hand side of the screen. Translating your page is as simple as hovering over the text you want to translate and clicking the pencil icon. Let’s start by translating the Contact Us menu item first.

Translating Menu items

Hover over the Contact Us and click the pencil icon. You can then enter the translation in the plugin’s interface and when you’re done, click the Save Translation button.

You can preview your translation by changing the language at the top of the TranslatePress’ interface:

Next, let’s translate the heading in the infobox for Workshops. Click on the pencil icon, enter the translation, and then hit Save. Your translation will appear on the page:

In a similar fashion, you can translate buttons. Hover over the button you want to translate and follow the same process. In this example, let’s translate the Apply now button:

Lastly, let’s translate the form elements in our appointment booking form at the bottom of the page. Clicking individual field labels will allow you to translate the entire form into another language. The translated text will appear on the labels and on the buttons.

To translate the rest of the site, continue in this manner, following the steps above to find the text you want to translate and then entering the appropriate phrase or sentence in the target language. Once you’re done with that page, you can easily continue with the next page by clicking on it in the menu or by viewing it from the dashboard and then clicking Translate Page.

Final Thoughts

Creating a multilingual site or translating pages created with Elementor is not as daunting as it seems. With the help of the TranslatePress plugin, you can easily translate all of your pages directly from the front-end and instantly see the translation. Use the tips in this article to guide you through the process. Happy translating!

Liked This Article?

We have a lot more where that came from! Join 760,658 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Brenda Barron
Brenda Barron
Brenda Barron is a freelance writer from Southern California. She specializes in WordPress, technology, and business and founded WP Theme Roundups. When not writing all the things, she's spending time with her family.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

62 Responses

    1. Hi Simone,
      The main difference is that everything is translated directly from the front-end, using a visual interface similar to the WordPress Customizer. You simply click to select a string, enter its translation and it updates real-time.

  1. Thanks for this tuto.

    On the side note I was surprised that you guys literally blocked me from your page, so preventing me, to either comment, or message you.
    This is so rude, and unprofessional.
    Can you tell me how can you block me as a customer and user, and the reason why?

  2. I just fine an Issue and the support just solve it: I’m using Conver Pro for my lead capture, with the “on click function” that add a class to button that works as a Trigger… I was thinking how could I launch a different pop up and they just answer me with this so useful trick: https://translatepress.com/docs/translation-shortcode/ so instead of a button, I just need to use the shortcut element in elementor. I could not be more happy 🙂

  3. Nice article!
    How the language is selected? Is it possible to select the language of the website knowing the language of the end users?

      1. Hello,

        I install translatepress on my existing wordpress-elementor website and I have some problem with Hebrew and Arabic translation.

        I mean the website native language is French and on my Hebrew or Arabic website version (translated with translatepress) my layout is not ok.

        Does anyone have this problem ?

  4. Is it possible to translate also the blog posts with this plugin and will it work if I use an Anywhere Elementor Pro blog post template?

  5. Is there a way to translate header/footer templates with Polylang? We would use that plugin to localize our site to multiple languages, but though pages have the option to create/edit language pairs, the Elementor templates don’t. Can you please give some info on this?

  6. Could you guys show us how to add a language switch/button to the navigation bar? Each time I try to add more than 3 columns to the navigation bar, the responsiveness becomes an issue (things appearing underneath each other instead of next to each other). Thanks. Good post!

  7. It seems like the translation of SEO elements like slug, description and title is available only in the paid version. Does this mean that if I use the free version my translate articles or pages are not SEO optimized?

  8. Are you serious? I thought by using any page builders is somewhat impossible to create multilingual website, and now you proved me wrong! thank you for this post, bookmarked and going to implement it very soon.

  9. I have a little problem.. All my pages seem to work perfectly, except the homepage.. Whenever I change the language from dutch to english I get the error that my website has been redirecting me to much and that I ned to delete the cookies.. Did that, didn’t work.. Only my homepage shows this problem! Anyone know what te problem is?

  10. Yes! I had the same problem! Before deleting your browser cookies, you also have to go on yoast in the section “redirect” and delete all the redirect to your homepage! Keep only the one that shows the correct link! Then you clean the website cache and then the cookies! Refresh and it should work! Hope this helps!

    1. Thanks for the reply! The only problem is that I have not yet installed Yoast for my website.. So that can not be the problem I think.. Do you have a clue what else it can be now?

    1. As far as I know, I am not using any plugins that creates a redirect.. Can you maybe name a few? Sorry for being a little bit of a noob about this 🙁

  11. Hi,
    Before I discovered TranslatePress, I already used Elementor. Now I need a multi lingual site. Can I use TranslatePress now over the already created pages / posts? Or do I have to create all again as mentioned this page?

    1. I’m answering to my question. Yes, I tried and it works great even if you already designed your page . Many thanks to developers!

  12. I am having a bad time with this…. how do I translate popups for example? Animated headlines seems not to show to be translated when using typing effect and using other effects, depending on the size of the word you are replacing, text is being cut. Blog was broken (My goal was to leave blog out of translation but when in the second language, if user clicks on the blog, page is “text dead”, all texts are gone. I bought WPML but decided to try something else because WPML + Elementor is way too heavy. Translatepress seemed perfect, is very lightweight BUT it lacks on settings… and although it’s nice to translate live, it should have a backend type of translation option too.

    1. Wow very bad notice! Do you try with Polylang? Maybe can help you. I dont know about the size of the combination of Elementor + Polylang, but you can try..

  13. How do I translate link button

    Hi Sir I want to solve the problem I have encountered and I am working on a multilingual site Use elementor When working in Slider you put the problem button in the link button and not the texts. How do I translate an example url to http://www.cartbeach.com/ar
    http://www.cartbeach.com/en
    Screenshots: https://translatepress.com/index.php?gf-download=2019%2F03%2FNew-Bitmap-Image-3.png&form-id=1&field-id=8&hash=1074824c6bc66d143c63cd14c392517cbc98a335efa39421daafa2607e5d1494

  14. I am able to translate all text with TranslatePress but I want to have different (YouTube) videos for my Dutch vs English version of my website. I have videos with text in it and I want to show the relevant version of my video to my website visitors based on their selected language. Does anyone know how to do this in Elementor or with TranslatePress?

    1. Hai, i fixed it by changing the permalink sructures in the settings in wordpress. It has to be set on the second to last one. Then it workes fine 🙂

  15. if you want to show two different videos (each one in a different language) can you implement this in the translation? or is only for text? thanks!

    1. You could use a conditional shortcode based on language like this:

      [trp_language language=”en_US”]
      [/trp_language]
      [trp_language language=”fr_FR”]

      [/trp_language]

  16. I like the translation feature but I have a huge issue and that is when I have translated one page from English to Swedish, then once I make a small change in the default page which is in English, then all my Swedish translation is gone, and it by default goes back to English text on the Swedish side. This also happens when I do no changes at all. I translate all and save it today, and tomorrow when I go back, half of the text is translated into Swedish and half is back to English. Very frustrating and I don’t have time to keep translating. Please advise, as I otherwise love it.

  17. 2 small questions:

    – Does the plugin duplicate images for alt tags in multiple languages or can you use different images?

    – Can you slightly alter the design, e.g. text in 17px in English and 16px in French?

    1. Hei Thomas, did you manage to find the answer to your problem? I have the same question, I want to alter a few details on the design of the translated page and I don’t know how.

  18. Hello!

    I have WPML and Elementor installed with Motopress Hotel Booking engine (Villagio theme).

    I’m struggling with the piece of code that seems to be the same in both original and translated pages. I.e. I create main page in English, then make all the structure and insert shortcodes that I need in English version. Then I’m going to create a translation of the base English page. Then I change IDs in some of the shortcodes of the translated page, but nothing happens. It seems like Elementor catch the code from the page with English and throw it on the translated page. Trying to make templates in Elementor and the translate it and change IDs inside the Elementor templates – nothing… I’m in stuck. Help me, please!

  19. Can you use different fonts with specific text styling and design for translated pages with TranslatePress?
    For example, the English version can be translated into Thai and Chinese languages. The translation is always different in a number of letters or signs for translated texts which significantly changes the length and final design of the page. Thai and Chinese fonts are also contributing to new visuals of the translated pages.
    Thanks!

  20. Hi! is it possible to use this plugin after the wordpress site is up and running and mainly created with Elementor.
    We started with a german site (but a english wordpress) that is up and running and now we want to add english and russian. I’m looking for a plugin that will work not only from the very beginning but with an already finished website…
    TIA,
    Isabelle

  21. Hello, when I searched someitng in my english website, it became turkish. How can I hold on my english website when I clicked in my english language side of my website ?

  22. Hello, I am already using Elementor and TranslatePress in my site the problem is that am using a custom font for my Arabic version (which is the default for my site) my question is… is it possible to change font family and size for the English version?
    Thank you …

  23. Hi there, (trying something else than Hello)

    Menu confusion.

    I have two languages (Danish/English)
    I addet language swicher to my top-menu

    When jumping from danish to english – I would like the link to change into “Danish” – So instead of setting to: “Current Language” I would like it to be “Opporsite language”.

    1. I tried setting up the shortcode – here you can swich between the two – but you can’t when using the Menu Option – but this would be much easier. Maybe I’m doing something wrong?

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 760,658 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.