Header
Zuletzt aktualisiert
Zuletzt aktualisiert
Der Header beschreibt den inneren Teil zwischen Top Bar und Navigation und lässt sich durch unterschiedliche Einstellungen einfach und schnell umgestalten.
Ja Nutzt die volle Breite des Headers. So wird der Inhalt des Headers immer auf die volle Bildschirmbreite gestreckt.
Nein Die Breite des Header Inhalts wird automatisch auf die von dir konfigurierte Containerbreite begrenzt.
Ja Der Header bewegt sich beim Scrollen mit.
Nein Der Header bleibt statisch an seinem Platz.
Overlay Beim sog. "Overlay" ist die Suche für den Nutzer nicht direkt ersichtlich. Dies sorgt für einen aufgeräumten, minimalistischen Header. Stattdessen wird ein Lupen Icon angezeigt. Klickt der Besucher darauf, öffnet sich das Overlay, welches die eigentliche Suchleiste enthält.
Standard Mit dieser Option wird die Suchleiste direkt im Header angezeigt.
Dropdown Das Account Menü wird eingebunden, sobald sich ein Besucher einloggt. Mit Klick auf die Account Initialen öffnet sich das Menü als Dropdown. Dies gibt dem Nutzer zusätzliche Informationen über den aktuell angemeldeten Benutzer. Bspw. werden Name, Firma, E-Mail Adresse und der Link zum Konto im Menü angezeigt. Gerade im B2B Sektor ist dies häufig verbreitet, wenn sich mehrere Nutzer ein Konto teilen.
Ausblenden Es wird kein Account Menü im Shop eingebunden. Mit Klick auf die Initialen landet der Besucher direkt in seinem Konto.
Unterhalb Ist diese Option ausgewählt wird die Beschreibung der einzelnen Aktions-Buttons unterhalb der Icons ausgegeben. Gerade bei älteren Zielgruppen kann dies die Benutzerfreundlichkeit deines Shops verbessern.
Keine Keine Beschreibung wird angezeigt.
Mit diesem Feld kannst du die Höhe des Headers für Tablet und Desktop festlegen. Je höher der Wert, desto größer der Header.
Die minimale Höhe des Headers richtet sich immer nach der Größe des Inhalts innerhalb des Headers aus. Hast du bspw. von Haus aus ein hohes Logo, ist die minimale Höhe des Header immer so groß, dass auch dein Logo im Header Platz findet und nicht gequetscht wird.
Mit diesem Feld kannst du die Höhe des Headers für Smartphones festlegen. Je höher der Wert, desto größer auch der Header auf mobilen Endgeräten.
Die minimale Höhe des Headers richtet sich immer nach der Größe des Inhalts innerhalb des Headers aus. Hast du bspw. von Haus aus ein hohes Logo, ist die minimale Höhe des Header immer so groß, dass auch dein Logo im Header Platz findet und nicht gequetscht wird.
Hiermit lässt sich die Größe deines Logos für Tablet und Desktop definieren. Je größer der Wert, desto größer auch dein Logo.
Hiermit lässt sich die Größe deines Logos für Smartphones definieren. Je größer der Wert, desto größer auch dein Logo auf mobilen Endgeräten.
Lege die Schriftgröße für die Beschreibung der Aktions-Buttons fest.
Definiert die Schriftstärke für die Beschreibung der Aktions-Buttons. Je nach Schriftart stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:
100 = Thin 200 = Extra Light 300 = Light 400 = Normal 500 = Medium 600 = Semi Bold 700 = Bold 800 = Extra Bold 900 = Black
Mit dieser Einstellung kannst du die untere Rahmenfarbe des Headers festlegen. So kannst du bspw. mit einer weißen Hintergrundfarbe und der $sw-border-color
als Rahmenfarbe eine dezente Abgrenzung von Header und Navigation schaffen.
Solltest du keine Rahmenfarbe verwenden wollen, kannst du hierfür diesselbe Farbe wie für den Hintergrund wählen und es entsteht keine sichtbare Trennlinie mehr.
Diese Option bietet dir die Möglichkeit die Farbe der Icons im Header festzulegen.
Hiermit kannst du die Farbe für die Beschreibung der Aktions-Buttons definieren.
Sofern du in der vorherigen Konfiguration "Layout der Suche" den Wert "Standard" wählst, hast du hier die Möglichkeit die Hintergrundfarbe der Suchleiste anzupassen.
Hiermit kannst du die Hintergrundfarbe der Badges im Header bestimmen.
Sowohl mit dem Merkzettel, als auch mit dem Warenkorb, hat der Kunde die Möglichkeit Produkte zu merken bzw. in den Warenkorb zu legen. Sobald dies erfolgt ist, erscheint ein kleines sog. "Badge" am rechten oberen Rand des Icons. Dieses Badge beinhaltet die Anzahl der Artikel auf dem Merkzettel bzw. im Warenkorb und lässt sich mit dieser Einstellung konfigurieren.
Hiermit kannst du die Schriftfarbe der Badges im Header bestimmen.
Sowohl mit dem Merkzettel, als auch mit dem Warenkorb, hat der Kunde die Möglichkeit Produkte zu merken bzw. in den Warenkorb zu legen. Sobald dies erfolgt ist, erscheint ein kleines sog. "Badge" am rechten oberen Rand des Icons. Dieses Badge beinhaltet die Anzahl der Artikel auf dem Merkzettel bzw. im Warenkorb und lässt sich mit dieser Einstellung konfigurieren.