Unter Design → Layouts kannst du individuelle Layouts für deinen Content erstellen und verwalten. Layouts werden jeweils einer Layout-Kategorie zugeordnet, damit du sie schneller wiederfindest. Auf der linken Seite kannst du filtern, welche Layouts in der Übersicht angezeigt werden sollen. Folgende Kategorien stehen dir zur Verfügung:
- Shopseite – Hierunter fallen beispielsweise das Impressum, die AGB, Informationen zum Datenschutz oder Kontaktformulare für deine Kunden. Mehr Informationen zum Hinterlegen von Rechtstexten in deinem Shop findest du hier.
- Landingpage – Diese Kategorie eignet sich beispielsweise für Themenseiten.
- Kategorieseite – Auf einer solchen Seite sind automatisch Produktlistings erhalten. Zudem kannst du Texte aus Kategorien anzeigen lassen.
- Produktseite – Diese Kategorie ist für einzelne Produkte vorgesehen.
Layout erstellen
Neue Layouts können über einen Klick auf Neues Layout anlegen angelegt werden:
- Wähle zunächst eine der Kategorien aus.
- Lege nun fest, mit welcher Sektion du starten möchtest.
- Vergib einen Namen für dein Layout.
Anschließend öffnet sich der Layout-Editor, in welchem du neue Abschnitte und Elemente nach Belieben hinzufügen kannst. Bei Bedarf kannst du Layout-Name und Typ nachträglich über das Einstellungssymbol auf der rechten Seite anpassen.
Layout bearbeiten
Klicke Rechts in der Leiste auf das +, um einen neuen Block zum Hinzufügen auszuwählen. Im Dropdown Menü kannst du zunächst die Art des Blocks auswählen und siehst darunter dann die verschiedenen vorhanden Optionen als Vorschau. Per Drag & Drop kannst du den Block an die gewünschte Stelle ziehen.
Wähle den eben erstellten Block aus und klicke auf das Symbol mit Papier und Stift, um verschiedene allgemeine Einstellungen für diesen Block vorzunehmen. Im Bereich Layout kannst du außerdem eine oder mehrere CSS-Klassen hinzufügen und den Abstand zu den Seitenrändern anpassen.
Wenn du in den Block selbst klickst, erscheinen in der oberen rechten Ecke zwei weitere Buttons.
Über das Pfeilsymbol kannst du das Element gegen ein anderes austauschen. Mit einem Klick auf das Einstellungssymbol öffnen sich die elementspezifischen Einstellungsmöglichkeiten. Bei einem Textblock öffnet sich beispielsweise der Texteditor, in dem du mithilfe der gängigen Formatierungswerkzeuge deinen Text gestalten kannst. Klicke ganz rechts auf </>, um den Bearbeitungsmodus zu wechseln und somit beispielsweise die vorher definierten CSS-Klassen zu verwenden.
Klicke auf das Stapel-Symbol, um den Navigator zu öffnen. Dort siehst du alle Elemente deines Layouts gruppiert nach Sektion und sofern du die Layout-Sektion Sidebar gewählt hast, gruppiert nach Spalte. Mittels Drag & Drop kannst die Elemente innerhalb einer Sektion oder sektionsübergreifend an eine andere Stelle verschieben. Über die jeweiligen Buttons kannst du einzelne Elemente schnell duplizieren oder löschen.
Ganz oben kannst du prüfen, wie dein Layout auf bestimmten Bildschirmgrößen (Smartphone, Tablet, Monitor) aussieht. Standardmäßig ist die Monitor-Ansicht ausgewählt. Klicke rechts auf das Symbol, um die Einstellungen für alle verwendeten Elemente zu sehen und parallel bearbeiten zu können.
Um festzulegen, an welchen Stellen das Layout verwendet werden soll, öffne die Layout-Zuweisung und klicke auf Layout zuweisen.
Wenn du mit deinem Layout zufrieden ist, solltest du es über den Button oben rechts speichern.
