Creating a multi-language site navigation

You can create language-specific navigation in the header to help your international visitors browse through the pages in their own languages. It helps you create multilingual menus that contain different menu items for different languages. It's useful when certain content is not translated in a specific language and you don't want it to appear in the menu for that language.

Here’s how you create navigation for your multi-language website. For this example, we will create pages and navigation in English, German (DE), and French (FR).

Creating pages in respective languages

  1. Go to the main menu:
    website_menu_-_how_to_access.png
  2. In Pages... click on the round  + button.
  3. Enter the name of the new page, for example, Home - FR and make sure that Display in navigation option is not checked:

global_1.png

  1. Click Submit. The new page has been created.
  2. Go to the Page Settings by clicking the “gear”. Make sure that: 
  • Publish path is set as /home-fr (feel free to edit it by removing extra --- from the path)

  • Language code is set as French (for this example, we chose a country-specific language variation of French)

global_3.png

  1. Click Submit.
  2. Repeat these steps to create all language-specific Home pages, such as /home-DE page in German.
  3. Your Pages menu would look like this: 

 

  1. Repeat these steps to create pages (for this example):

About - EN

About - FR

About - DE

Or use any other page titles and language codes according to your website plan. You can start filling these pages with new content blocks.

Make the navigation local

Before you start

Make sure that the Navigation option is checked in your Header Block settings.

global_5.png

  1. Go to the page where you want to create language-specific navigation.
  1. Hover your cursor over the existing navigation item and right-click:

global_6.png

  1. Click on the Convert to local element button. 

Continue editing the navigation. All changes in navigation will only relate to this page.

Create a local navigation item

Here’s how to create a new language-specific navigation item:

  1. Go to your language-specific homepage (for this example, Home-FR) and hover your cursor over the navigation area to activate the menu:

global_7.png

  1. Click on the “stacked pile” icon to activate the Navigation settings menu:

global_8.png

  1. To add a new language-specific page to the navigation, click the round + button:

global_9.png

  1. In the Item Settings menu, choose the following options from drop-down lists:

Click action: Open page

Page: Home-FR

global_10.png

Title: Replace Home-FR with Page d’accueil (Homepage in French)

 global_11.png

  1. Click Submit. The link to your Home-FR homepage with a title Page d'accueil will appear in the navigation menu.
  2. Repeat these steps for your About-FR page.

Tip: Delete unnecessary links in navigation by clicking the “trash” Delete icon next to the link title in the list. 

global_12.png

  1. Click Save and Publish.
  2. Repeat these steps to create language-specific navigation for each other page in German (e.g. About-FR etc) and other languages if you choose to add them.

 

Turning local navigation into the global navigation

If you decide to make the local navigation menu global, that is, to show it on all website pages, hover your cursor over the navigation, and right-click the area. Click the Revert to global element button:

global_13.png 

The chosen navigation menu will replace local menus on all pages.

Was this article helpful?
0 out of 0 found this helpful