Beim Scrollen einer Seite nach unten ist der Header an einem bestimmten Punkt nicht mehr sichtbar. Im Allgemeinen enthält der Header wichtige Informationen, wie zum Beispiel das Logo, den Seitentitel und vor allem das Navigationsmenü. Um den Website-Besuchern die Navigation zu erleichtern, können diese Elemente in eine Seitenleiste eingefügt werden, die beim Scrollen im oberen Bereich des Browserfensters verankert ist und somit immer sichtbar bleibt. Diese sogenannte StickyBar kann individuell gestaltet werden, sowohl im Hinblick auf ihre Inhalte als auch ihren grafischen Stil. Die entsprechenden Optionen finden Sie in den folgenden Bereichen:
Wenn Sie eine responsive Website erstellen, können Sie die StickyBar für die Ansichten aller Umbruchpunkte bearbeiten. In diesem Fall enthält das Fenster die Responsiv-Leiste, identisch mit der im Fenster Auflösungen und responsives Design. Die Responsiv-Leiste zeigt alle eingestellten Umbruchpunkte, nach denen sich die Intervalle richten. Klicken Sie in ein Intervall, um es zu markieren, und nehmen Sie dann die gewünschten Einstellungen für die Grafik und die Inhalte der StickyBar vor.
Wenn eine obere Leisteangezeigt werden soll, auch wenn der Header nicht mehr sichtbar ist, aktivieren Sie die Option Leiste oben anzeigen.
Nach der Aktivierung können für die StickyBar die folgenden Optionen im Bereich Stil festgelegt werden:
| ▪ | Hintergrundfarbe: Hier kann die Farbe für den Hintergrund auswählt werden. |
| ▪ | Bilddatei: Wählen Sie hier das Bild für den Hintergrund der Zelle aus. Sie können Dateien in den Formaten JPG, GIF und PNG verwenden. Das Bild kann entweder aus der Online-Bibliothek, die mit der Schaltfläche  geöffnet wird, oder mit der Schaltfläche  Datei auswählen in einem lokalen Verzeichnis gewählt werden. |
| ▪ | Anordnung: Hier können Sie bestimmen, ob das Hintergrundbild wiederholt werden soll oder nicht. Das Bild kann nur horizontal, nur vertikal oder in beide Richtungen wiederholt werden, bis es den zur Verfügung stehenden Platz ausfüllt. Das Bild kann ferner so angepasst werden, dass es den gesamten Hintergrund ausfüllt. In diesem Fall können jedoch die ursprünglichen Proportionen möglicherweise nicht beibehalten werden. |
| ▪ | Ausrichtung: Legt fest, wie das Bild zur StickyBar ausgerichtet werden soll. |
| ▪ | Höhe: Höhe der StickyBar in Pixeln. |
| ▪ | Deckkraft: Deckungskraft der Hintergrundfarbe der StickyBar. Je kleiner der eingestellte Wert ist, desto geringer wird die Deckkraft des Filters, das heißt, der Seitenhintergrund wird stärker durchscheinen. |
| ▪ | Auf die Breite des Browserfensters erweitern: Bei Aktivierung erstreckt sich die StickyBar über die gesamte Breite des Browserfensters und nicht nur über die Seitenbreite. |
|
Nach der Grafischen Gestaltung müssen die Inhalte der StickyBar festgelegt werden.
Zur Gestaltung der StickyBar steht ein Editor zur Verfügung, der dem für die Templates entspricht (Fenster Inhalt des Templates). Dieser Editor enthält eine Werkzeugleiste und darunter einen Arbeitsbereich, in dem automatisch das gewählte Hintergrundbild angezeigt wird. Das Bild wird im Verhältnis 1:1 dargestellt und kann bei Bedarf mit der horizontalen Scroll-Leiste verschoben werden. In diesem Bild werden alle mit den verfügbaren Funktionen vorgenommenen Änderungen in Echtzeit angezeigt.
Direkt unter dem Bild befindet sich eine Statusleiste mit folgenden Daten:
| ▪ | Position: X- und Y-Koordinaten der Position der oberen rechten Ecke des ausgewählten Objekts im Verhältnis zu dem von der StickyBar belegten Platz. |
| ▪ | Größe: Breite und Höhe des ausgewählten Objekts in Pixeln. |
Unter der Statusleiste finden Sie schließlich die Liste aller Objekte, die für die Gestaltung der StickyBar verwendet werden können.
Diese Objekte entsprechen jenen für die Seitengestaltung (siehe Schritt 4 - Seiten). Zur Erleichterung der Suche sind die Objekte nach Filtern sortiert und für jedes wird eine Vorschau angezeigt.
|
Die für die Anzeige in der StickyBar empfohlenen Elemente sind die Hauptelemente des Headers, vor allem das Logo, der Seitentitel und das Navigationsmenü.
|
|
Praktische Anwendung:
