Here is a simple way to add Google Translate to your website.
Here is an extremely simple way to display your website in different languages until you are able to create your own translation files for all of the languages you need.
Step 1.
Add the HTML Elementor widget to where you would like to display the translation selection. (Example: The website’s header).
Step 2.
Add a CSS ID to the HTML Elementor widget. ( Example: google-translate-selector )
Step 3.
Add the following code to the HTML Elementor widget.
// Make sure to include the "script" tags.
<script type="text/javascript" defer>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
};
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" defer></script>
Extras
You can add CSS to style it a bit.
Here is the complete code with the CSS included.
<style>
#google-translate-selector {
background-color: white;
padding: 5px 20px;
border-radius: 5px;
border: 0.5px solid #333;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
</style>
<script type="text/javascript" defer>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
};
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" defer></script>
Minified CSS if you prefer
<style> #google-translate-selector {background-color: white !important;padding: 5px 20px !important;border-radius: 5px !important;border: 0.5px solid #333 !important;box-shadow: 0px 0px 10px rgba(0,0,0,0.2);}</style>
