Kompatibilität:

WebSite X5 Evo und Pro

Wenn ein Besucher auf einer Seite nach unten scrollt, ist der Header der Website – der häufig Logo, Hauptmenü und wichtige Links enthält – nicht mehr sichtbar. Dies kann die Orientierung innerhalb der Inhalte erschweren, insbesondere bei umfangreicheren Websites.


Um Navigation, Zugänglichkeit und Benutzererlebnis zu verbessern, bietet WebSite X5 die Möglichkeit, eine Sticky Bar zu verwenden, also eine obere Leiste, die beim Scrollen stets sichtbar bleibt und die wichtigsten Elemente der Website jederzeit griffbereit hält.


Die Sticky Bar ist somit ein besonders nützliches Werkzeug, um die Navigation zu stärken, die Benutzerfreundlichkeit zu verbessern und das Nutzungserlebnis sowohl auf Desktop- als auch auf mobilen Geräten effektiver zu gestalten.


Warum eine Sticky Bar verwenden

Eine gut gestaltete Sticky Bar ermöglicht es Ihnen:

  • das Hauptmenü jederzeit zugänglich zu halten;
  • die Orientierung der Benutzer zu verbessern;
  • den schnellen Zugriff auf die wichtigsten Bereiche zu erleichtern;
  • Logo, CTAs und wichtige Links hervorzuheben;
  • die Navigation auf mobilen Geräten zu verbessern.


So aktivieren und konfigurieren Sie die Sticky Bar

1. Einstellungen aufrufen

  • Gehen Sie zu Schritt 2 - Template-Einstellungen
  • Klicken Sie auf Sticky Bar. 

2. Leiste aktivieren

  • Aktivieren Sie im Bereich Allgemein die Option Obere Leiste anzeigen.

3. Erscheinungsbild festlegen

  • Verwenden Sie die verfügbaren Optionen, um die Hintergrundfarbe oder das Hintergrundbild festzulegen und der Leiste das gewünschte Aussehen zu geben.
  • Wenn die Sticky Bar über die gesamte Breite des Browserfensters und nicht nur über die Breite der Seiteninhalte angezeigt werden soll, aktivieren Sie die Option Auf die Breite des Browserfensters erweitern.


#tip - Barrierefreiheit. Um Ihre Seiten barrierefrei zu gestalten, sollten Sie überlegen, für die in der Sticky Bar verwendeten Bilder alternative Textinhalte bereitzustellen. Sie können den ALT-Text hinzufügen, indem Sie auf die Schaltfläche  klicken, die sich im Feld zum Importieren der Datei befindet. Weitere Informationen finden Sie unter Barrierefreiheit von Bildern: die Bedeutung von Alternativtext.


So legen Sie die Inhalte der Sticky Bar fest

Nachdem Sie das Erscheinungsbild definiert haben, kümmern Sie sich um die Inhalte der Sticky Bar:

  • Öffnen Sie den Bereich Inhalte im Fenster Sticky Bar.

Hier finden Sie einen grafischen Editor, der dem des Templates ähnelt (im Fenster Inhalt des Templates). Dieser Editor verfügt über eine Werkzeugleiste und darunter einen Arbeitsbereich, in dem das als Hintergrund verwendete Bild automatisch im Maßstab 1:1 angezeigt wird. Alle vorgenommenen Änderungen werden in Echtzeit auf diesem Bild dargestellt.

  • Wählen Sie aus der Liste der verfügbaren Objekte diejenigen aus, die Sie für die Sticky Bar verwenden möchten, und ziehen Sie sie in den Arbeitsbereich.
  • Verwenden Sie die Auswahlpunkte oder die Befehle der Werkzeugleiste, um Position, Größe und Ausrichtung der Objekte anzupassen. 
  • Doppelklicken Sie auf ein eingefügtes Objekt, um das entsprechende Einstellungsfenster zu öffnen.  


