Navigation

Position

Innerhalb des Headers (Voraussetzung: Header Style "Variante 1") Mit dieser Einstellung lässt sich die Navigation innerhalb deines darstellen. Vergewissere dich jedoch, dass du den "Variante 1" ausgewählt hast. Andernfalls wird die Navigation automatisch unterhalb deines Headers eingebunden. Je schmaler der Bildschirm eines Endgeräts wird, desto weniger Platz entsteht innerhalb des Headers für die Navigation. Bevor die Navigation abgeschnitten wird, springt sie bei kritischer Bildschirmbreite automatisch unter den Headers.

Unterhalb des Headers Die Navigation wird unterhalb deines mittels einer neuen Zeile integriert.

Ausrichtung

Linksbündig Die einzelnen Links innerhalb deiner Navigation werden linksbündig ausgerichtet.

Zentriert Die einzelnen Links innerhalb deiner Navigation werden zentriert.

Home Link

Der sog. "Home Link" ist ein Navigations-Element, der einen Besucher per Klick automatisch auf die Startseite führt. Gerade bei Shops mit wenigen Kategorien, kann dieser häufig Sinn machen, um die Navigation mit einem weiteren sinnigen Link aufzufüllen.

Anzeigen Der Home Link wird integriert.

Ausblenden Der Home Link wird deaktiviert.

Hover Effekt Style

Hier kannst du dich zwischen unterschiedlichen für deine Links innerhalb der Navigation entscheiden.

Effekt 1:

Effekt 2:

Hervorhebungen

Wähle eine oder mehrere Hauptkategorien, die du farblich hervorheben möchtest. Die Farbe kannst du in den Abschnitten weiter unten je nach Position deiner Navigation konfigurieren.

Höhe (in px)

Definiert die Höhe der Navigationsleiste. Je größer der Wert, desto höher die Navigation. Je kleiner der Wert, desto schmaler.

Abstand zwischen den Links (in px)

Mit dieser Einstellung kannst du den Zwischenabstand deiner Links innerhalb der Navigation anpassen.

Hover Effekt Versatz (in px) - Innerhalb des Headers

Hiermit kannst du den Versatz des zuvor konfigurierten für die festlegen. Je höher der Wert, desto näher rückt der Effekt an die Schrift.

Beachte, dass die Navigation innerhalb des Headers für kleinere Bildschirme automatisch auf eine Darstellung unterhalb des Headers umbricht, sofern es an Platz innerhalb des Headers mangelt. Stelle daher sicher, dass du den Hover Effekt Versatz ebenfalls für die Navigation unterhalb des Headers konfigurierst.

Hover Effekt Versatz (in px) - Unterhalb des Headers

Hiermit kannst du den Versatz des zuvor konfigurierten für die festlegen. Je höher der Wert, desto näher rückt der Effekt an die Schrift.

Schriftgröße (in px)

Lege die Schriftgröße der Links innerhalb der Navigation fest.

Schriftstärke

Definiere die Schriftstärke der Links innerhalb der Navigation. Je nach stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin 200 = Extra Light 300 = Light 400 = Normal 500 = Medium 600 = Semi Bold 700 = Bold 800 = Extra Bold 900 = Black

Großbuchstaben

Ja Schreibt deine Links innerhalb der Navigation automatisch in Großbuchstaben. Somit musst du deine nicht in Großbuchstaben verfassen.

Nein Verwendet die Normalschreibweise, wie die angelegt wurden.

Zeichenabstand (in px)

Passe den Zeichenabstand deiner Links innerhalb der Navigation an. Je größer der Wert, desto mehr Platz entsteht zwischen den einzelnen Zeichen.

Link

Lege die Farbe deiner Links innerhalb der Navigation fest. Hierbei wird automatisch die für die verwendet.

Aktiver Link

Lege die Farbe für den aktiven Link innerhalb deiner Navigation fest. Ein Link ist aktiv, sobald die Kategorie selbst bzw. eine Unterkategorie oder ein Produkt innerhalb der Kategorie geöffnet wurde. Hierbei wird automatisch die für die verwendet.

Hover Effekt

Lege die Farbe für den oben konfigurierten fest. Standardmäßig wird hierbei deine über eine verwendet.

Hervorhebung

Farbe für hervorgehobene .

Hintergrund

Definiere eine Hintergrundfarbe für die gesamte Navigationsleiste.

Rahmenfarbe

Hinterlege eine Farbe für den Rahmen unterhalb der Navigationsleiste. Der Rahmen dient hierbei als visuelle Abtrennung des Headers zum Seiteninhalt, sobald man auf einer Seite scrollt. Standardmäßig wird an dieser Stelle deine über eine eingebunden.