Have a site that's in multiple languages? Follow this guide to create a mobile website that includes the option to select a language.
Please note: This guide is meant for sites that follow a URL structure of domain.com/en for the English home page and domain.com/sp for the Spanish home page.
Creating the site
- Convert using your domain without any subdirectories (for example www.domain.com).
- Select List style navigation, and customize the navigation so that the following parameters are set:
- Auto sync navigation: Off
- Use explandable navigation in inner pages: Off
- Show main navigation in inner pages: Off
- Show subnavigation in inner pages: On
- Show "Back to home" button in inner pages: Off
- Delete any extra elements from the home page, so only the navigation remains.
- Unsync the home page.
- Using the Add Page button, add the pages that represent the different languages of your home page. For example, domain.com/en or domain.com/sp. To learn how to add a page from a URL, please see our article Add a page.
- At this point, you will likely have navigation items that include your different language homepages, as well as other navigation pages. A bit like below:
- Move the language specific pages under the correct language menu button. In this example, pages One, Two, and Three, are moved under the English button, to make them the navigation for the English Homepage. Use the Add Page button to add navigation items for the other languages.
To get a feel for how a live multi-language site works, you can view the site used in this tutorial by visiting m.mobilewebsiteserver.com/site/multilanguage
What if your customer accidentally selected the wrong language and they need a way to pick a different language? Easy! Put a Paragraph feature in either the header or the footer, with links to the different language versions of the site.
The image below shows that you'd link the English page to the English desktop URL. This will actually cause the user to go back to the corresponding mobile page.
Alternatively, you could just include one link that takes the user back to the landing page where the language is selected.