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.

Diese Einstellung macht bei der Grundlayout Einstellung: Boxed den meisten Sinn. Bei allen anderen Layouttypen müsste ein Globaler Abstand definiert werden, um den Effekt sichtbar zu machen.

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.

Die Einstellung macht bei der Grundlayout Einstellung: Boxed den meisten Sinn. Bei allen anderen Layouttypen müsste ein Globaler Abstand definiert werden, um den Effekt sichtbar zu machen.

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.

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.

Farben

In den Freistellungen für die Offcanvas Elemente können Sie die Schriftfarbe und die Hintergrundfarbe ändern.

Die Farbeinstellung der Offcanvas Elemente werden auch beim Cookie Consent Manager und bei dem Menü in der mobilen Version genutzt

Last updated 6 months ago