Wie passe ich einen Navigationsstyle an?

Wollen Sie Ihren Navigationsstyle anpassen und optimieren, können Sie dies im Style vornehmen. Nehmen Sie Änderungen vor werden diese übernommen und sofort in der Anwendung wirksam. In diesem Handbucheintrag erfahren Sie, wie Sie einen Navigationsstyle anpassen können.

1. Klicken Sie in der Navigationsleiste auf Style
2. Wählen Sie den zu bearbeitenden Style aus
3. Klicken Sie im Menü links auf die Rubrik Navigation
4. Klicken Sie auf das zu bearbeitenden Navigationsstyle, um das Fenster Edit Navigation zu öffnen oder wählen Sie im Dreipunkte Menü des jeweiligen Navigationsstyles den Punkt Bearbeiten aus

Schrift anpassen

1. Klicken Sie auf das Feld Font style, um das Dropdown Menü zu öffnen
2. Wählen Sie die Schrift aus, die Sie für die Navigation verwenden möchten

Zwischenabstände (Gap)

Die "Gap" gibt den Abstand zwischen den einzelnen Elementen in einer Navigation an. Das Feld Gap bestimmt den horizontalen Abstand zum nächsten Objekt. Das Feld Responsive Gap hingegen beschreibt den vertikalen Abstand zum unteren Punkt in der responsiven Ansicht.

1. Klicken Sie auf das Feld Gap / Gap responsive
2. Tragen Sie einen Wert für den gewünschten Abstand ein z. B. 16 px

Desktop und Responsive Ansicht

Oftmals unterscheidet sich die Darstellung und das Verhalten der Navigation in der Desktop- und Responsive-Ansicht einer Website. Mit den Einstellungen in den Tabs "Desktop" und "Responsive" können Sie jeweils individuelle Anpassungen vornehmen, die nur die jeweilige Navigation betreffen.

Hover- und Active-Effekte 

Die Normal-Ansicht sollte alle wichtigen Einstellungen enthalten, die für die Standardansicht der Website relevant sind. Hier können Sie die gewünschten Optionen festlegen, um das Erscheinungsbild der Navigation nach Ihren Vorstellungen anzupassen. Wenden Sie Effekte für Hover und Active an, sollten die grundlegenden Einstellungen von Normal übernommen werden.

Hover-Effekte für die Navigation können verwendet werden, um dem Nutzer ein visuelles Feedback zu geben, wenn er mit dem Mauszeiger über einen Navigationspunkt hovert. Dies kann beispielsweise durch eine Änderung der Farbe, des Hintergrunds oder anderer visueller Elemente geschehen. 

Ist ein Navigationsreiter ausgewählt kann dieser als Aktiv angezeigt werden. Dadurch kann der Nutzer leicht erkennen, auf welcher Seite er sich gerade befindet und sich besser in der Navigation orientieren.

Farben wählen

Wählen Sie eine passende Schriftfarbe aus, die sich gut von der Hintergrundfarbe der Navigation abhebt, um eine klare Lesbarkeit zu gewährleisten.

1. Klicken Sie auf das Feld Font color
2. Wählen Sie eine beliebige Farbe aus

Wählen Sie eine passende Hintergrundfarbe für die Navigationspunkte aus

1. Klicken Sie auf das Feld Background color
2. Wählen Sie eine beliebige Farbe aus

Innenabstand

Der Abstand zwischen dem Text oder Inhalt der Navigation zum Rand des Buttons, kann mit dem Padding definiert werden.

1. Klicken Sie in das Eingabefeld der jeweiligen Abstandsrichtung:
   1. Padding top (Innenabstand nach oben)
   2. Padding bottom (Innenabstand nach unten)
   3. Padding left (Innenabstand nach links)
   4. Padding right (Innenabstand nach rechts)
2. Geben Sie den gewünschten Abstand ein z. B. 10px

Kantenradius 

Mit dem Border Radius kann festgelegt werden, wie Stark die Ecken der einzelnen Navigationspunkte abgerundet oder eckig sein sollen. Ein höherer Wert führt zu stärker abgerundeten Ecken, während ein Wert von 0px eckige Kanten erzeugt.

1. Klicken Sie in das Eingabefeld des jeweiligen Kantenradius:
   1. Top left: Kante oben links
   2. Top right: Kante oben rechts
   3. Bottom right: Kante unten rechts
   4. Bottom left: Kante unten links
2. Geben Sie den gewünschten Radius ein z. B. 10px für leicht abgerundete Kanten

Rahmen

Sie können Ihrer Navigation einen Rand hinzufügen und diesem verschiedene Eigenschaften wie Farbe, Dicke und Stil des Randes geben.

1. Wählen Sie unter Border color die Farbe aus, die der Rahmen haben soll
2. Klicken Sie in das Feld Border width, um die Dicke des Rahmens einzugeben z. B. 1px
3. Wählen Sie eine Rahmenvariante aus 
   1. Full Border: Die Navigationspunkte werden vollständig umrandet
   2. Border Bottom Full Width: Der Rahmen wird über die gesamte Breite des Navigationspunktes gezogen
   3. Border Bottom Text: Der Rahmen verläuft direkt unterhalb des Textes und berücksichtig keine Padding-Abstände

Speichern

Nachdem Sie alle gewünschten Einstellungen vorgenommen haben, vergessen Sie bitte nicht, auf den Speichern-Button zu klicken. Beachten Sie, dass alle Änderungen verloren gehen, wenn Sie das Fenster schließen, ohne auf den "Speichern"-Button zu klicken.

Das könnte Sie auch Interessieren