Basis-Styling
Im Design-Editor kannst du das Erscheinungsbild deines Shops anpassen. Hier stehen dir verschiedene Styling-Optionen zur Verfügung, mit denen du sowohl einzelne Elemente als auch globale Designs gestalten kannst.
Basis-Einstellungen
Grundlegende Einstellungen sind über große, orange Buttons in der Übersicht erreichbar. Sie ermöglichen dir, das grundlegende Design deines Shops festzulegen, etwa Farbschema, Schriftarten oder das Definieren von einheitlichen Abständen.
Erweitert
Erweiterte Einstellungen sind komplexere Style-Einstellungen für Elemente und Teilbereiche deines Shops. Hier kannst du eigene Elemente anlegen und spezifische Bereiche anpassen und gestalten. Im Inhalts-Editor kannst du dann auf deine definierten Stile zugreifen.
Globale Einstellungen
Globale Einstellungen betreffen den gesamten Shop und umfassen wichtige Designelemente, etwa Hintergrundfarbe, Standardschrift oder allgemeine Überschriften-Stylings. Du findest diese in der Styling-Übersicht des Design-Editors ganz unten.
Styling der Elemente: Basis-Stile & Stilüberschreibungen
Ein Klick auf ein Element in der Vorschau öffnet ein Popup zur inhaltlichen Bearbeitung des Elements. Der Button "Styling" führt direkt zu den erweiterten Styling-Einstellungen dieses Elements.
Du kannst wählen, ob du das Styling des einzelnen Elements oder den vererbten Basis-Stil berarbeiten möchtest. Hier erfährst du mehr über die Bearbeitung der Basis-Stile.
Beim Styling eines Elements kannst du auf einzelne Teilbereiche zugreifen. Sobald du einen Teilbereich ausgewählt hast, gelangst du zu detaillierten Styling-Einstellungen (zB. Block, Überschrift, Text uä.), um das Design anzupassen.
Teilbereiche - auch Style-Container genannt - vererben untereinander. Übergeordnete Container vererben ihre Stylings an untergeordnete Container. Das vererbte Design kann in den untergeordneten Containern überschrieben werden. Falls dein Styling nicht wie erwartet angewendet wird, überprüfe die Überschreibungen – möglicherweise wird es von einer anderen Einstellung überschrieben!
Live-Vorschau
Die Live-Vorschau ermöglicht dir, Stylings in Echtzeit anzupassen. Layout-Einstellungen und andere Konfigurationen sind hier jedoch nicht verfügbar.
Bei Links und Buttons kannst du wählen, ob du das Styling bearbeiten oder die verlinkte Ansicht öffnen möchtest, um dich innerhalb der Seite zu bewegen. Handelt es sich um ein Inhaltseditor-Element, kannst du entscheiden, ob du das allgemeine Basis-Styling oder eine individuelle Anpassung vornehmen möchtest.
Um die Vorschau auf eine andere Bildschirmgröße umzustellen, nutze die Leiste oberhalb der Vorschau. Klicke einfach auf das Icon des gewünschten Geräts, um dessen Ansicht zu simulieren.
