Seiten-Layouts
Das Layout jeder Seite in Ihrem Store besteht aus verschiedenen Abschnitten oder Containern, die die Kopfzeilen-, Fußzeilen- und Inhaltsbereiche der Seite definieren. Je nach Layout kann jede Seite eine, zwei, drei Spalten oder mehr haben. Sie können sich das Layout als "" Seite vorstellen und ein spezifisches Layout zuweisen, das als Standard für CMS-, Produkt- und Kategorieseiten verwendet wird.
Auf der Seite werden Inhaltsblöcke je nach Abschnitt des Seitenlayouts, in dem sie angezeigt werden sollen, so verschoben dass sieverfügbaren Platz ausfüllen. Beachten Sie, dass beim Ändern des Layouts von einem dreispaltigen zu einem zweispaltigen Layout der Inhalt des Hauptbereichs erweitert wird, um den verfügbaren Platz zu füllen. Beachten Sie außerdem, dass alle Blöcke, die mit der nicht verwendeten Seitenleiste verknüpft sind, zu verschwinden scheinen. Wenn Sie jedoch das dreispaltige Layout wiederherstellen, werden die Blöcke erneut angezeigt. Dieser fließende Ansatz oder Liquid Layout ermöglicht es, das Seiten-Layout zu ändern, ohne den Inhalt überarbeiten zu müssen. Wenn Sie es gewohnt sind, mit einzelnen HTML-Seiten zu arbeiten, erfordert dieser modulare Baustein-Ansatz eine andere Denkweise.
Standard-Layouts konfigurieren
-
Navigieren Sie in Admin-Seitenleiste zu Stores > Settings>Configuration.
-
Wählen Sie im linken Bedienfeld unter General die Option Web aus.
-
Erweitern Sie
-
Wählen Sie die Default Product Layout aus, die Sie für Produktseiten verwenden möchten.
Diese Einstellung bestimmt das Layout, das standardmäßig für Produktseiten verwendet wird.
No layout updates- Layout-Aktualisierungen sind für Produktseiten nicht verfügbar.Empty- Verwendet ein leeres Layout für Produktseiten.1 column- Verwendet ein einspaltiges Layout für Produktseiten.2 columns with left bar- Verwendet ein zweispaltiges Layout mit der Seitenleiste links für Produktseiten.2 columns with right bar- Verwendet ein zweispaltiges Layout mit der Seitenleiste auf der rechten Seite für Produktseiten.3 columns- Verwendet ein dreispaltiges Layout mit Seitenleisten links und rechts für Produktseiten.
Wenn Page Builder aktiviert ist, stehen zusätzliche Optionen für die volle Breite zur Verfügung. Anschließend können Sie die Inhaltstools von Page Builder verwenden, um das Layout für Ihre Produktseiten zu entwerfen.
Page -- Full Width- Verwendet das Layout Seite - Breite) für Produktseiten.Category -- Full Width- Verwendet das Layout Kategorie - Breite) für Produktseiten.Product -- Full Width- (Empfohlen) Verwendet das Layout Produkt - Breite“ für Produktseiten.
-
Wählen Sie die Default Category Layout aus, die Sie für Kategorieseiten verwenden möchten.
Diese Einstellung bestimmt das Layout, das standardmäßig für Kategorieseiten verwendet wird.
No layout updates- Layout-Aktualisierungen sind für Kategorieseiten nicht verfügbar.Empty- Verwendet ein leeres Layout für Kategorieseiten.1 column- Verwendet ein einspaltiges Layout für Kategorieseiten.2 columns with left bar- Verwendet ein zweispaltiges Layout mit der Seitenleiste auf der linken Seite für Kategorieseiten.2 columns with right bar- Verwendet ein zweispaltiges Layout mit der Seitenleiste auf der rechten Seite für Kategorieseiten.3 columns- Verwendet ein dreispaltiges Layout mit Seitenleisten links und rechts für Kategorieseiten.
Wenn Page Builder aktiviert ist, stehen zusätzliche Optionen für die volle Breite zur Verfügung. Anschließend können Sie die Inhaltstools von Page Builder verwenden, um das Layout für Ihre Kategorieseiten zu entwerfen.
Page -- Full Width- Verwendet das Layout Seite - Volle Breite für Kategorieseiten.Category -- Full Width- (Empfohlen) Verwendet das Layout Kategorie - Vollständige Breite für Kategorieseiten.Product -- Full Width- Verwendet das Layout Produkt - Breite) für Kategorieseiten.
-
Wählen Sie die Default Page Layout aus, die Sie für CMS-Seiten verwenden möchten.
Diese Einstellung legt das Layout fest, das standardmäßig für CMS-Seiten verwendet wird.
No layout updates- Für CMS-Seiten sind keine Layout-Aktualisierungen verfügbar.Empty- Verwendet ein leeres Layout für CMS-Seiten.1 column- Verwendet ein einspaltiges Layout für CMS-Seiten.2 columns with left bar- Verwendet ein zweispaltiges Layout mit der Seitenleiste auf der linken Seite für CMS-Seiten.2 columns with right bar- Verwendet ein zweispaltiges Layout mit der Seitenleiste auf der rechten Seite für CMS-Seiten.3 columns- Verwendet ein dreispaltiges Layout mit Seitenleisten links und rechts für CMS-Seiten.
Wenn Page Builder aktiviert ist, stehen zusätzliche Optionen für die volle Breite zur Verfügung. Anschließend können Sie die Inhaltstools von Page Builder verwenden, um das Layout für Ihre CMS-Seiten zu entwerfen.
Page -- Full Width- (Empfohlen) Verwendet das Layout Seite - Volle Breite für CMS-Seiten.Category - Full Width- Verwendet das Layout Kategorie - Volle Breite für CMS-Seiten.Product - Full Width- Verwendet das Layout Produkt - Breite) für CMS-Seiten.
-
Klicken Sie abschließend auf Save Config.
Standard-Seitenlayouts
Eine Spalte
Das 1 Column-Layout kann verwendet werden, um eine dramatische Startseite mit einem großen Bild oder Fokus zu erstellen. Es ist auch eine gute Wahl für eine Landingpage oder eine andere Seite, die eine Kombination aus Text, Bildern und Video aufweist.
Zwei Spalten mit linker Leiste
Das 2 Columns with Left Bar-Layout wird häufig für Seiten mit Navigation auf der linken Seite verwendet, z. B. einen Katalog oder Suchergebnisseiten mit mehrschichtiger Navigation. Es ist auch eine hervorragende Wahl für Startseiten, die zusätzliche Navigation oder Blöcke unterstützender Inhalte auf der linken Seite benötigen.
Zwei Spalten mit rechter Leiste
Mit einem 2 Columns with Right Bar Layout ist der Hauptinhaltsbereich groß genug für ein ansprechendes Bild oder Banner. Dieses Layout wird auch häufig für Produktseiten mit Blöcken unterstützender Inhalte auf der rechten Seite verwendet.
Drei Spalten
Das 3 Column Layout verfügt über eine mittlere Spalte, die breit genug für den Haupttext der Seite ist, mit Platz auf jeder Seite für zusätzliche Navigation und Blöcke mit unterstützenden Inhalten.
leer
Mit dem Empty-Layout können Sie benutzerdefinierte Seiten-Layouts definieren.
