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


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.

You can, of course, add normal links to the versions of your website in each language. A visually more appealing variant, however, are flag icons, as they are self-explanatory and usually take up less space than links. 

Here is how you can use flags to easily switch website visitors back and forth without having to manually add links or icons to each page:

Open the Code Editor by moving your mouse over "<> Code" in the upper right corner of the menu bar, and then click on "HTML" or use the key combination [Ctrl] + [Alt] + [H] to go directly there. The code editor will open on the right side, and you will see the existing {{content}} placeholder. As explained in our article on custom code, this placeholder represents all the elements you have already added to your website via the Website Builder (CMS).

Below the {{content}} placeholder, add a new placeholder on a new line: "{{language}}".

After saving, no additional element is displayed in the Website Builder (CMS), but Sitejet creates an HTML element for you in the HTML code, which can be designed according to your wishes with the help of HTML and CSS. 

The HTML code created by Sitejet based on {{language}} looks like this:

<div id="lang">
   <a href="/language/change/lang/en" 
      id="lang_en" 
      style="background-image: url(/images/webcard/flags/en.png);" 
      title="English"
   >
      English
   </a>
   <a href="/language/change/lang/de" 
      id="lang_de" 
      style="background-image: url(/images/webcard/flags/de.png);" 
      title="German"
   >
      German
   </a>
   <div id="label">Language:&nbsp;</div>
</div>

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:

#lang {
   position: fixed;
   left: 0;
   top: 50%;

   a {
      background-image: url(/images/webcard/flags/de.png);
      background-repeat: no-repeat;
      background-size: contain;
      width: 30px;
      height: 30px;
      font-size: 0;
      display: block;
   }
	
   #label {
      display: none;
   }
}

This is to specify that the menu should always be displayed ("position: fixed;") on the left side ("left: 0;") in the middle of the screen ("top: 50%;"). The label should not be displayed, so it was hidden with "display; none;". We have also assigned a certain size to the flags themselves ("width: 30px;" and "height: 30px").

Of course, you can adapt these defaults according to your wishes. How about a language menu in the footer, for example? The {{language}} placeholder can also be used in Sitejet's HTML elements. Add an HTML element to the footer in the Website Builder and then enter the placeholder there to display the language menu in the footer. If you use references for your footer on the other pages, they will be updated automatically when you adjust the original.

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