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.

Formular

Layout

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

Unter diesen Unterteilungen befinden sich Farbanpassungen für Eingabefelder, Labels und Buttons. Sie definieren unter anderem Rahmen-, Hintergrund- und Schriftfarben.

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.

Last updated