Switching a language in website navigation

When offering a multilingual product or service, you may think about giving your users an option to view your content in a different language. 

You can enable the option to choose among multiple languages so that your global audience can choose which language they want to use. This is possible by adding links to relevant language-specific homepages to your navigation. 

For this example, we will be creating links between English and French homepages.

 

Create language-specific homepage versions

  1. In the Sitebuilder > Pages menu, create a new Home Fr page for the French version. Make sure the Display in navigation option remains checked. Click Submit to create the page.

switching_language_1.png

 

  1. On the blank new Home Fr page, click the Add a new block button.

add_block.png

Choose the Cover block from the Block Library and continue building the page.

 

Adding navigation link on the language page

1. Hover over the navigation at the top of the Home Fr (that's your French homepage) page to activate the menu. Click on the "stacked items" icon Navigation settings:

 switching_language_2.png


2. In Navigation settings, click on the round + button to add a new navigation item.

switching_language_3.png


3. In the New Item menu create a link that will lead to the English home page Home:

    a) Choose the Open a page option from the drop-down menu in the Click Item settings:

switching_language_4.png

 

     b) Choose the Home page (that's your English language homepage) page as a target destination for the new navigation item:

switching_language_5.png

 

   c) Replace the Title with EN:

switching_language_6.png

       d) Click Submit.

 

4. Drag the menu item Home Fr under the newly created menu item EN so it becomes a submenu item:

switching_language_7.png

 

5. Click on the Navigation settings link in the Home Fr submenu item:

switching_language_8.png

 

6. Replace the menu item title Home Fr with FR:

switching_language_9.png

 

Click Submit. Your navigation structure will look like this:

switching_language_10.png

 

When you hover the cursor over the navigation link, it will display a link to a French homepage as a submenu:

switching_language_11.png

 

Click Publish to make the changes live.

 

Creating a switch on other pages

1. Create a switch on the French homepage. Go to the Pages menu and choose the Home Fr (that's your French homepage) page. Hover over the navigation menu in the header and choose the Convert to local element option:

switching_language_12.png

 As a result, all changes made in the French navigation menu will only be displayed on Home Fr page.

 

2. Click the icon Navigation settings. In the menu, drag the FR submenu on top of the EN menu item.

switching_language_13.png

 

This makes the EN item a submenu:

switching_language_14.png

 

3. All done! Click Submit and Publish. 

You can add language switching links to more languages and on more pages by repeating these steps.

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