Multilanguage

Multilanguage

Sitejet offers a useful option for setting up other languages. It basically duplicates the index page and files the copy under the chosen language. Existing subpages can be duplicated in the same fashion manually or altogether. This way you can easily change all the texts, headlines and Alt-tags within your project without affecting the original.

How to set up multiple languages

Let's start! In this example we want to create a copy of our webpage to translate it to german.

First go to Website and Website Settings ( or [CTRL] + [ALT] + [E] ). Beneath the Favicon-section you will find the Multilanguage option. Choose Enable multilanguage in the dropdown.

Once you saved your project ( Disc-Icon in the top-right toolbar of the main editor or by pressing [CTRL] + [S] ) a new tab appears in your Website settings window. Visit this tab and you will find a language already set at the first position. This is the project's standard language and contains all your subpages that you have created so far. In order to duplicate all the contents you will have to set up a new language. Simply hit the Plus-icon while hovering over the second slot to add a new language. Then choose your prefered language in the dropdown. You can add and remove languages freely like this.

Save again and open the page manager under Website > Page Manager or [CTRL] + [ALT] + [S]. Here you will find all subpages in every language. You can easily switch between tabs to navigate to each site. You can also add and remove pages regardless of language, in case you need or don't need a particular piece of content.

The website's address will automatically extend the URL with language tags, e.g. www.sitejet.io  will become www.sitejet.io/en and www.sitejet.io/de. Tags are also inserted automatically into existing URLs, e.g. www.domain.de/about will become www.domain.de/en/about once an english version of the website existis.

Here you can see the two instances of our main page, once you opened them. This way you can easily switch between all your pages and edit, remove, add or copy any content among each other.


Note: Keep in kind that duplicating content to a new will create completely new IDs for each element in the duplicated content. You will have to assign triggers of accordions to their respective content again. Also stylings for a special element being targeted by ID will not apply when there is a new ID. Check out our articles about How to style content with CSS and Accordions for more details.


Make your visitor change languages on the fly

Sure, you could place links in your Menu to enable your visitor to switch to the starting page in another language. But there is a better way to make it visually more appealing and change the current page to the very same page in another language.

Let's do this by opening your HTML editor in the Asset Manager  (or press  [CTRL] + [ALT] + [H] ).

Usually we only have our {{content}} tag here.

Let's type in a new tag called {{language}} . This will not create a physical element in the main editor, but another HTML instance in the DOM, which we can style as we like. After you saved the project you might need to hit refresh for our language switcher to appear. You will likely not see it right away, because it hasn't been styled yet. So let's do this next.

The code created by our {{language}} input looks like this:


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

Now you can apply any styling you like. You can style the <div> with the ID #lang itself and the anchor tags within, as well as the div with ID #label.

Let's apply some basic styling to make it look like this:


CSS:

#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;
	}
}<br>

We adjusted the position of the  parent-<div> to always stay on the left side middle of the screen no matter where we scroll. We also adjusted the background-image of the anchor tag to a certain size. Also, we do not want a label displayed, so we removed it. 

You can position it anywhere you like, perhaps somewhere in the menubar or in the footer? You can add the {{language}} tag in any HTML element as well, so you will have a physical representation in your main editor and easily build it together with other elements. Also consider changing your flags by choosing another image (e.g. in case you prefer US English to British English).

Still need help? Contact Us Contact Us