So baust du deine perfekte mehrsprachige Website

Es gibt nur wenige Webbaukästen, die die technischen Voraussetzungen für eine mehrsprachige Darstellung von Inhalten anbieten, und zwar ebenso bediener- wie benutzerfreundlich. Page4 gehört jetzt dazu. Bisher war es so, dass du Mehrsprachigkeit nur über die Navigationsebenen realisieren konntest. In der Hauptebene hast du die Sprachen angelegt. Und darunter dann die jeweiligen Unterseiten der einzelnen Sprachen. Nachfolgend ein Bild, wie das im Seitenmanager aufgebaut ist. 

Bei Webbaukästen wie Jimdo oder Wix mit sehr wenigen Navigationsebenen hat diese Struktur sehr viele Nachteile, da die erste Ebene bereits für die Sprachen benutzt wird. Bei page4 besteht hier kein Problem aufgrund der vielen Unterebenen. Trotzdem ist eine Struktur wie die oben Abgebildete natürlich nicht wirklich professionell. Zum Beispiel hast du weiterhin nur eine Sidebar sowie einen Footer und die Navigation durch solche Seiten lässt zu wünschen über. Und auch die wichtigen SEO-Optionen fehlen.

Nutzt du eine Lightversion von page4, dann findest du im Seitenmanager die neue Ablage (1) und den Hauptbereich (2). Du kannst damit wie bisher arbeiten und zusätzlich nicht benutzte Seiten in der Ablage aufbewahren. 

Bei einer Premiumversion hast du zusätzlich einen "Plus-Button" (5) und kannst einen weiteren Bereich anlegen (3). Mit der Professionell.Edition lassen sich weitere Bereiche (4 und 5) hinzufügen. Maximal sind aktuell 5 Bereiche möglich.

Upgrade auf eine Premium- oder Professionell-Edition. Eine Premium.Edition erlaubt zwei Sprachen (Bereiche) und eine Professionell.Edition bis zu 5 Sprachen.

Im Hauptbereich erstellst du die Seiten für deine Website für die Hauptsprache, hier also zum Beispiel die deutschen Seiten. Wenn die Inhalte fertig sind, gestaltest du am besten deine Website aus. Mit richtigen Inhalten geht das meist viel besser.

Du möchtest eine mehrsprachige Webseite präsentieren? Wenn du die deutschen Seiten fertig hast (oder welche Sprache auch immer deine Hauptsprache ist), kannst du jetzt daran gehen, weitere Sprachen einzurichten.

Um einen neuen Bereich anzulegen, klickst du auf das Pluszeichen (5) und vergibst einen Namen. Aus technischen Gründen braucht jeder neue Bereich mindestens eine Startseite. Diese legen wir automatisch an. Im nächsten Schritt kopierst du alle Seiten, welche auch in der neuen Sprache verfügbar sein sollen, aus dem Hauptbereich in den neuen Bereich. Im Bild unter diesem Text siehst du das Menü, welches du aufrufen kannst, indem du auf die drei Striche rechts neben jeder Seite klickst. Dort sind jetzt 2 neue Menü-Punkte (1). Du kannst Seiten in einen neuen Bereich verschieben oder kopieren. Wenn du alle Seiten kopiert hast, kannst du natürlich eine neue, vor dir gestaltete Startseite setzen und die von uns automatisch angelegte Seite danach löschen.

PS: Du kannst natürlich auch alle Seiten eines Bereichs auf einmal kopieren. Dazu nutzt du das Menü für den Bereich. Damit kopierst du dann einen kompletten Bereich inkl. aller Seiten. Anschließend musst du alle Seitennamen anpassen und dann die Inhalte austauschen.

Jetzt kannst du alle kopierten Seiten übersetzen und an die neue Sprache anpassen. Es ist möglich, dass jede Sprachversion unterschiedliche Seiten enthält. Du kannst also nicht benötigte Seiten löschen oder gar nicht erst kopieren. Soll die neue Sprache weitere Seiten enthalten, legst du einfach neue Seiten im Bereich an und füllst diese mit Inhalt. Möchtest du später diese neuen, nur in einer Sprache verfügbaren Seiten auch im Hauptbereich haben, kannst du natürlich auch jederzeit Seiten aus Bereichen in den Hauptbereich kopieren oder verschieben.

Wenn du alles fertig hast, wird es Zeit, die Bereiche vorzubereiten, um sie zu veröffentlichen. Ein neuer Bereich ist solange unsichtbar, bis du ihn veröffentlichst, also aktiv schaltest. Bevor du das machst, solltest du einige Einstellungen vornehmen. Welche, das zeigen wir dir im nächsten Abschnitt.

