Elemente
Gestaltung verschiedener Komponenten, welche an unterschiedlichen Stellen in der Storefront ausgespielt werden.
Für die Sidebar kann eine Sticky (1) Funktion aktiviert werden. Beim Scrollen läuft diese dann fixiert mit uns verschwindet nicht. Die Sticky-Funktion wird nur dann angewendet, wenn die Inhalte der Sidebar nicht höher sind als die Höhe des Browser-Viewports.
Sticky erzweingen (2): Die Sticky-Funktion funktioniert nur, wenn alle Eltern-Elemente nicht die CSS Eigenschaft "overflow:hidden" verwenden. Es gibt Erweiterungen, welche diese Eigenschaft setzen. Wenn aktiv, wird die Sticky-Funktion erzwungen und alle Eltern-Elemente mit "overflow: hidden", werden auf "overflow: visible" umgeschrieben.
Zusätzlich zu den üblichen Farben, kann auch der aktive Pfad (2) eingefärbt werden. Die :hover (3) Farben werden zusätzlich für das aktive Element verwendet.
Background (1) ist die allgemeine Hintergrundfarbe eines Menü-Elementes. Background:aktiver Pfad (4) legt die Farbe für die aktive Ebene fest. Dadurch kann der Kunde leichter unterscheiden in welchen Bereich welcher Ebene er tiefer navigieren kann. Background:hover (2) markiert das aktive obere Element und weitere Mouse-Over Aktionen über den Menü-Elementen.
Der Unterstrich am aktiven Element kann in den Grundeinstellungen im nächsten Schritt aktiviert werden.
Neben den Einstellungen für die Darstellung der Schrift kann auch ein vertikaler Innenabstand (1) gesetzt werden. Der Vertikale Innenabstand (1) bestimmt, wie hoch die einzelnen Menü-Einträge werden. Bei vielen Kategorien sollte ein möglichst kleiner Wert gewählt werden.
Durch die Option Abstand unten (2) können die einzelnen Elemente nochmal voneinander getrennt werden.
Zusätzliche Pfeile (3) bei vorhandenen Unterkategorien sind optional darstellbar.
Der Anzeigemodus (4) bestimmt den Modus der Sidebar-Navigation. Im Modus
Aufklappbar können die Unterkategorien auf- und zugeklappt werden, ohne die Seite zu wechseln.Mit Hilfe der Hover Animation (5) kann eine animierte Unterlinie bei Mouse-Over und Aktiv-Status ab der zweiten Navigations-Ebene dargestellt werden.
Beispiele:
2px Abstand nach unten, Hover Animation Standard
Minimal Design Beispiel, keine Farben oder Konturen, Hover Animation: Unterlinie
Formular-Elemente sind Input-Felder, Textfelder oder Select-Felder. Diese können einen Hintergrund, eine Textfarbe und eine Kontur haben.
Mit der Aussehen (1) Einstellung kannst Du das globale Erscheinungsbild von Formularfeldern beeinflussen. Wähle zwischen dem Aussehen mit einer Unterlinie oder dem Standard-Aussehen.
Mit Hilfe der Konfiguration Floating Labels (2) kannst Du die Labels der Formularfelder für einen minimaleren und weniger redundanten Look umgestalten.
Beispiele:
Formularfelder: Standard
Formularfelder: Unterlinie
In Shopware 6 gibt es verschiedenen Slider-Navigations-Elemente. Grundsätzlich wird zwischen der Dot-Navigation und den Pfeilen unterschieden.
Es gibt drei wichtige Slider-Typen
- 1.Image Slider = Erlebniswelten-Element zur Darstellung von Bild-Slidern
- 2.Galerie Slider = Element zur Darstellung der Produktbilder auf der Produktdetailseite
- 3.Produkt Slider = Element zur Darstellung von Produktkacheln als Slider-Element
Zusätzlich kann man in den meisten Slidern bestimmen, ob die Navigationselemente innen (auf dem Bild) oder außen, außerhalb des Bildes dargestellt werden sollen.
.png?alt=media)
Beispiel:
Pfeile und Dots einer Galerie
Produkt Slider erhalten ihr Aussehen aus dieser Konfiguration ab Theme Version 2.4.0 nicht mehr.
.png?alt=media)
Beispiel:
.png?alt=media)
Beispiel:
Navigations-Elemente außen
.png?alt=media)
Beispiel:
Navigations-Elemente innen
Die Platzierung (1) der Pfeile (2) und Dots (1) kann
Alternativ auf die rechte Seite des Sliders gesetzt werden. Im Standard befinden sich die Dots im unteren mittigen Bereich. Die Pfeile liegen links und rechts vertikal zentriert.Das Aussehen der Punkte Navigation (2) kann von
Punkten zu Balken oder Expandieren geändert werden.(3, 4) Die Pfeile der jeweiligen Slider können so eingestellt werden, dass diese erst sichtbar werden, wenn man mit der Maus über dem Slider fährt.
Beispiele:
Standard Platzierung
Beispiel:
Das Aussehen (1) der Produktslider kann so eingestellt werden, dass auch außerhalb des aktiven Bereichs liegende Elemente mit einer Sichtbarkeit von 50% dargestellt werden. Oftmals kann dies die Wirkung des Produkt-Sliders und die Interaktion mit diesem Element erhöhen.
Optional können die Slider Pfeile ausgeblendet (2) und erst bei MouseOver eingeblendet werden.
Beispiele:
Standard
Erweitert
Die Paginierung des Listings hat neben den üblichen Farben auch Farben für die verschiedenen Status: :hover, :active und :disabled.
Tipp: Die Werte der Felder können SCSS-Funktionen sein:
hsl(hue($sw-border-color), saturation($sw-border-color), 89%)Hier wird die Farbe per hsl-Format definiert. Der Farbwinkel und Sättigung der Rahmenfarbe werden mit einer Helligkeit von 89% kombiniert.
.png?alt=media)
Das Aussehen (1) der Paginierung ist als
Pills und Standard darstellbar. Elemente, die als Pills definiert sind, haben einen Abstand zueinander.Die Option Disabled-Buttons ausblenden (3) blendet die überflüssigen Button aus, da diese ohnehin nicht klickbar sind. Befindet man sich beispielsweise auf Seite 1, sind die Buttons für "erste Seite" und "Seite vor" überflüssig.
Beispiele:
Pills rund
Standard
Pills eckig
Disabled-Button ausgeblendet
Die Abrundungen der Pills ergeben sich aus dem eingestellten Button-Radius aus dem Tab der Allgemein-Einstellungen. Für runde Pill müssen Buttons
rund eingestellt sein.Breadcrumbs sind eine sekundäre Navigation, bei welcher der zurückgelegte Pfad von der Startseite bis zur aktuellen Seite dargestellt wird. Es zeigt die Ebenentiefe an, in welcher man sich befindet.
Neben der Ausrichtung (1) der Breadcrumbs können diese auch optisch auf die volle Breite (2) gesetzt werden. Die Breadcrumbs dehnen sich dann je nach gewähltem Grundlayout des Shops bis zum Browserrand aus. (In den Layout-Modi
Full-Width-Boxed und Boxed, sowie Full-Width-Header dehnt sich die Hintergrundfarbe bis an den Browserrand aus - nicht aber der Inhalt.)Die Option Startseite anzeigen (3) stellt einen Startseiten-Link als erstes Element den Breadcrumbs voran. Zusätzlich kann ein einleitender Text 'Du bist hier' (4) angezeigt werden. Der text wurde als Textbaustein implementiert und kann in den Textbausteinen der Administration geändert werden.
Die Felder Oberer Abstand (5) und Unterer Abstand (6) definieren den Abstand der Breadcrumbs zum Header sowie zum weiteren Content der Seite.
Beispiel:
Breadcrumbs mit Hintergrundfarbe nicht volle Breite
Breadcrumbs mit Hintergrundfarbe auf voller Breite (2)
Wie Du Breadcrumbs in das Kategorie-Bild setzen kannst, erfährst Du im Bereich Kategoriebild Headerbereich.
Breadcrumbs im Kategorie-Bild
Der Cookie-Banner kann als Widget als kleine Leiste im unteren Bereich, als Popup mittig oder als Leiste (Standard) im unteren Bereich der Seite dargestellt werden.
Ein Offcanvas-Element ist ein Widget im Shop bei dem zusätzliche Inhalte oder Menüs außerhalb des sichtbaren Bildschirms platziert und bei Bedarf sichtbar gemacht werden. In Shopware ist das mobile Menü und der Offcanvas-Warenkorb ein solches Element.
Für einen besondern Look lässt sich ein Außenabstand (1) um dieses Offcanvas-Element definieren, welches auf gröperen Endgeräten das Offcanvas-Element von den Browser-Rändern abhebt.
Beispiel:
Offcanvas Warenkorb mit Außenabstand
Ein Backdrop ist ein halbtransparentes Layer, welches sich bei Verwendung eines Modals oder Offcanvas zwischen diesem und der restlichen Seite legt. Es dient dazu das Modal bzw. Offcanvas Elementen zu fokussieren und verhindert, dass Benutzer gleichzeitig mit dem Hintergrund der Seite interagieren.
Achte bei der Auswahl der Farbe für den Hintergrund (1) darauf, eine teiltransparente Farbe über den Colorpicker auszuwählen. Der Shop im Hintergrund des Elementes sollte nur verblassen - nicht komplett verschwinden.
Zusätzlich kannst Du eine optionale Akzentfarbe (2) wählen, welche zu der Farbe für den Hintergrund (1) über einen Farbverlauf hinzugemischt wird.
Über den Wert im Feld Hintergrund weichzeichnen (3) kann der Shop im Hintergrund des Popups oder Offcanvas unscharf gemacht werden. Das verstärkt den Fokus auf das Vordergrundelement nochmals.
Beispiel:
Last modified 21d ago