📗
Coolbax - Docs
  • Einführung
  • Handbücher
    • Administration
      • ADCELL Affiliate Tracking + Retargeting
      • Google Shopping + Instagram (+ mehr) Professionell
        • Einbindung des Feed
      • Google Taxonomie / Shopping
      • Produktübersicht + Filtereditor Professionell
      • Statistik Professionell
    • Marktplätze
      • Bestellverwaltung + GPRS
        • Produktsicherheitsrichtlinien
      • Amazon Bestellimport
        • Zugangsdaten Amazon
      • Amazon Lagerabgleich
      • Amazon Prime
      • eBay Bestellimport
        • Zugangsdaten eBay
      • eBay Produktexport
        • eBay Account einrichten
      • Etsy Bestellimport
        • Zugangsdaten Etsy
      • Galaxus Bestellimport
      • Galaxus Produktexport
      • Hood Bestellimport
      • Kaufland Bestellimport
      • OTTO Bestellimport
        • Zugangsdaten OTTO
    • Storefront
      • Amazon Dropdown Menü
      • Bildvorschau per Mousehover
      • Breadcrumb Erweiterung
      • Cross Selling / Zubehör
      • Hersteller Professionell
      • Lexikon / Glossar
      • Produktbilder in den Kategorien als Slider
      • SEO Banner Professionell
      • Sticky Menü Professionell
  • Theme
    • Die ersten Schritte
    • Theme Einstellungen
      • Allgemeine
      • Typografie & Farben
      • Logos
      • Layout
      • Hintergrund Bilder
      • Header
      • Footer
      • Produkt Kategorie
      • Produkt Detail
      • Checkout
      • Erweiterungen
      • Weiteres
    • Kategorie Einstellungen
    • Produkt Einstellungen
    • Erlebniswelten
    • System Einstellungen
Powered by GitBook
On this page
  • Globale Layouteinstellungen
  • Layout
  • Globale Abstände
  • Container Abstände
  • Globale Einstellungen
  • Formular
  • Layout
  • Eingabefelder
  • Tabellen
  • Offcanvas Elemente
  1. Theme
  2. Theme Einstellungen

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.

Last updated 8 months ago

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 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.




Layout Breite

  • 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.

Schatten

Diese Einstellung führt dazu, dass um den gesamten Bereich des Shops ein Schatten gelegt wird.

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

Icon Set

Vier teils unterschiedliche Darstellungsmöglichkeiten der Icons sind möglich: Shopware Standard, Feather, Fontawesome und Fontawesome solid

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.

Offcanvas Elemente

Im Shop werden einige Elemente von der Seite ins Bild geschoben. Diese Elemente nennt man Offcanvas Elemente. Hierzu zählen z. B. einige Navigationselemente im Header. Für diese Elemente können Sie eine Hintergrundfarbe und Schriftfarbe festlegen.

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 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 .

Boxed: Alle Bereiche des Shops (Inhalt und Hintergründe) vom Header, Footer und Content haben die begrenzte Breite der .

Mit der Layout Breite geben Sie die maximale Breite des Inhaltsbereiches an. Diese Einstellung greift bei den Einstellungen:

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

Sie können die Einstellung mit der Einstellung: kombinieren.

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

Sie können die Einstellung mit der Einstellung: kombinieren.

Diese Einstellung versieht alle Elemente im Content Bereich mit einem Rahmen. Die Rahmenfarbe definieren Sie unter: . 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.

Layout Breite
Layout Breite
Layout Breite
Grundlayout
Grundlayout
Globaler Abstand
Schatten
Grundlayout
Globaler Abstand
Rahmen
bestimmte Pixel Breite einschränken
Typografie & Farben > Theme-Farben > Rahmenfarbe
Ein Beispiel der Einstellung: Full Width
Ein Beispiel der Einstellung: Full Width Boxed
Ein Beispiel der Einstellung: Full Width Header Boxed
Ein Beispiel der Einstellung: Boxed
Beispiel: Shopware Standard
Beispiel: Feather
Beispiel: Fontawesome
Beispiel: Fontawesome solid
Beispiel für Layout mit Rahmen
Beispiel für Layout mit Linie
Beispiel für Offcanvas Navigation
Beispiel für Offcanvas Warenkorb
Beispiel für Offcanvas Filter (Anzeige für mobile Version)