Zum Hauptinhalt springen

Navigationsstile

Passen Sie die Farben der Navigationsleiste Ihrer Gemeinde-Website an, um sie Ihrem Branding anzupassen. Sie können Farben sowohl für solide Hintergründe als auch für transparente Overlays konfigurieren und haben so vollständige Kontrolle darüber, wie Ihre Navigation auf verschiedenen Seiten aussieht.

Bevor Sie beginnen

  • Sie benötigen die Berechtigung zur Verwaltung Ihrer Gemeinde-Website. Siehe Rollen & Berechtigungen für Details.
  • Halten Sie Ihre Markenfarben bereit, einschließlich Hex-Farbcodes (z.B. #03A9F4).
  • Verstehen Sie den Unterschied zwischen soliden und transparenten Navigationsstilen auf Ihrer Website.

Ihre Website-Navigation kann je nach Seite in zwei verschiedenen Stilen erscheinen:

  • Solide Navigation -- Navigationsleiste mit einer Hintergrundfarbe, typischerweise auf Inhaltsseiten verwendet
  • Transparente Navigation -- Navigation, die den Seiteninhalt überlagert, typischerweise auf Seiten mit Hero-Bildern oder Vollbild-Hintergründen verwendet

Sie können Farben für beide Modi unabhängig voneinander anpassen.

Zugriff auf Navigationsstile​

  1. Navigieren Sie zu Website in B1 Admin
  2. Klicken Sie in der Seitenleiste auf Erscheinungsbild
  3. Scrollen Sie zum Abschnitt Navigationsstile
  4. Klicken Sie auf Navigationsstile bearbeiten

Solide Navigation konfigurieren​

Solide Navigation erscheint mit einer Hintergrundfarbe hinter der Navigationsleiste. Sie können anpassen:

Hintergrundfarbe​

  1. Schalten Sie den Überschreiben-Schalter für Hintergrundfarbe um
  2. Klicken Sie auf den Farbwähler
  3. Wählen Sie Ihre gewünschte Hintergrundfarbe
  4. Der Standardwert ist Weiß (#FFFFFF)
  1. Schalten Sie den Überschreiben-Schalter für Link-Farbe um
  2. Wählen Sie die Farbe für den Text der Navigationslinks
  3. Dies betrifft Links in ihrem Standardzustand
  4. Der Standardwert ist Dunkelgrau (#555555)
  1. Schalten Sie den Überschreiben-Schalter für Link-Hover-Farbe um
  2. Wählen Sie die Farbe, in die sich Links ändern, wenn Benutzer darüber fahren
  3. Dies bietet visuelles Feedback für anklickbare Links
  4. Der Standardwert ist Hellblau (#03A9F4)

Aktive Farbe​

  1. Schalten Sie den Überschreiben-Schalter für Aktive Farbe um
  2. Wählen Sie die Farbe für den aktuell aktiven Seitenlink
  3. Dies hilft Benutzern zu wissen, auf welcher Seite sie sich befinden
  4. Der Standardwert ist Hellblau (#03A9F4)

Transparente Navigation konfigurieren​

Transparente Navigation überlagert Ihren Seiteninhalt ohne Hintergrund. Sie können anpassen:

  1. Schalten Sie den Überschreiben-Schalter für Link-Farbe um
  2. Wählen Sie eine Farbe, die gut mit Ihrem Seitenhintergrund kontrastiert
  3. Oft funktionieren weiße oder helle Farben am besten über dunklen Hintergründen
  4. Der Standardwert ist Dunkelgrau (#555555)
  1. Schalten Sie den Überschreiben-Schalter für Link-Hover-Farbe um
  2. Wählen Sie die Hover-Zustand-Farbe
  3. Stellen Sie sicher, dass sie gegen Ihren Seitenhintergrund sichtbar ist
  4. Der Standardwert ist Hellblau (#03A9F4)

Aktive Farbe​

  1. Schalten Sie den Überschreiben-Schalter für Aktive Farbe um
  2. Wählen Sie die Farbe für die aktive Seitenanzeige
  3. Sollte sich abheben und dennoch zu Ihrem Design passen
  4. Der Standardwert ist Hellblau (#03A9F4)
Info

Transparente Navigation hat keine Hintergrundfarben-Einstellung, da sie den Seiteninhalt direkt überlagert.

Ihre Änderungen speichern​

  1. Klicken Sie nach der Konfiguration Ihrer Farben auf Navigationsstile speichern
  2. Ihre Änderungen werden sofort auf Ihrer Live-Website angewendet
  3. Besuchen Sie Ihre Website, um die Navigation in beiden Modi zu sehen

Auf Standardwerte zurücksetzen​

Wenn Sie zu den Standardfarben zurückkehren möchten:

  1. Schalten Sie die Überschreiben-Schalter für alle benutzerdefinierten Farben aus
  2. Klicken Sie auf Navigationsstile speichern
  3. Die Navigation kehrt zum Standard-Farbschema zurück

Oder klicken Sie auf Abbrechen, um alle Änderungen zu verwerfen, ohne zu speichern.

Best Practices​

Farbkontrast​

  • Lesbarkeit -- Stellen Sie sicher, dass Link-Farben genügend Kontrast zum Hintergrund haben
  • WCAG-Konformität -- Streben Sie mindestens ein Kontrastverhältnis von 4,5:1 für Barrierefreiheit an
  • Testen Sie beide Modi -- Sehen Sie sich Ihre Website mit sowohl solider als auch transparenter Navigation in der Vorschau an

Markenkonsistenz​

  • Verwenden Sie Ihre Markenfarben -- Passen Sie zu Ihrem Logo und Website-Theme
  • Begrenzen Sie Ihre Palette -- Bleiben Sie bei 2-3 Farben für ein einheitliches Aussehen
  • Berücksichtigen Sie Ihre Bilder -- Wenn Sie transparente Navigation verwenden, testen Sie sie gegen typische Seitenhintergründe

Hover- und Aktiv-Zustände​

  • Klares Feedback -- Machen Sie Hover-Zustände offensichtlich anders als Standard-Links
  • Aktive Seiten unterscheiden -- Verwenden Sie eine deutliche Farbe, damit Benutzer wissen, wo sie sind
  • Sanfte Übergänge -- Das System animiert Farbänderungen automatisch

Fehlerbehebung​

Farben sehen nicht richtig aus​

  • Leeren Sie Ihren Cache -- Browser-Caching könnte alte Farben anzeigen
  • Überprüfen Sie Hex-Codes -- Stellen Sie sicher, dass Sie gültige Hex-Farbcodes eingegeben haben
  • Testen Sie auf verschiedenen Hintergründen -- Farben können je nach Seite anders aussehen
  • Transparenter Modus -- Wenn Sie transparente Navigation über hellen Bildern verwenden, könnte dunkler Text schwer zu sehen sein
  • Lösung -- Passen Sie Ihre Link-Farben an oder verwenden Sie dunklere Seitenhintergründe
  • Alternative -- Fügen Sie dem Navigationsbereich einen dezenten Schatten oder Hintergrund-Overlay hinzu

Technische Details​

Navigationsstile werden als JSON gespeichert und mit CSS-Variablen angewendet:

  • Änderungen werden sofort wirksam, ohne die Website neu zu erstellen
  • Farben vererben sich an alle Navigationselemente
  • Überschreibungen sind optional; nicht gesetzte Farben verwenden Theme-Standardwerte

Verwandte Artikel​