Definiere die Navigationsleiste deiner Website

Die Navigation ermöglicht es dir, Verlinkungen zu deinen einzelnen Bausteinen auf der Website zu setzen - sogenannte "Anker".

Standardmäßig wird auf der linken Seite dein hochgeladenes Logo angezeigt und auf der rechten Seite werden die hinzugefügten Navigationspunkte dargestellt.

Definiere die Navigationsleiste deiner Website1

Um den Baustein "Navigation" in deiner Struktur einzufügen, ziehe diesen aus der linken Spalte per Drag & Drop in die Spalte rechts daneben. Fahre anschliessend mit dem Mauszeiger über dieser neueingefügte Baustein und klicke auf den Bearbeitungsstift.

Achtung!

Hast du eine mehrsprachige Event-Website aufgesetzt, achte bitte darauf, dass die Sprachanzeige aus dem Baustein „Navigation“ nicht mit dem generellen Sprachwechsler des Tools korrespondiert. Achte daher beim Bearbeiten des Bausteines darauf, dass du alle gewünschten Inhalte in den korrekten Sprachen hinterlegst. Nutze als Hilfestellung den Sprachassistent mit diesem Symbol Language switcher und kontrolliere über den Sprachwechsler oben rechts, ob du die Inhalte in allen Sprachen aufgesetzt hast. Detaillierte Informationen dazu findest du in diesem Artikel

 

Folgende Einstellungen können nun hinterlegt werden:

navigation de

  • Aktivierst du den Schalter "Einstellungen Hintergrund überschreiben", kannst du die standardmässig in den Website-Einstellung definierte Hintergrundfarbe individuell für diesen Baustein anpassen. Definiere die Farbe des Navigationsbalkens dazu am besten mithilfe des HEX-Codes. Der HEX-Code steht dir nicht zur Verfügung? Dann klicke in das Feld und trage im Pop-up-Fenster die HSL-Werte ein.
  • Sofern du den Schalter "Einstellungen Hintergrund überschreiben", nicht aktivierst, hast du stattdessen die Möglichkeit, den Schalter "Kontraste" anzuwählen. Der Navigationsbalken übernimmt nun standardmässig den in den Website-Einstellungen definierten Farbwert.
  • Volle Breite: stelle ein, ob die Navigation die gesamte Breite der Website einnimmt oder sich dem Inhalt anpasst. Wie du die Inhaltsbreite definierst, zeigen wir dir in diesem Artikel.

Wir empfehlen dir die volle Breite einzustellen, indem du den Schalter aktivierst.

  • Logo: klicke auf den Stift zum bearbeiten, um in den Dateimanager weitergeleitet zu werden und dein Logo einfügen zu können. Möchtest du das Logo löschen klicke einfach auf das Mülleimer-Symbol.
    Wir empfehlen dir ein .svg-Format zu verwenden.

Achtung!

Aus Sicherheitsgründen können einige Inhalte im Bearbeitungsmodus des Website-Editors nicht angezeigt werden. Extern eingebettete Bilder werden beispielsweise als Broken Images angezeigt und die Darstellung extern hinterlegter Schriftarten kann ebenfalls variieren. Alle Inhalte können jedoch korrekt über die Vorschau-Funktion und die veröffentlichte Website dargestellt und verwendet werden.

  • Möchtest du, dass bei Klick auf das Logo eine externe Website geöffnet wird, kannst du unter Logo link die entsprechende Website URL hinterlegen. Bleibt diese Zeile frei, erfolgt keinerlei Aktion bei Klick auf das Logo. 
  • Definiere mithilfe der Anordnungssymbole, ob das Logo auf der linken Seite und die Navigationspunkte auf der rechten Seite angezeigt werden sollen oder vice versa.
  • Neben den einzelnen inhaltlichen Navigationspunkten kannst du bei mehrsprachigen Events auch den Sprachwechsler an eine andere Position rücken. Die Sprachen werden den Teilnehmern jeweils als Abkürzungen (z. B. DE, EN oder FR) dargestellt. Fahre dazu über den Sprachwechsler, sodass auf der rechten Seite das Symbol zum Verschieben eingeblendet wird:moving. Wähle dieses an und ziehe den Sprachwechsel per Drag & Drop an die gewünschte Stelle.

Bitte beachte:

Jede Sprache auf deiner Website wird als eigenständige "Website" behandelt, was zu neuen Pfaden führt (z.B. https://test.de/en oder https://test.de/de).
Würde nun ein Teilnehmer, während der Eingabe der Daten im Anmeldeformular, die Sprache  z.B. von Deutsch auf Englisch umstellen, würden die bereits eingegebene Daten verloren gehen, da es sich um einen anderen Pfad handelt.

  • Elemente der Navigation: hinterlege im unteren Bereich die notwendigen Navigationspunkte. Pro Navigationspunkt kannst du Folgendes definieren:
    • Beschreibung Navigationspunkte (linke Seite): Hinterlege an dieser Stelle deine Navigationspunkte und definiere die jeweilige Bezeichnung.
    • URL (rechte Seite): du kannst entweder einen Link (z. B. zu einem weiteren Website-Template oder einer externen Seite oder einem Dokument) hinterlegen oder zu den einzelnen Bausteinen auf deiner Website verweisen. Für letzteres gehe wie nachfolgend beschrieben vor:
    • middle (Mitte): Um auf die bereits vorhandenen Bausteine in deiner Website-Struktur zu verlinken, hast du die Möglichkeit, pro Baustein einen Anker zu setzen, z. B. zur Anmeldung, zum Programm oder zu den Referenten. Klicken deine Teilnehmer anschliessend auf den Button in der Navigation, springen sie automatisch zum dazugehörigen Baustein auf der Website. Um einen Anker zu hinterlegen, klicke auf das Hashtag-Symbol in der Mitte. Es öffnet sich eine Liste mit all jenen Bausteinen, welche du bereits auf deiner Website hinterlegt hast. Wähle den gewünschten Bausteine aus. Das Feld unter "URL" wird nun automatisch mit dem dazugehörigen Code gefüllt. Verfahre so nach Wunsch mit weiteren Menüpunkten.

Definiere die Navigationsleiste deiner Website3

Sobald du alle Anpassungen hinterlegt hast, klicke auf "Schliessen".

Damit ein oder mehrere definierte Navigationspunkte als "Buttons" dargestellt werden, aktiviere den Schalter vor dem jeweiligen Punkt. 

 

Du möchtest einen Header hinzufügen?

Dann klicke auf diesen Link und erfahre mehr zum Header-Baustein.