Layout

Im Layout-Reiter kannst du die Darstellung und Ausrichtung von Elementen in Layout-Elementen (also Sektion, Grid und Bereich) bestimmen.

Elemente untereinander anzeigen

Standardmäßig werden alle Elemente in Layout-Elementen untereinander dargestellt:

Elemente horizontal ausrichten

Wenn du ein Element links, mittig oder rechts ausrichten möchtest, musst du nicht das Element wählen, sondern das Layout-Element, in dem es sich befindet (z.B. Container):

Außerdem hast du noch folgende Optionen, die die Abstände automatisch berechnen:

• Horizontaler Abstand dazwischen - Hier werden die Elemente links und rechts an den Rand positioniert und es wird ein gleicher Abstand zwischen den Elementen erstellt.

• Horizontaler Abstand drumherum - Hier wird ein gleicher Abstand zwischen allen Elementen erstellt. Der Abstand links und rechts zum Rand beträgt aber nur genau die Hälfte

• Horizontaler Abstand gleichmäßig - Hier wird ein gleicher Abstand zwischen allen Elementen erstellt. Der Abstand links und rechts zum Rand ist ebenfalls gleich.

Elemente vertikal ausrichten

Wenn du ein Element oben, mittig oder unten ausrichten möchtest, musst du nicht das Element wählen, sondern das Layout-Element, in dem es sich befindet (z.B. Spalte):

Außerdem hast du noch folgende Optionen, die die Abstände automatisch berechnen:

• Vertikaler Abstand dazwischen - Hier werden die Elemente oben und unten an den Rand positioniert und es wird ein gleicher Abstand zwischen den Elementen erstellt.

• Vertikaler Abstand drumherum - Hier wird ein gleicher Abstand zwischen allen Elementen erstellt. Der Abstand oben und unten zum Rand beträgt aber nur genau die Hälfte.

• Vertikaler Abstand gleichmäßig - Hier wird ein gleicher Abstand zwischen allen Elementen erstellt. Der Abstand oben und unten zum Rand ist ebenfalls gleich.

Elemente nebeneinander anzeigen

Benutze bei größeren Layout-Geschichten dafür einfach die Spalten-Optionen der Sektion:

Wenn du aber kleinere Elemente (wie z.B. zwei Buttons) nebeneinander darstellen möchtest, ziehe zuerst einen Bereich drum herum und ändere die Darstellung auf nebeneinander:

Elemente strecken

Du kannst die Layout-Elemente (Sektion, Grid, Bereich) strecken. Das brauchst du, wenn du z.B. möchtest, dass ein Layout-Element den kompletten ihm zur Verfügung stehenden Platz einnimmt.

Im folgenden Beispiel möchtest du die Überschrift oben, den Button aber immer unten platzieren. Dafür ziehst du einfach einen Bereich rein, packst den Button da rein und streckst den Bereich:

Außerdem brauchst du diese Option, wenn du möchtest, dass der Footer immer unten bleibt. Hier mehr dazu.