Einleitung

In diesem Bereich kannst du die Farben für deinen Shop individuell einstellen.

Die verfügbaren Einstellungen hängen davon ab, welche Farben durch dein verwendetes (Child-)Template mitgebracht werden.

CSS kompilieren

Wichtig: Änderungen in diesem Bereich benötigen eine Rekompilierung des SCSS. Daher muss das Plugin entsprechende Schreibrechte auf Dateien im Template besitzen. Dies bedeutet außerdem, dass das Speichern hier etwas länger dauert als an anderen Stellen im easyTemplate360.

Open

Individualisierung für Entwickler

Die verfügbaren Farben im Backend lassen sich über das Template steuern. Dazu wird eine ./config/colors.json benötigt. Wie diese Datei aussehen kann, kannst du dem easyTemplate360 Parent-Template entnehmen.

Wichtig: Beim Kompilieren des SCSS werden SCSS-Variablen mit den Namen entsprechend der IDs der Farben in der Datei ./scss/abstracts/_colors_generated.scss erzeugt. Diese kannst du folglich in deinem Child-Template-Theme nutzen.

Grundsätzliche Einstellmöglichkeiten

Das easyTemplate360 bietet zahlreiche Anpassungsmöglichkeiten im Bereich der Farben. In diesem Abschnitt erhältst du eine Übersicht über die wichtigsten Optionen und deren Einsatzmöglichkeiten.

Primärfarben: Die Primärfarben bilden die Hauptfarben deines Shops. Orientiere dich hierbei an deinen Brandfarben, um die Grundstimmung festzulegen. Zusätzlich lässt sich auch der Inhalt-Hintergrund anpassen.

Neutrals: Neutrale Farben sorgen für eine entsättigte Farbpalette und erhöhen die Lesbarkeit. Sie werden häufig als Trenn- und Hintergrundelemente eingesetzt.

Signalfarben: Signalfarben sind essenziell, um wichtige Hinweise, Anmerkungen oder Warnungen hervorzuheben. Sie kommen beispielsweise zum Einsatz bei Bestätigungen erfolgreicher Aktionen, Warnungen vor gefährlichen Aktionen oder bei möglichen Fehlhandlungen. Du kannst hier den Hintergrund, die Schriftfarbe und den Rahmen individuell anpassen.

Warenkorb Button: Der Warenkorb-Button ist die Schaltfläche, mit der Artikel in den Warenkorb gelegt werden. Die Farben für Schrift, Hintergrund und Rahmen können für die verschiedenen Zustände des Buttons angepasst werden: Default, Hover, Active und Disabled.

Zur Kasse Button: Der Zur-Kasse-Button leitet den Benutzer in den Bestellprozess. Auch hier lassen sich Schriftfarbe, Hintergrund und Rahmen für die Interaktionszustände Default, Hover, Active und Disabled anpassen.

Button Primär: Der Primär-Button wird in den meisten Widgets verwendet und ist eine wichtige Schaltfläche auf der Seite. Die Farbeinstellungen für Schrift, Hintergrund und Rahmen lassen sich ebenfalls für die Interaktionszustände Default, Hover, Active und Disabled ändern.

Button Sekundär: Der Sekundär-Button wird häufig zusammen mit dem Primär-Button verwendet, um zusätzliche Funktionen anzubieten. Wie beim Primär-Button können hier die Farben für Schrift, Hintergrund und Rahmen in den Zuständen Default, Hover, Active und Disabled angepasst werden.

Links: Diese Einstellung betrifft alle Links, die keine Buttons sind. Du kannst hier die Farben für die Zustände Default, Hover, Active und Visited individuell festlegen.

Overlays: Mit den Overlay-Farbeinstellungen kannst du die Farben von Artikel-Overlays, beispielsweise in der Kategorieansicht, anpassen. Du kannst die Farben für die verschiedenen Overlay-Kategorien wie Bestseller, Angebot, Neu, Top, Erscheinend, Top Bewertet, Ausverkauft, Lagernd und Vorbestellbar festlegen. Dabei lässt sich für jedes Overlay die Farbe von Schrift, Hintergrund und Rahmen ändern.

Schrift: Die Schriftfarben lassen sich für verschiedene Textarten anpassen, darunter helle und dunkle Schrift, Angebotspreise sowie Platzhaltertexte. Wichtiger Hinweis: Stelle sicher, dass helle und dunkle Schriftarten ausreichend voneinander abgehoben sind, um Kontrastprobleme zu vermeiden.

Sonstige: In dieser Kategorie findest du Farboptionen für Elemente, die keiner der vorherigen Gruppen zugeordnet sind. Dazu gehören Bewertungssterne, Box- und Button-Schatten, der Backdrop (Text auf Bild) sowie die “Aktiv”-Anzeige.

Allgemeine Information: Alle Farben können über den HEX-Code, RGBa-Werte, HSL-Werte oder mit dem "Farbpinsel” ausgewählt werden.