Responsive Layout
Wenn du eine Seite aufbaust, beginnst du mit einem „Container“. Ein Container bestimmt die Breite des Inhalts. Auf großen Bildschirmen gibt es links und rechts Leerraum, um zu verhindern, dass Textzeilen zu lang werden; auf kleinen (mobilen) Bildschirmen ist der Container so breit wie der Bildschirm.
In einem Container befindet sich eine Zeile („Row“), die eine bis maximal 12 Spalten („Cols“) enthalten kann. Du kannst Spalten zusammenfügen, um verschiedene Layouts zu erstellen. Dies kannst du für Smartphone, Tablet und Desktop separat einstellen.
Im folgenden Beispiel sind für Desktop die Spalten 1–4, 5–8 und 9–12 zusammengefügt und für Mobilgeräte alle 12 Spalten. Auf diese Weise kannst du das Layout pro Gerät anpassen, während du dieselben Elemente verwendest.
Die Spalten-Komponente im PageBuilder enthält einen Container, eine Row (Columns) und Cols.
Spalten-Komponente
Wenn du die Spalten-Komponente hinzufügst, kannst du in den Einstellungen der Spalten-Komponente wählen, wie viele Spalten du möchtest und wie diese verteilt sind. Standardmäßig haben Spalten ein Padding, was dafür sorgt, dass visuell Platz zwischen den Spalten entsteht. Die Größe dieses Zwischenraums kannst du anpassen. Im folgenden Beispiel siehst du 3 Spalten mit einer Box-Komponente darin und darin wiederum eine Text-Komponente. Die Spalten haben einen orangen Hintergrund und die Box-Komponenten einen grünen Hintergrund, um den Unterschied des Zwischenraums zu verdeutlichen.
Container-Komponente
Wenn du in der Spalten-Komponente auf die Pfeil-nach-oben-Schaltfläche klickst, wird die Container-Komponente ausgewählt.
Mit der Option Bildschirmbreite stellst du ein, wie viel Platz der Container im Browser einnimmt. Bei voller Breite …
Behebe dies!
Element-in-Element
Wie dir in den HTML & CSS Basics vielleicht schon aufgefallen ist, kannst du manche HTML-Elemente in ein anderes HTML-Element platzieren.
Im PageBuilder funktioniert das genauso. Du kannst aus dem linken Menü Elemente auf die Seite ziehen und anschließend in dieses Element ein anderes Element ziehen oder über einen der Links im linken Menü hinzufügen.
Eine Box-Komponente (div) ist eine Komponente, in der andere Komponenten platziert werden können. Auf diese Weise werden Komponenten gruppiert.
