Layouts
Mit Layouts kannst du Designs und Funktionalität zusammenfassen, die auf mehreren Seiten verwendet werden sollen. Dadurch musst du diese Elemente nur einmal definieren anstatt sie auf jeder Seite einzufügen.
Erstellen eines Layouts
Du kannst Layouts erstellen, indem du auf Layouts in der Sidebar auf der linken Seite klickst.
Hier kannst du neue Layouts durch einen Klick auf den + Neu Button erstellen,
oder ein vordefiniertes Layout-Preset verwenden, welches sofort verwendbar ist,
indem du auf + Neu aus Template klickst. Dadurch wirst du zum Page-Builder
weitergeleitet:
Optionen
Hier sind die verschiedenen Optionen, die du auf deinem Layout einstellen kannst:
Name
Der Name dieses Layouts hilft dir es wiederzuerkennen und von anderen Layouts zu unterscheiden.
Icon
Ein Icon das in der Übersicht über alle Layouts angezeigt wird. Aktuell kannst du nur die vorhandenen Icons verwenden.
Template
Hier kannst du HTML code einfügen, aber den Block
{{ render_elements(page.layout.elements) }} solltest du nicht verändern (außer du weißt was du tust).
Dieser Block gibt an wo die Elemente dieses Layouts gerendert werden sollen.
Script
Dieser Javascript code wird auf dem Client für jede Seite mit diesem Layout ausgeführt.
Style
Es gibt mehrere Möglichkeiten, deine Layouts zu stylen. Du kannst normales CSS im Style-feld definieren, oder du kannst TailwindCSS direkt im Template verwenden. Layouts, die TailwindCSS verwenden, werden nur auf Seiten, wo tailwindcss aktiviert ist, korrekt gerendert.
body {
background-color: black;
}
Elemente
Hier kannst du Elemente in dein Layout einfügen. Diese Elemente werden auf
jeder Seite mit diesem Layout gerendert. Das spezielle Element PageContent
kann nicht gelöscht werden, weil es später durch die gerenderte Seite ersetzt
wird wenn dieses Layout verwendet wird.
In dieser Abbildung haben wir einige Komponenten
erstellt, die Menu, Menu Item und Footer heißen und damit einige Elemente
erstellt.
Layouts in Seiten einbinden
Nachdem du dein Layout fertiggestellt hast, kannst du es speichern um die Änderungen beizubehalten. Du kannst hier sehen, wie du dein Layout in eine Seite integrierst.