Shop Navigation

Farben

Zusätzlich zu den allgemeinen Einstellungen für die Hintergrund- und Vordergrundfarben der einzelnen Elemente kannst Du eine Badge Farbe (1) definieren. Das betrifft das Badge für eingeloggte Benutzer und das Badge für die Anzahl der Artikel auf dem Merkzettel.

Zusätzlich kannst Du den Elementen einen Rahmen (1) hinzufügen und deren Farben mit den Farbfeldern Rahmen (3) und Rahmen:hover (4) konfigurieren.

Beispiel:

Grundeinstellungen

Schriftgröße (1) & Schriftstärke (2) - Insbesondere bei der Darstellung des zweizeiligen Headers werden diese Einstellungen auf die Sprachauswahl, Währungsauswahl und Service-Navigation angewandt. Tooltips (3) & Tooltips Platzierung (4) - Ergänzend zu den Icons können Tooltips positioniert und angezeigt werden, welche die Funktion der Icons bei Mouse-Over unmissverständlich erklären. Badges minimieren (5) - Merkzettel, Account und Warenkorb verfügen über sogenannte Badges. Das sind kleine Labels, welche zB. die Anzahl der Produkte im Merkzettel anzeigen. Diese Labels können zu einem kleinen Punkt minimiert werden und erst bei MouseOver die Anzahl anzeigen. Dadurch wirkt der Bereich im Sinne eines minimal Designs sauberer und ordentlicher.

Beispiel:

Warenkorb

Der Warenkorb kann über eine eigene Farb- und Schriften-Konfiguration (1-6) hervorgehoben werden.

Je nach gewählter Hintergrundfarbe kann es sinnvoll sein, die Badge Farbe (7) der "Anzahl der Produkte im Warenkorb" anzupassen. Die Textfarbe des Badges wird dabei automatisch mit dem optimalen Kontrast in schwarz oder weiß ermittelt.

Zusätzlich kannst Du den Elementen einen Rahmen (8) hinzufügen und deren Farben mit den Farbfeldern Rahmen (9) und Rahmen:hover (10) konfigurieren.

Beispiel: