Google Translate

Published on 09/20/2021
Help Article
Paul Rayment
Web Developer

Google Translate is a feature that allows the user to translate the page into the language of their choosing.

This example will show how to install the libraries for google translate, as well as how to implement the translate button.


How To: Install Google Translate

To begin you need to install the following files into the uploads directory of the website.

Once these libraries are installed, the popup, as well as Google, need to be initialized by the following code.

This code needs to be executed once the document is loaded. By standard in Leiout, the code is put in the initialize-all.js file along with all other library initializations.  


This initialization function sets the class popup-translate to create a new modal with a Google translate button inside of it.

Any element can be targeted instead of popup-translate, though for this example we will create the .popup-translate element in the navigation menu.

Creating the Translate Button

The last step is to add the popup-translate button to the wrapper tab in the navigation menu.

The following HTML is added to the Navik menu as a sister element to the auto-generated navigation items (designated by {-ITEMS-} in Leiout).

Then finally the following HTML is added to the Navik menu nested inside the div with the class container (the HTML is a sister to the class navik-header-container).

The translate button should now appear on the navigation menu as shown below (an example can also be seen in the navigation menu of

Final Note

It should be noted that the translate button can be placed anywhere inside fo the document as long as it is targeted by the init_translate_popup() function in the Javascript.

Lottie Animations

26, Feb 2023
Help Article
Navik Mega Menu

This article explains how to create and use the mega menu functionality in Leiout navigation menus.

20, Sep 2021
Help Article Design
Mix Blend Mode

This help article explains the CSS mix-blend-mode property and how to incorporate it with hero image...

06, Aug 2021
Help Article Design

This article explains how to use the Isotope JavaScript library and shows an example of it in action...

02, Aug 2021
Help Article Plugins