EverWeb doesn't translate your website, but you can build both languages in one project. Put your main language at the top level and the second language in its own directory (a page that holds other pages, like a folder), with its own Master Page. Set each page's Language, and put a button on every page that goes to the same page in the other language. Visitors can switch with one click, and Google can show each version to people who search in that language.
When you'd use this
- A Montreal bakery wants English and French pages.
- A church in Texas holds services in English and Spanish and wants the times and news in both.
- A guesthouse in Bavaria gets most of its bookings from British guests, so it wants German and English.
Before you start
- Have the translation ready, ideally from a person who speaks the language.
- Use Responsive pages if you can. With Centered Layout pages and separate mobile pages, two languages means four pages for each page of content.
- Plan the addresses. For example:
| Page | English (main) | French |
|---|---|---|
| Home | yoursite.com | yoursite.com/fr/ |
| About | yoursite.com/about.html | yoursite.com/fr/apropos.html |
Build it
- Build your main language first, with a Master Page. See Put the same header, menu and footer on every page with a Master Page.
- Make the second-language directory. Click Add Directory in the toolbar and choose a design. In Inspector > Page Settings, set its File Name to a short code such as fr. This directory page is your French home page.
- Copy your pages into it. Right-click a page in the page list and choose Duplicate, then drag the copy a little under and to the right of the directory so it goes inside. Translate the copy. See Copy a page, or a whole website, within a project or to another project.
- Make a Master Page for the second language. Click New Master Page, copy the header and footer from your first Master Page and paste them in, then translate them. Attach it to the second-language pages in Inspector > Page Settings.
- Set the language. In File > Edit Publishing Settings, set Language to your main language, such as English Canada. Then select each second-language page and set its own Language in Inspector > Page Settings, such as French Canada. Search engines and screen readers use this.
- Translate the page settings. Write each page's Web Page Title and Web Page Description in its language. Type menu wording with accents, such as "À propos", in Navigation Menu Display Name, because File Name only takes a-z and numbers. See My characters with accents are being converted, how do I included accented letters in the Navigation bar?.
Menus and the language button
The Navigation Bar widget lists every page that has Include page in navigation menu ticked, in both languages. Choose one of these:
- Small website: let the directory show as one menu item, such as "Français", with the French pages in a drop-down under it. See Can EverWeb create drop down menus?.
- A separate menu for each language: on each language's Master Page, build the menu from buttons or text links instead of the Navigation Bar. Link each one with Inspector > Hyperlinks, tick Enable as Hyperlink, and set Link To to One of My Pages. Each menu then shows only its own language, but you add new pages to it yourself.
The language button: on each page, add a small button or text link, such as "Français" on the English page and "English" on the French page. Link it with One of My Pages to the matching page, not the home page. Put it on the pages, not the Master Page, in the same spot near the top. Use the language's name rather than a flag, which stands for a country.
Keep both versions in step
- When you change prices, hours or dates, change both languages before you publish.
- Give each language its own contact form, with captions in that language. Answers then arrive under the same field names each time.
- The first time, publish with File > Publish Entire Site, then click through both languages on the live website.
What about automatic translation?
Browsers such as Chrome and Safari can already translate any page for visitors. You can also add a "translate this page" button from an outside translation service with the HTML Snippet widget (see Add a booking calendar, Instagram feed or other outside code with the HTML Snippet widget). We don't recommend this for your main content: nobody checks the translation, and search engines usually only see your original language.
Common problems
| What you see | What to do |
|---|---|
| Accented letters turn into other characters in the menu or address | Type accents in Navigation Menu Display Name, not File Name |
| The menu shows both languages' pages | Use a drop-down for the second language, or build a separate menu on each Master Page (see above) |
| The language button goes to the home page | Link it on each page to the matching page, not on the Master Page |
| Second-language pages are missing online | Right-click them in the page list and check Do Not Publish is off, then use File > Publish Entire Site |
| Google shows the wrong language | Check each page's Language, Web Page Title and Web Page Description. Results take time to update |
Related articles
- Put the same header, menu and footer on every page with a Master Page
- How do I add a navigation menu to every page of my website?
- My characters with accents are being converted, how do I included accented letters in the Navigation bar?
- Copy a page, or a whole website, within a project or to another project