#tip - Innerhalb der Sticky Bar empfiehlt es sich, die wichtigsten Elemente des Headers zu übernehmen, vor allem das Firmenlogo bzw. den Seitentitel sowie das Navigationsmenü. Um schneller vorzugehen, können Sie mehrere Objekte aus dem Template-Header auswählen, kopieren und direkt in den Bereich „Inhalte“ der Sticky Bar einfügen.


So optimieren Sie die Sticky Bar für eine responsive Website

Wenn Sie eine responsive Website erstellen (Sie haben die Option Responsive Website unter Schritt 2 - Template-Einstellungen > Auflösungen und Responsive Design aktiviert), steht Ihnen in den Bereichen zur Definition von Gestaltung und Inhalten der Sticky Bar die Responsive Bar zur Verfügung. Diese zeigt alle festgelegten Breakpoints an und unterteilt sie in entsprechende Bereiche.


Um die Anzeige der Sticky Bar zu verwalten, gehen Sie für jeden Breakpoint wie folgt vor:

1. Desktop-Version konfigurieren

  • Wählen Sie in der Responsive Bar den Bereich Desktop aus.
  • Legen Sie sowohl das Erscheinungsbild als auch die Inhalte der Sticky Bar fest, indem Sie die im vorherigen Abschnitt beschriebenen Schritte befolgen.

2. Weitere Breakpoints überprüfen

  • Wählen Sie nacheinander jeden Bereich in der Responsive Bar aus.
  • Der verfügbare Platz wird geringer: Prüfen Sie, ob alle Objekte weiterhin beibehalten werden können.

3. Verborgene Objekte verwalten

  • Blenden Sie sekundäre Elemente in kleineren Ansichten aus und lassen Sie nur die wichtigsten sichtbar.
  • Um ein Objekt auszublenden, wählen Sie es aus und klicken Sie auf die Schaltfläche Verwaltung ausgeblendeter Objekte: Sie können festlegen, ob das Objekt nur in der aktuellen Ansicht oder auch in allen kleineren Ansichten ausgeblendet wird.
  • Um ein zuvor ausgeblendetes Objekt wieder sichtbar zu machen, wählen Sie in der Responsive Bar den gewünschten Bereich aus, klicken Sie auf die Schaltfläche und wählen Sie den Befehl Verwaltung ausgeblendeter Objekte für diese Ansicht: Wählen Sie aus der Liste der ausgeblendeten Objekte das gewünschte aus und klicken Sie, um es wieder sichtbar zu machen.


#tip - Weitere Informationen finden Sie unter Responsive Template. Wie passt man das Layout der Website an verschiedene Geräte an?


Praktische Tipps für eine effektive Sticky Bar

Eine Sticky Bar korrekt zu gestalten bedeutet, Barrierefreiheit, Funktionalität und visuelle Klarheit in Einklang zu bringen.


Um optimale Ergebnisse zu erzielen:

  • fügen Sie nur wesentliche Inhalte ein;
  • priorisieren Sie Menü, Logo und strategische CTAs;
  • vermeiden Sie zu hohe Leisten;
  • prüfen Sie die Lesbarkeit auf kleineren Bildschirmen;
  • nutzen Sie die Responsive Bar, um jeden Breakpoint zu optimieren;
  • blenden Sie sekundäre Inhalte auf mobilen Geräten aus;
  • testen Sie das Verhalten immer über die lokale Vorschau;
  • stellen Sie sicher, dass Schaltflächen und Links leicht anklickbar sind.


Zusammenfassung

Die Sticky Bar ist ein äußerst nützliches Werkzeug, um Navigation, Barrierefreiheit und die Kontinuität der Nutzung einer Website zu verbessern.


Mit WebSite X5 können Sie sie visuell konfigurieren und Gestaltung, Inhalte sowie das responsive Verhalten anpassen, ohne in den Code eingreifen zu müssen.


Richtig eingesetzt trägt die Sticky Bar dazu bei, professionellere, benutzerfreundlichere und effektivere Websites zu erstellen und den Nutzern eine einfachere und unmittelbarere Navigation auf jedem Gerät zu bieten.