Zum Hauptinhalt springen

Navigations-Stile

Passen Sie die Navigationsleisten-Farben Ihrer Kirchengemeinde-Website an, um Ihre Markenbildung zu ergänzen. Sie können Farben für beide feste Hintergründe und transparente Überlagerungen konfigurieren, was Ihnen vollständige Kontrolle über das Erscheinungsbild Ihrer Navigation über verschiedene Seiten gibt.

Bevor Sie beginnen

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

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

  • Feste Navigation -- Navigationsleiste mit einer Hintergrundfarbe, normalerweise auf Inhaltsseiten verwendet
  • Transparente Navigation -- Navigation, die Seiteninhalte überlagert, normalerweise auf Seiten mit Hero-Bildern oder Ganzseitenhintergründen verwendet

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

Auf Navigations-Stile zugreifen​

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

Feste Navigation konfigurieren​

Die feste Navigation wird mit einer Hintergrundfarbe hinter der Navigationsleiste angezeigt. Sie können folgende anpassen:

Hintergrundfarbe​

  1. Aktivieren Sie den Override-Schalter für Hintergrundfarbe
  2. Klicken Sie auf die Farbwahl
  3. Wählen Sie Ihre gewünschte Hintergrundfarbe aus
  4. Die Standardeinstellung ist Weiß (#FFFFFF)
  1. Aktivieren Sie den Override-Schalter für Link-Farbe
  2. Wählen Sie die Farbe für Navigationslink-Text aus
  3. Dies beeinflusst Links in ihrem Standardzustand
  4. Die Standardeinstellung ist Dunkelgrau (#555555)
  1. Aktivieren Sie den Override-Schalter für Link-Hover-Farbe
  2. Wählen Sie die Farbe aus, zu der Links wechseln, wenn Benutzer über sie fahren
  3. Dies bietet visuelles Feedback für anklickbare Links
  4. Die Standardeinstellung ist Hellblau (#03A9F4)

Aktive Farbe​

  1. Aktivieren Sie den Override-Schalter für Aktive Farbe
  2. Wählen Sie die Farbe für den aktuell aktiven Seiten-Link aus
  3. Dies hilft Benutzern zu wissen, welche Seite sie gerade ansehen
  4. Die Standardeinstellung ist Hellblau (#03A9F4)

Transparente Navigation konfigurieren​

Die transparente Navigation überlagert Ihren Seiten-Inhalt ohne Hintergrund. Sie können folgende anpassen:

  1. Aktivieren Sie den Override-Schalter für Link-Farbe
  2. Wählen Sie eine Farbe aus, die sich gut von Ihrem Seiten-Hintergrund unterscheidet
  3. Oft funktionieren weiße oder helle Farben über dunklen Hintergründen am besten
  4. Die Standardeinstellung ist Dunkelgrau (#555555)
  1. Aktivieren Sie den Override-Schalter für Link-Hover-Farbe
  2. Wählen Sie die Hover-Zustand-Farbe aus
  3. Stellen Sie sicher, dass sie gegen Ihren Seiten-Hintergrund sichtbar ist
  4. Die Standardeinstellung ist Hellblau (#03A9F4)

Aktive Farbe​

  1. Aktivieren Sie den Override-Schalter für Aktive Farbe
  2. Wählen Sie die Farbe des aktiven Seiten-Indikators aus
  3. Sollte herausstechen und gleichzeitig zu Ihrem Design passen
  4. Die Standardeinstellung ist Hellblau (#03A9F4)
Info

Die transparente Navigation hat keine Hintergrundfarb-Einstellung, da sie den Seiten-Inhalt direkt überlagert.

Änderungen speichern​

  1. Nachdem Sie Ihre Farben konfiguriert haben, klicken Sie auf Navigations-Stile speichern
  2. Ihre Änderungen werden sofort auf Ihre Live-Website angewendet
  3. Besuchen Sie Ihre Website, um die Navigation in beiden Modi zu sehen

Auf Standardwerte zurücksetzen​

Wenn Sie zur Standard-Farbgestaltung zurückgehen möchten:

  1. Deaktivieren Sie die Override-Schalter für alle benutzerdefinierten Farben
  2. Klicken Sie auf Navigations-Stile speichern
  3. Die Navigation kehrt zum Standard-Farbschema zurück

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

Best Practices​

Farbkontrast​

  • Lesbarkeit -- Stellen Sie sicher, dass Link-Farben genügend Kontrast zum Hintergrund haben
  • WCAG-Konformität -- Streben Sie ein Mindestverhältnis von 4,5:1 für Barrierefreiheit an
  • Beide Modi testen -- Zeigen Sie eine Vorschau Ihrer Website mit fester und transparenter Navigation

Marken-Konsistenz​

  • Verwenden Sie Ihre Markenfarben -- Entsprechen Sie Ihrem Logo und Website-Theme
  • Begrenzen Sie Ihre Palette -- Bleiben Sie bei 2-3 Farben für ein zusammenhängendes Erscheinungsbild
  • Berücksichtigen Sie Ihre Bilder -- Bei Verwendung von transparenter Navigation testen Sie sie gegen typische Seiten-Hintergründe

Hover- und Active-Zustände​

  • Klares Feedback -- Machen Sie Hover-Zustände offensichtlich unterschiedlich von Standard-Links
  • Unterscheiden Sie aktive Seiten -- Verwenden Sie eine unterschiedliche Farbe, damit Benutzer wissen, wo sie sich befinden
  • Sanfte Übergänge -- Das System animiert automatisch Farbänderungen

Problemlösung​

Farben sehen falsch aus​

  • Cache löschen -- Browser-Caching zeigt möglicherweise alte Farben
  • Hex-Codes überprüfen -- Stellen Sie sicher, dass Sie gültige Hex-Farbcodes eingegeben haben
  • Auf verschiedenen Hintergründen testen -- Farben können je nach Seite unterschiedlich aussehen
  • Transparenter Modus -- Bei Verwendung von transparenter Navigation über hellen Bildern kann dunkler Text schwer zu sehen sein
  • Lösung -- Passen Sie Ihre Link-Farben an oder verwenden Sie dunklere Seiten-Hintergründe
  • Alternative -- Fügen Sie einen feinen Schatten oder eine Hintergrund-Überlagerung zum Navigationsbereich hinzu

Technische Details​

Navigations-Stile werden als JSON gespeichert und mit CSS-Variablen angewendet:

  • Änderungen werden sofort wirksam, ohne die Website neu zu erstellen
  • Farben kaskaieren zu allen Navigations-Elementen
  • Overrides sind optional; nicht festgelegte Farben verwenden Theme-Standardwerte

Verwandte Artikel​