Create a multilingual site

With Sitejet, you can not only create sophisticated websites but also multilingual ones. You can either simply copy individual pages and translate the content or redesign the entire page. This article explains how to make multiple versions of your website available to visitors so that they can use the language they prefer.

Table of contents

Basic knowledge

Set up multiple languages

Allow visitors to select a language on your site

URLs and "hreflang"


Basic knowledge

Multilingual websites created with Sitejet recognize the browser language of website visitors and automatically show them the corresponding language if it is available. If your website doesn't have a version corresponding to the visitor's browser language available, the default language will be used. We suggest using English as the default language because it is more likely that visitors will understand the site content, even if their native language isn't available. 


Set up multiple languages

To illustrate how to add a language to your site, we'll show you how to add a German version to an English website. Languages can be managed in the website settings. To activate multilanguage there, follow these steps:

  1. Move your mouse over "Website" in the menu bar at the top of the Website Builder (CMS)
  2. Click on "Languages" to access to the language settings
  3. Click in the field under "Multilanguage" and select "Activate multilanguage"

After you have activated multilanguage, you will see that the current default language is already listed. It is greyed out because it cannot be removed or changed. Move your mouse over it and a "+" symbol will pop up on the left side. Click it to add another language to the project. 

Next, click in the empty field to select from a drop-down list of languages. In this case, we would select "German". Then click on the save icon in the menu bar in the upper left corner of the Website Builder (CMS) or use the key combination [Ctrl] + [S] to save the project. Then "German" will be grayed out and can no longer be changed.

Sitejet has now duplicated all previously created pages in the background and stored the necessary language information accordingly. Now, switch to the page manager of the respective language by clicking on the link button to the right of the language. For this example, we switch to the page manager for the German pages and see the following:

In the upper part of the view, you now have tabs to switch between the languages. In the "Name" area, you will find the ISO abbreviation for the respective language. In this case, it's "de" for German. After adding a new language, only the start page is activated, because there must always be a start page. The other pages have been created as already mentioned, but since the content will still need to be translated, they are not immediately available and therefore grayed out. Click on "Translate page" to edit them and make them available.

You can also access respective pages by clicking the link button to the right of their names. If you move your mouse over one of the pages, you can also remove it in the other language independently of its counterpart or add additional pages especially for this language. The page structure of the other language will remain unaffected.

You can also modify the SEO settings and other details separately for each page of each language, as described in our articles on SEO and navigation.

From now on, the respective pages will no longer be accessible via www.your-domain.com/subpage, but via  www.your-domain.com/en/subpage or www.your-domain.com/de/subpage. 

When copying pages, new IDs are assigned to all elements. Therefore, ensure sure that all animations work as desired on the new pages of the additional language. Note that a manual translation/adjustment of the texts and button descriptions is required.


Allow visitors to select a language on your site

As we mentioned before, if a variant of your website which corresponds to a website visitor's browser language is available, the visitor will be directed there automatically. However, you may want to allow your website visitors to decide which version of your website they would like to view. There are various ways of achieving this.

The easiest would be to use the language element. Just drag and drop it from the "Elements" panel:

  1. Move your mouse cursor over "Add content"
  2. Click "Elements"
  3. Drag and drop the "Language" element to the position you want to have the languages show up

If the "multi-language" feature is already enabled on your website, you will see a link for each language at the position of the language element. However, most of the time, flags consume less space and are more intuitive. With the help of CSS, you can create a language menu like the one in the image below from this <div> tag and the links:


To achieve this effect, you can copy and paste the following code into the "CSS" tab of the code editor. If you're not certain of where to put it, you can simply add it to the bottom:
a.language {
  background-repeat: no-repeat;
  background-size: contain;
  width: 30px; // sets the flag's width to 30px
  height: 30px; // sets the flag's height to 30px
  margin: 0px 5px; // adds a margin/space of 5px to the left and right of the flag
  font-size: 0; // prevents the text from showing up
  display: block;
  float: right; // jmakes the flags show up next to each other
  &.language-de {
    background-image: url(/images/webcard/flags/de.png); // sets the German flag for German 
  }
  &.language-en {
    background-image: url(/images/webcard/flags/en.png); // sets the British flag for English 
  }
}
Using the code shown above, the text for the respective language is replaced by an image. In this example the two languages German (= "de") and English (= "en") are supported. If you want to offer more languages, add additional code for these languages like
&.language-fr {     
  background-image: url(/images/webcard/flags/fr.png); // sets the French flag for French
}
	
Of course you can adapt these defaults according to your wishes.

URLs and "hreflang"

Sitejet automatically places "hreflang" for all available languages of the currently accessed page, e.g. www.sitejet.io/en/templates, as follows:

<link rel="alternate" hreflang="de" href=" https://www.sitejet.io/de/templates"/
<link rel="alternate" hreflang="en" href=" https://www.sitejet.io/en/templates"/>

"Hreflang" is also used in the language element to tell search engines which language the link leads to. All other links do not contain "hreflang", because in such cases they are always in the same language.

Canonical URLs express the actual URL under which the currently opened page can be reached if it should be accessible via several URLs (to avoid duplicate content) and actually has nothing to do with the languages.


Back to the top

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us