This tutorial is kindly provided by the plugin developer. Please check this link for more detailed documentation: https://elementor.com/blog/multilingual-website-translatepress/ 


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.

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.


Troubleshooting:

Issue: 404 error when accessing a translated page


Solution: Make sure you have pretty permalinks enabled and working. https://wordpress.org/support/article/using-permalinks/#using-pretty-permalinks


If this is the setup you have: http://example.com/?p=123 it's not going to work.

If you don't know how to enable that or have another reason for using it, checkout this addon: https://translatepress.com/docs/addons/language-get-parameter/


You know they are not working correctly because WordPress normally takes over 404 pages and serves a nice error for the user that looks like a page on your site. If your 404 error page comes directly from the server (all you get is a "The requested URL /sample was not found on this server."), means it's not configured properly.


Please note Pretty Permalinks require configuration on the server-side for it to work. It's possible you either don't have Mod Rewrite for Apache enabled or WordPress can't write it's .htaccess file with the rewrite rules. Please try to contact your host to debug this further.


https://translatepress.com/docs/troubleshooting/

https://wordpress.org/support/article/using-permalinks/#using-pretty-permalinks

https://translatepress.com/docs/addons/language-get-parameter/