Überblick
Drei wiederverwendbare Layout-Komponenten findest du in fast jedem Bereich des Builders: Gruppe, Text und Trenner. Mit ihnen kannst du jedes Layout bauen, ohne CSS zu schreiben. Wähle einen Block aus, um seine Einstellungen zu öffnen.
Gruppe
Eine Gruppe ist ein flexibler Layout-Container. Füge darin untergeordnete Blöcke hinzu (Text, Buttons, Bilder, Newsletter-Felder oder sogar verschachtelte Gruppen) und steuere, wie sie angeordnet werden.
Richtung
- Vertikal: Die Kinder werden von oben nach unten gestapelt.
- Horizontal: Die Kinder stehen nebeneinander in einer Reihe.
Der Schalter Vertikal stapeln auf Mobilgeräten erscheint nur, wenn die Richtung auf Horizontal steht. Aktiviere ihn, damit eine horizontale Reihe auf kleinen Bildschirmen zu einem vertikalen Stapel wird.
Position und Ausrichtung
Diese verteilen die Kinder entlang der Haupt- und Querachse. Ihre Bedeutung wechselt je nach Richtung, und die Option Zwischen (gleicher Abstand zwischen den Kindern) gibt es nur auf der Hauptachse:
- Vertikale Richtung: Position ist die Hauptachse (vertikal): oben, zentriert, unten oder zwischen. Ausrichtung ist die Querachse (horizontal): links, zentriert oder rechts.
- Horizontale Richtung: Ausrichtung ist die Hauptachse (horizontal): links, zentriert, rechts oder zwischen. Position ist die Querachse (vertikal): oben, zentriert oder unten.
Breite
- Füllen: Nimmt den gesamten verfügbaren Platz im übergeordneten Element ein. Nutze dies für Gruppen, die sich in einem horizontalen Elternteil den Platz gleichmäßig teilen sollen.
- Anpassen: Schrumpft auf die natürliche Größe des Inhalts.
- Benutzerdefiniert: Zeigt einen Benutzerdefinierte Breite-Schieberegler (0 bis 100%). Die Gruppe behält diese Größe bei, ohne zu wachsen oder zu schrumpfen.
Abstand
Der Abstand in Pixeln zwischen den untergeordneten Elementen (0 bis 100 px, Standard 20 px).
Farbschema
Eltern-Farbschema verwenden ist standardmäßig aktiviert, sodass die Gruppe das Farbschema des Elternteils übernimmt. Deaktiviere es, um den Farbschema-Picker zu sehen und eines deiner globalen Farbschemata auszuwählen. So kannst du unterschiedliche Farbbereiche innerhalb eines Abschnitts gestalten.
Rahmen
Rahmen ist Keiner oder Voll. Bei "Voll" erscheinen zwei Schieberegler: Rahmenstärke (1 bis 20 px, Standard 1) und Rahmendeckkraft (0 bis 100%, Standard 100). Die Farbe kommt aus der Rahmenfarbe des aktiven Farbschemas.
Eckenradius
Eckenabrundung in Pixeln (0 bis 100), unabhängig vom Rahmen. Nutze dies für kartenähnliche Container.
Hintergrund-Overlay
Der Schalter Hintergrund-Overlay fügt eine farbige Ebene über dem Hintergrund der Gruppe hinzu. Wenn aktiviert, kannst du die Overlay-Farbe (inklusive Transparenz über den Deckkraftregler), den Overlay-Stil (Voll als flächige Füllung oder Verlauf mit Übergang zu transparent) und beim Verlauf die Verlaufsrichtung (nach oben oder unten) einstellen. Wird oft genutzt, um einen Medienhintergrund einzufärben.
Innenabstand (Padding)
Innenabstand auf jeder Seite in Pixeln, jeweils 0 bis 100 px. Padding liegt innerhalb des Rahmens, zwischen diesem und den Kindern.
Text
Ein Textblock zeigt Überschriften, Absätze und formatierte Texte an. Der Rich-Text-Editor unterstützt Fett, Kursiv, Unterstrichen, Durchgestrichen und farbigen Text.
Preset
Das Typografie-Preset legt die Schriftfamilie, das Standardgewicht und das semantische HTML-Tag (seine Rolle auf der Seite) fest:
- Standard: übernimmt das Basis-Textstyling des Abschnitts.
- Absatz: Fließtext-Stil.
- Überschrift 1 bis Überschrift 6: Überschriftenstile, mit deinen Überschriften- und Unterüberschriften-Schriften.
Größe
Eine benutzerdefinierte Schriftgröße in Pixeln (10 bis 30 px, Standard 16). Dies ist die tatsächliche Größe, in der der Block angezeigt wird.
Breite und Ausrichtung
- Anpassen: Der Block ist nur so breit wie sein Inhalt.
- Füllen: Der Block dehnt sich auf 100% der Containerbreite aus.
Ausrichtung (Links, Mitte, Rechts) erscheint nur, wenn die Breite auf Füllen steht, da Ausrichtung nur dann Sinn ergibt, wenn der Block den Container ausfüllt.
Zeilenhöhe und Zeichenabstand
Zeilenhöhe steuert den vertikalen Rhythmus: Normal (Standard), Eng oder Weit. Buchstabenabstand steuert den Zeichenabstand mit denselben drei Optionen.
Farbschema
Innerhalb einer Gruppe ist Eltern-Farbschema verwenden standardmäßig aktiviert. Deaktiviere es, um den Farbschema-Picker zu sehen. Überschriften-Presets nutzen die Überschriftenfarbe des Schemas, Absatz und Standard die Fließtextfarbe. Als eigenständiger Abschnitt gibt es nur den Picker ohne Vererbungsschalter.
Innenabstand (Padding)
Innenabstand auf jeder Seite in Pixeln, jeweils 0 bis 100 px.
Trenner
Eine Trennlinie, die sich an das Elternteil anpasst. In einem vertikalen (Spalten-)Layout ist sie eine horizontale Linie, in einer horizontalen Gruppe wird sie zu einer vertikalen Linie.
Breite
- Anpassen: Der Container ist nur so breit wie die Linie.
- Füllen: Der Container dehnt sich aus, um den verfügbaren Platz einzunehmen.
Dicke
Liniendicke in Pixeln (1 bis 10 px, Standard 1). Bei einem horizontalen Trenner ist dies die Höhe, bei einem vertikalen die Breite.
Länge
Die Spannweite der Linie als Prozentsatz des Containers (5 bis 100%, Standard 100). Stelle sie unter 100%, um eine teilweise, eingerückte Linie zu erzeugen.
Ausrichtung
Positioniert die Linie, wenn ihre Länge unter 100% liegt: Start, Mitte (Standard) oder Ende. Diese Steuerung ist ausgeblendet, solange die Länge 100% beträgt.
Eckenradius
- Scharf: Rechteckige Enden.
- Abgerundet: Pillenförmige Enden.
Farbschema
Optional kannst du ein Farbschema auswählen. Der Trenner verwendet die Rahmenfarbe dieses Schemas. Ist keines gesetzt, wird die Farbe vom Eltern-Abschnitt oder der Gruppe übernommen.
Innenabstand (Padding)
Abstand auf jeder Seite in Pixeln. Als Block liegt der Bereich bei 0 bis 100 px. Wird der Trenner als eigenständiger Abschnitt hinzugefügt, geht das Padding bis 200 px (Standard 20) für mehr vertikalen Freiraum.
Häufige Stolperfallen
- Zwei Füll-Gruppen in einem horizontalen Elternteil: Jede nimmt 50% des Platzes ein, was meist gewünscht ist. Soll eine Seite breiter sein, stelle die Breite dieser Gruppe auf Benutzerdefiniert.
- Vertikaler Trenner wird nicht angezeigt: Ein Trenner wird nur dann vertikal, wenn er direktes Kind einer Gruppe mit Horizontaler Richtung ist. Prüfe die Richtung der Elterngruppe.
- Fehlende Zwischen-Option: Zwischen erscheint nur auf der Achse, entlang der die Kinder angeordnet sind, also bei Position für vertikale Gruppen und bei Ausrichtung für horizontale Gruppen.
- Text in falscher Farbe: Wahrscheinlich wird das Farbschema einer Elterngruppe übernommen. Deaktiviere Eltern-Farbschema verwenden im Textblock und wähle das gewünschte Schema explizit aus.
Wo du diese Komponenten platzieren kannst, erfährst du unter Abschnitte und Blöcke.