Bei page4 kannst du für jeden Bereich eigene Einstellungen vornehmen und für SEO optimieren. Du kannst festlegen, wie der Bereich benannt werden soll, ob er ein eigenes Layout bekommt und wie die Navigation aussieht. Nachfolgend erklären wir dir kurz die einzelnen Tabs und Einstellungen.

Auf dem Tab "Allgemeines" gibst du dem Bereich einen Namen (2). Du kannst den Bereich veröffentlichen (3). Und du kannst festlegen, ob der Bereich eigene Inhalte für den Footer und die Sidebar hat, falls diese vorhanden sind. Dazu gleich mehr Infos.

Im Tab "SEO" stellst du den Aliasnamen (6) des Bereiches ein. Wenn dieser Aliasname zum Beispiel "deutsch" ist sieht es im Browser dann so aus: https://www.deine-domain.de/deutsch/seitennamen/. Nutzt du Bereich nicht für Sprachen, sondern für Abteilungen deines Sportvereins und hast einen Bereich Handball und einen Bereich Tennis, dann könnte das so aussehen: https://www.deine-domain.de/handball/seitennamen/ bzw. https://www.deine-domain.de/tennis/seitennamen/.

Du kannst einen allgemeinen Titel (7) vergeben. Die einzelnen Seiten können in jedem Bereich weiterhin auch eigene Titel bekommen. Ebenso kannst du eine allgemeine Beschreibung (8) eintragen. Beschreibungen und Titel der einzelnen Seiten überschreiben den allgemeinen Titel und die allgemeine Beschreibung.

Im Tab Layout (9) kannst du für den Bereich ein eigenes Layout (A) auswählen. Es ist also möglich, die einzelnen Bereiche komplett unterschiedlich zu gestalten. Wenn du Bereiche für Themen nutzt, ist das sehr hilfreich.

Im letzten Tab Navigation (B) bestimmst du das Aussehen der Navigation. Es gibt ein neues Tool, welches aktiviert wird, wenn du Bereiche nutzen kannst. Damit bist du in der Lage, auf einem Header oder Footer eine Bereichsnavigation anzulegen. Schließlich sollen deine Besucher ja zu den einzelnen Bereichen wechseln können. Wenn du mehrere Sprachen hast, bietet es sich an, Flaggen auf dem Header zu platzieren. Dazu hinterlegst du für jeden Bereich ein entsprechendes Bild (D). Achte darauf, dass die Flaggen alle gleich groß sind. Alternativ kannst du zum Beispiel im Footer auch eine Navigation anlegen und dort dann schlicht nur die Beschriftung verwenden. Dazu solltest du dann entsprechende "Namen" im Feld Navigationsbeschriftung (C) hinterlegen.

Wenn du mit der Maus über einen Header fährst und dieser in der Lage ist, eine Bereichsnavigation aufzunehmen, erscheint jetzt ein blauer "Anfasser". Du kennst das bereits von den Reihen. Klickst du auf den Anfasser, öffnet sich ein Menü und du kannst dort dann bestimmte Aktionen durchführen.

Im Bild siehst du mit einem Pluszeichen davor einen Eintrag "Bereichsnavigation hinzufügen" (1). Klickst du auf diesen Eintrag, wird eine Navigation auf dem Header platziert. Der zweite Punkt "Headertext hinzufügen" ist aktuell noch nicht online. Damit wirst du später ganz einfach einen Text direkt auf dem Header platzieren können, ohne in die Designbearbeitung zu müssen. Der Text kann dann direkt editiert werden und bestimmte Positionen auf dem Header einnehmen. Sobald diese Funktion verfügbar ist, werden wir dich natürlich informieren. Es kann nur eine Bereichsnavigation auf einem Header platziert werden. Hast du das gemacht, wird der Eintrag ausgegraut.

Eine platzierte Bereichsnavigation bekommt ebenfalls einen blauen Anfasser. Darüber kannst du dann diese Navigation bearbeiten. Hier im Bild siehst du, wie so eine Navigation aussehen könnte, wenn du Flaggen (1) benutzt. Oben auf dieser Beispiel-Seite kannst du solche Navigation nutzen, um zu den einzelnen Bereichen zu kommen.

So sieht es aus, wenn du statt der Bilder den Text benutzt. Damit die Schrift gut lesbar ist, haben wir die Navigation mit einem Hintergrund versehen. Wie der Dialog zum Einstellen der Bereichsnavigation aussieht und was du damit machen kannst, zeigen wir dir im nachfolgenden Bild.

