Layout
Sie definieren hier z.B. das Layout, Abstände, Rahmen und Farbverläufe. Ebenfalls sind hier eine Vielzahl von Einstellungen für Formulare und Tabellen untergebracht.
Globale Layouteinstellungen
Das Layout ist eine der wichtigsten Einstellungen im gesamten Theme. Es beeinflusst das gesamte Erscheinungsbild des Shops und bildet die Grundlage für weiteren Einstellungen.
Layout
Grundlayout
Hier bestimmen Sie die allgemeine Breite das Layouts. Sie können es auf eine bestimmte Pixel Breite einschränken oder sie lassen es über den gesamten Bildschirm ausbreiten. Hierfür stehen Ihnen vier Möglichkeiten zur Verfügung:
Full Width: Alle Bereiche des Shops (Inhalt und Hintergründe) vom Header, Footer und Content gehen über die komplette Breite des Browsers.
Full Width Boxed: Die Hintergründe vom Header, Footer und Content gehen über die komplette Breite des Browsers. Die Inhalte von Header, Footer und Content nehmen die begrenzte Breite der Layout Breite ein.
Full Width Header Boxed: Die Inhalte von Header und Footer sowie alle Hintergründe gehen über die komplette Breite des Browsers. Der Inhalt vom Content hat die begrenzte Breite der Layout Breite.
Boxed: Alle Bereiche des Shops (Inhalt und Hintergründe) vom Header, Footer und Content haben die begrenzte Breite der Layout Breite.
Layout Breite
Mit der Layout Breite geben Sie die maximale Breite des Inhaltsbereiches an. Diese Einstellung greift bei den Grundlayout Einstellungen:
Full Width Boxed
Full Width Header Boxed
Boxed
Rahmen
Sollten Sie diese Einstellung aktivieren, wird ein 1 Pixel breiter Rahmen um den gesamten Bereich des Shops gelegt. Die Rahmenfarbe können Sie ebenfalls bestimmen.
Sie können die Einstellung mit der Einstellung: Schatten kombinieren.
Schatten
Diese Einstellung führt dazu, dass um den gesamten Bereich des Shops ein Schatten gelegt wird.
Sie können die Einstellung mit der Einstellung: Rahmen kombinieren.
Globale Abstände
Mit den globalen Abständen definieren Sie den Abstand des Shops und des Browserfensters. Jede Richtung können Sie individuell festlegen.
Container Abstände
Mit den Container Abständen definieren Sie den inneren Abstand vom Content Bereich und den darin enthaltenen Elementen. Jede Richtung können Sie individuell festlegen.
Globale Einstellungen
Farbverlauf
Schalten Sie diese Einstellung aktive, wird ein Farbverlauf über primären Buttons und Tabs gelegt. Hierbei wird die angegeben Hintergrundfarbe als dunkelster Wert genutzt und automatisch ein hellerer Wert ermittelt. Aus diesen beiden Werten ergibt sich der Farbverlauf.
Rahmen + Rahmenradius
Diese Einstellung versieht alle Elemente im Content Bereich mit einem Rahmen. Die Rahmenfarbe definieren Sie unter: Typografie & Farben > Theme-Farben > Rahmenfarbe. Zusätzlich haben Sie die Möglichkeit eine Abrundung der Ecken zu definieren. Nutzen Sie hierfür die Einstellung bei Rahmenradius. Die Angabe erfolgt in Pixel.
Icon Set
Vier teils unterschiedliche Darstellungsmöglichkeiten der Icons sind möglich: Shopware Standard, Feather, Fontawesome und Fontawesome solid
Formular
Einstellungen
Bestimmen Sie, wie die Eingabefelder dargestellt werden sollen. Hierzu haben Sie zwei Möglichkeiten.
Rahmen: Bei dieser Darstellung wird das gesamte Eingabefeld mit einem Rahmen eingefasst. Die Darstellung wird auch als Standard Darstellung von Shopware genutzt.
Unterstrich: Bei diesem Layout wird das Eingabefeld nur mit einer Unterlinie dargestellt.
Eingabefelder
Hier können Sie Rahmen, Hintergrund und Schriftfarben definieren.
1) Rahmenfarbe: Dieser Rahmen wird um bzw. unter ein (nicht angeklicktes) Eingabefeld angezeigt. Hier definieren Sie die Farbe.
2) Rahmenfarbe (Focus): Dieser Rahmen wird um bzw. unter ein (angeklicktes) Eingabefeld angezeigt. Hier definieren Sie die Farbe.
3) Hintergrundfarbe: Definieren Sie den Hintergrund eines (nicht angeklicktes) Eingabefeld.
4) Hintergrundfarbe (Focus): Definieren Sie den Hintergrund eines (angeklicktes) Eingabefeld.
5) Schriftfarbe: Wählen Sie eine Schriftfarbe für die Anzeige der Eingabe eines (nicht angeklicktes) Eingabefeld.
5) Schriftfarbe (Focus): Wählen Sie eine Schriftfarbe für die Anzeige der Eingabe eines (angeklicktes) Eingabefeld.
Labels und Buttons
Tabellen
Nehmen Sie hier Darstellungs- und Farbanpassungen rein für die Tabellendarstellung in Ihrem Shop vor. Definieren Sie z. B. ob ein Rahmen angezeigt werden soll sowie die Rahmenfarbe. Zusätzlich können Sie Hintergrundfarben und eine Schriftfarbe festlegen.
Dropdown Menu
Ein Dropdown Menu können Sie ebenfalls anpassen. Sie finden es Beispielsweise im Header mit Klick auf den Account Button oder in der Service Navigation.
1) Rahmen anzeigen & Rahmenfarbe: Dieser Rahmen wird um das Dropdown Menu angezeigt. Er hat eine vordefinierte Breite von 1px. Der Rahmen muss aktiv geschalte werden. Danach können Sie eine Farbe wählen.
2) Schatten anzeigen: Der Schatten wird um das Dropdown Menu angezeigt. Er muss aktiviert sein, um im Frontend angezeigt zu werden.
3) Hintergrundfarbe: Die Hintergrundfarbe erstreckt sich über den gesamten Bereich des Dropdown Menu.
4) Schriftfarbe: Hier definieren Sie die Schriftfarbe der Navigationspunkte im Dropdown Menu.
Offcanvas Elemente
Im Shop werden einige Elemente von der Seite ins Bild geschoben. Diese Elemente nennt man Offcanvas Elemente. Hierzu zählen z. B. der Offcanvas Warenkorb oder die Offcanvas Filter (mobile Version). Für diese Elemente können Sie eine Hintergrundfarbe und Schriftfarbe festlegen.
Einstellungen
Unter Einstellungen können Sie die Offcanvas Elemente einen Abstand zwischen dem Element und dem Bildschirmrand geben und /oder ein Breite definieren.
1) Außenabstand: Hiermit definieren Sie den oberen, unteren, linken und rechten Außenabstand zum Bildschirmrand.
2) Breite: Definieren Sie, wie viel Platz das Element einnehmen kann.
Last updated