Header
Last updated
Last updated
Beispiele:
Über Logo Position (1) positionierst Du das Logo im Header entweder links, rechts oder in der Mitte. Alle weiteren Elemente des Header wie Suche, Shop-Navigation usw. ordnen sich automatisch an.
Die Logo Größe mobile (2) sowie Logo Größe (3) beschreibt die Größe des Logos in Prozent im Verhältnis zur Höhe mobile (4) bzw. Höhe (5) des Headers. Damit ist sichergestellt, dass das Logo nicht aus dem Header ausbrechen kann - außer Du verwendest Werte über 100% um diesen Effekt absichtlich zu erzielen.
Beispiel:
Ist der Header in der Desktop Ansicht 100px hoch und das Logo 40% groß, ergibt sich eine Größe des Logos von 40 Pixel in der Höhe - die Breite ergibt sich proportional.
Die Höhe (1, 2) des Headers kann für die mobile Darstellung und die Variante für größere Geräte separat eingestellt werden. Zusätzlich können Abstand oben (3, 4) sowie Abstand unten (4,5) gesetzt werden. Dadurch können Darstellungen wie im Beispiel erzeugt werden.
Beispiel:
Beispiel:
Der gesamte Header kann einen Rahmen unten (1) erhalten und so stärker vom Content abgetrennt werden.
Der gesamte Header kann einen unteren Schlagschatten erhalten und so stärker vom Content abgetrennt werden.
Der Schlagschatten kann unterschiedlich für drei verschiedene Header-Status eingestellt werden. Schlagschatten (1) aktiviert den Schlagschatten für den Header im normalen Zustand. Schlagschatten:hover (2) aktiviert den Schlagschatten nur, wenn die Maus über den Header bewegt wird. Und Schlagschatten:sticky (3) aktiviert den Schatten immer dann, wenn der Nutzer nach unten scrollt und der Header fixiert dargestellt wird. Diese Funktion greift nur, wenn der Header auch als Sticky-Header, wie im folgenden erläutert, dargestellt wird.
Für die Farbe des Schlagschattens eignet sich in der Regel am besten ein teiltransparenter Farbton. In diesem Beispiel ist der Wert in rgba angegeben, welchen Du im Color-Picker über die Alpha-Transparenz auswählen kannst. Der Wert rgba(0,0,0,0.1) ist also ein reines Schwarz mit 10% Sichtbarkeit.
Die Weite ist in Pixel anzugeben und gibt an, wie groß der Schatten in Pixeln ist.
Das Theme beinhaltet die Funktion Sticky Header, welche den Header beim Herunterscrollen der Seite am oberen Bildschirmrand fixiert. Mit Hilfe der Anzeigebereiche (1) kannst Du festlegen, auf welchen Geräten der fixierte Header genutzt werden soll.
Die Bildschirmfläche (Viewport) ist eine Ressource, die sinnvoll genutzt werden sollte. Man sollte daher nicht aus einem falsch verstandenen Usability-Ansatz davon ausgehen, dass eine Sticky-Navigation automatisch zu einer besseren Usability (Nutzbarkeit) führen. Fixierte Header verbrauchen auf dem mobilen Gerät wertvolle vertikale Bildschirmflächen und bieten dem Benutzer keinen enormen Mehrwert.
Der manuelle Offset (2) Wert definiert den Abstand von Oben, ab wann der Header fixiert werden soll. Lass das Feld leer, wenn der Abstand des Headers zur Oberkante des Browsers automatisch ermittelt werden soll. Der Header wird sticky, sobald der Header durch Scrollen außerhalb des sichtbaren Bereiches gerät - daraufhin wird der Header mit einer Animation erscheinen und fixiert.
Möglichkeit 1: Wert leer lassen zur automatischen Berechnung
Möglichkeit 2: Legt man einen Offset-Wert von 0 fest, wird der Header sofort fixiert - ohne Animation.
Möglichkeit 3: Der Offset-Wert ist immer dann nützlich, wenn das Flyout-Menü oder Dropdown-Menü so viele Einträge beinhalten, dass die Einträge unterhalb des Browserrandes verschwinden. Wird nun für den Offset-Wert ein zusätzlicher Abstand z.B. 600 eingetragen, muss der Nutzer mind. 600 Pixel nach unten scrollen, bis der Header fixiert wird. Dadurch werden die Menüpunkte, die unterhalb des Browser-Falzes verschwunden sind beim Scrollen wieder erreichbar. Der Header wird erst zu einem späteren Scrollabstand fixiert.
Die Auto Hide (3) Funktion sorgt dafür, dass der komplette Header erst wieder sichtbar wird, wenn der Nutzer im Begriff ist nach oben zu Scrollen.
Die Auto Hide Funktion verbessert die Usability, da so auch bei mehrzeiligen Headern oder sehr hohen einzeiligen Headern nicht permanent der Viewport künstlich verkleinert wird.
Die Abweichende Header Höhe:sticky (4) lässt Dich eine zusätzliche (meist geringere) Header Höhe:sticky (5) festlegen. Der Header kann so im Sticky Zustand auf diese abweichende Höhe schrumpfen (oder eben wachsen). Die Einstellung soll insbesondere Layouts mit ausladendem Header die Möglichkeit geben, die Sticky-Funktion nutzerfreundlich einzusetzen ohne zu viele Bereiche mit dem Sticky-Header zu überdecken.
Der Header im Checkout unterscheidet sich in Shopware vom normalen Header. Hier gibt es die Möglichkeit einen Schlagschatten (1) zu setzen.
Für die Farbe des Schlagschattens eignet sich in der Regel am besten ein teiltransparenter Farbton. In diesem Beispiel ist der Wert in rgba angegeben, welchen Du im Color-Picker über die Alpha-Transparenz auswählen kannst. Der Wert rgba(0,0,0,0.1) ist also ein reines Schwarz mit 10% Sichtbarkeit.
Die Weite ist in Pixel anzugeben und gibt an, wie groß der Schatten in Pixeln ist.
Der gesamte Checkout Header kann einen Rahmen unten (2) erhalten und so stärker vom Content abgetrennt werden.