Klickst du auf dem blauen Anfasser, kommt das bekannte Menü zum Auswählen. Der Punkt "Bearbeiten“ öffnet den entsprechenden Dialog. Dort kannst du verschiedene Einstellungen vornehmen.

Du kannst festlegen, ob die Navigation Bilder oder Text benutzen soll (1). Die Bilder werden im Bereich selbst hinterlegt. Dann kannst du einstellen, wie groß die Bilder für die Navigation sein sollen (2). Den Abstand zwischen den einzelnen Bildern regelst du mit dem Innenabstand (3). Eine Bereichsnavigation kannst du an neun Stellen auf dem Header platzieren: Oben links, oben mittig, oben rechts, links, in der Mitte, rechts, unten links, unten mittig und unten rechts. Innerhalb dieser Bereiche kannst du mit dem Schieberegler "Abstand zum Rand" (4) festlegen, wie viel Abstand das Element vom jeweiligen Rand bekommt. Und mit der letzten Einstellung (5) kannst du dem Element eine Hintergrundfarbe geben und diese auch transparent gestalten. So ist deine Bereichsnavigation immer gut lesbar und sichtbar.

Damit ein Bereich in der mobilen Navigation angezeigt werden kann muss er natürlich aktiv und sichtbar sein. Wir zeigen alle Bereiche unterhalbd der Hauptnavigation. So kann ein Besucher auf einem mobilen Gerät sehr einfach zu den einzelnen Bereichen navigieren.  Die Optik der Bereichsnavigation ist identisch mit der normalen mobilen Navigation.

Um dir die Möglichkeiten zu zeigen, wie du verschiedene Footer oder Sidebars benutzen kannst, haben wir hier noch einmal einen Screenshot von den Bereichseinstellungen eingefügt, den wir oben ja schon erklärt haben.

Auf der ersten Karteikarte findest du ganz unten die Einstellungen für den Footer und die Sidebar (4). Da es keinen Sinn macht, zum Beispiel auf der englischen Seite eine Sidebar zu haben, welche den Inhalt der deutschen Seite darstellt und einen Footer mit eigenen englischen Inhalten, haben wir Sidebar und Footer zusammengefasst. Wenn du auf "Inhalte des Hauptbereichs" schaltest, enthalten die Sidebar und der Footer des ausgewählten Bereichs dieselben Inhalte wie im Hauptbereich. Änderst du etwas im Hauptbereich an den Inhalten in der Sidebar und im Footer, wirkt sich das direkt auf die Inhalte im ausgewählten Bereich aus. Schaltest du dagegen auf "Eigene Inhalte", kannst du in der Sidebar und im Footer eigene Inhalte anlegen.

Um die Sidebar und den Footer eines Bereichs zu bearbeiten, nutzt du ganz einfach das Menü oben links zum Auswählen eines Bereichs. Links werden die Bereiche angezeigt (1) und rechts die Seiten des Bereichs. Wähle einfach den Bereich aus, dessen Sidebar und Footer du bearbeiten willst. Anschließend kannst du den Footer und die Sidebar mit eigenen Inhalten füllen. Mit demselben Menü kannst du auch schnell zu den einzelnen Seiten eines Bereichs gelangen.

Mit den neuen Bereichen bekommst du ein mächtiges Werkzeug, um mehr aus deiner Website zu holen. Du kannst die Bereiche nutzen, um mehrsprachige Webseiten zu erstellen. Wenn du einen Verein betreust, bist du nun in der Lage, über die Bereiche die verschiedenen Abteilungen deines Vereins darzustellen. Und jede Abteilung kann ein eigenes Design bekommen. Der einzige Nachteil ist aktuell noch, dass page4 nicht für mehrere Benutzer ausgelegt ist. Aber wer weiß, wir haben noch viel vor. Es bleibt spannend.

Die neuen Funktionen sind abhängig von deiner Kaufversion. In der Lightversion kannst du wie bisher nur einen Bereich benutzen. Mit der Premium.Edition sind zwei Bereiche möglich. Du kannst damit also eine zweisprachige Webseite erstellen oder zwei Abteilungen deines Vereins. Mit der großen Professionell.Edition sind aktuell bis zu 5 zusätzliche Bereiche möglich. Es lohnt sich also, auf ein größeres Paket umzustellen.

Zur Demonstration haben wir die kompletten deutschen Seiten einfach in die anderen Bereiche kopiert und dann mit einem Übersetzungsprogramm in Englisch und Spanisch übersetzt. In der englischen Version haben wir die Hintergrundfarbe des Footers geändert und in der spanischen Version eine Sidebar aktiviert und mit zusätzlichen Inhalten gefüllt.