It's easy to display your content in different languages by setting up new pages.
All websites created with the Envato Sites Editor are in English by default, but you can change this in Settings.
It's also possible to specify a language for individual pages on your site.
This guide demonstrates how to set up a website in one language to begin with, and then shows how to duplicate pages so your content is accessible in other languages.
For single page websites
If you have only one page but need to display the same information in two languages, this is what we recommend:
- Go to Settings and scroll down to the section called Language Settings. Select your website's default language from the drop down list. Let's use Spanish as an example
- Click Build to open the Page Settings toolbar, then give your homepage a sensible Title and Page Address. It might be a good idea to include "Spanish" or "ES" in both the Title and Address, for example: Website name | Home_ES as the Title and /home_es-mx as the Address
- Edit the blocks on the homepage to add your content in Spanish
- When you're happy with the content duplicate the page
- On the Page Settings toolbar, give the page a Title and Address that reflect the new language, for example: Website Name | Home (English) as the Title and /home_en-us as the Address
- Select English as the Page Language
- Edit the blocks to replace the English text with the Spanish translation
- Then, set up your Header navigation with two links: one to the Español page and one to the English page. This way, visitors can switch between viewing your content in the two languages.
You could easily use this technique to display content in as many languages as you require. Simply duplicate and edit a page for each language!
Using the example English and Spanish website, this is what the Header navigation could look like:
For complex or multi-page websites
Header navigation can only be in one language. When you add a Header block to a new page, your navigation links will automatically appear. It's still possible to help your visitors navigate your site in different languages, and that's by using a different block for your navigation links.
In the demonstration below, I'm again using English and Spanish as my example languages.
Set up a simple landing page that directs visitors to the 'homepage' in their language. In my example below, I've used a very simple Header (Large) block to force visitors to choose between viewing more content in Español or English:
Then, create a new page which will become the "homepage" for a specific language.
In the example of an English homepage below, I used the block called Hero Text as the header, instead of the Header (small) or Header (Large).
Each button links to a separate page with content only in English.
When you're happy with the design and content on the homepage, duplicate the page. In the new page's Settings, change the Page Language to Spanish:
Translate the page contents to Español:
Edit all the buttons, translate the button names into Spanish, then point them towards the correct Español page.