Überblick
Drei wiederverwendbare Layout-Komponenten erscheinen in fast jedem Abschnitt im Builder: Gruppe, Text und Trennlinie. Wenn Sie diese verstehen, können Sie jedes Layout erstellen, das Sie benötigen, ohne CSS zu schreiben.
Gruppe
Eine Gruppe ist ein flexibler Layout-Container. Fügen Sie untergeordnete Blöcke darin ein (Text, Schaltflächen, Bilder, Newsletter-Eingaben und sogar verschachtelte Gruppen) und steuern Sie genau, wie sie angeordnet sind.
Richtung
- Vertikal: untergeordnete Elemente stapeln sich von oben nach unten (Standard für die meisten Abschnitte).
- Horizontal: untergeordnete Elemente sitzen nebeneinander in einer Zeile.
Aktivieren Sie Auf Mobilgeräten stapeln, um eine horizontale Gruppe auf kleinen Bildschirmen automatisch in einen vertikalen Stapel umzuschalten.
Ausrichtung und Position
Diese zwei Einstellungen steuern, wie untergeordnete Elemente entlang der Haupt- und Querachse verteilt werden. Ihre Bedeutung wechselt je nach Richtung der Gruppe:
- Vertikale Richtung: Position steuert die vertikale Verteilung (oben, Mitte, unten oder zwischen). Ausrichtung steuert die horizontale Platzierung (links, Mitte, rechts oder zwischen).
- Horizontale Richtung: Ausrichtung steuert die horizontale Verteilung (links, Mitte, rechts oder zwischen). Position steuert die vertikale Platzierung (oben, Mitte, unten oder zwischen).
Zwischen verteilt untergeordnete Elemente gleichmäßig mit gleichem Abstand zwischen ihnen, was nützlich ist, um Elemente über eine vollbreite Zeile zu strecken.
Abstand
Der Abstand in Pixeln zwischen untergeordneten Elementen (0-100 px, Standard 20 px).
Breite
- Füllen: erweitert sich, um den gesamten verfügbaren Platz im übergeordneten Element einzunehmen. Verwenden Sie dies für Gruppen, die in einem horizontalen übergeordneten Element gleichmäßig Platz teilen sollen.
- Anpassen: schrumpft auf die natürliche Größe seines Inhalts. Verwenden Sie dies für Gruppen, die nur so breit sein sollen wie ihr Inhalt.
- Benutzerdefiniert: legen Sie einen bestimmten Prozentsatz (0-100%) fest. Die Gruppe hält diese Größe ohne Wachsen oder Schrumpfen.
Farbschema und Vererbung
Standardmäßig erbt eine Gruppe das Farbschema ihres übergeordneten Abschnitts. Deaktivieren Sie Schema erben, um ein explizites Farbschema (1-9) aus Ihren globalen Farbeinstellungen zuzuweisen. Damit können Sie innerhalb eines Abschnitts unterschiedliche Hintergrund- oder Textfarbzonen erstellen, ohne einen neuen Abschnitt hinzuzufügen.
Rahmen
Fügen Sie einen Rahmen um die Gruppe hinzu. Optionen: Keiner oder Einfarbig. Wenn einfarbig ausgewählt ist, legen Sie die Rahmendicke (1-20 px) fest; die Farbe kommt aus der Rahmenfarbe des aktiven Schemas.
Radius
Eckenrundung in Pixeln (0-100). Verwenden Sie dies, um kartenartige Gruppen-Container zu erstellen.
Deckkraft
Gesamtdeckkraft der Gruppe (0-100%, Standard 100%).
Überlagerung
Fügt eine farbige Schicht innerhalb der Gruppe hinzu. Wenn aktiviert, legen Sie die Überlagerungsfarbe (einschließlich Transparenz über den Deckkraft-Schieberegler der Farbauswahl), den Stil (einfarbige flache Füllung oder ein Verlauf, der zu transparent verblasst) und für den Verlauf die Richtung (oben oder unten) fest. Dies wird häufig verwendet, um eine halbtransparente getönte Schicht über einem Medienhintergrund in einem Hero-Abschnitt zu erstellen.
Polsterung
Abstand auf jeder Seite in Pixeln (oben, links, rechts und unten), jeweils von 0-100 px. Die Polsterung wird innerhalb des Gruppenrahmens angewendet und schafft Atemraum zwischen dem Rahmen und den untergeordneten Elementen der Gruppe.
Text
Ein Textblock rendert Rich-Text-Inhalte (Überschriften, Absätze und formatierten Text) innerhalb eines Abschnitts oder einer Gruppe. Der Editor unterstützt Fett, Kursiv, Unterstrichen, Durchgestrichen und farbigen Text.
Voreinstellung
Die Typografie-Voreinstellung steuert die Schriftgröße, das Schriftgewicht und die semantische Rolle des Textes. Verfügbare Voreinstellungen:
- Standard: erbt das Basis-Textstyling des Abschnitts.
- Absatz: Fließtextstil.
- Überschrift 1 bis Überschrift 6: abnehmende Größen von der größten zur kleinsten, unter Verwendung der in Ihren Typografieeinstellungen definierten Überschriftenschriftart.
Größe
Eine benutzerdefinierte Schriftgröße in Pixeln (10-30 px), die die Größe der Voreinstellung überschreibt. Belassen Sie den Standard, damit die Voreinstellung die Größe bestimmt.
Breite
- Anpassen: der Textblock ist nur so breit wie sein Inhalt.
- Füllen: der Textblock erweitert sich auf 100% der verfügbaren Container-Breite.
Ausrichtung
Horizontale Textausrichtung: Links, Mitte oder Rechts.
Zeilenhöhe
Steuert den vertikalen Rhythmus: Eng (kompakte Zeilen), Normal (Standard) oder Locker (großzügige Zeilen).
Buchstabenabstand
Steuert den Zeichenabstand: Eng (Zeichen näher beieinander), Normal (Standard) oder Locker (Zeichen weiter auseinander).
Farbschema und Vererbung
Standardmäßig erbt ein Textblock seine Farbe vom übergeordneten Abschnitt. Deaktivieren Sie Schema erben, um ein bestimmtes Farbschema zu verwenden. Überschriften-Voreinstellungen verwenden die Überschriftfarbe des Schemas; Absatz- und Standard-Voreinstellungen verwenden die Fließtextfarbe des Schemas.
Polsterung
Innerer Abstand auf jeder Seite in Pixeln (oben, links, rechts und unten), jeweils von 0-100 px.
Trennlinie
Eine visuelle Trennlinie. In einem vertikalen Layout erscheint sie als horizontale Linie. Innerhalb einer horizontalen Gruppe erscheint sie als vertikale Linie. Die Trennlinie passt sich automatisch an die Richtung ihres übergeordneten Containers an.
Dicke
Die Liniendicke in Pixeln (1-10 px, Standard 1 px).
Länge
Die Spanne der Linie als Prozentsatz ihres Containers (5-100%, Standard 100%). Setzen Sie dies auf weniger als 100% und kombinieren Sie es mit der Ausrichtung, um eine zentrierte oder eingerückte dekorative Linie zu erstellen.
Endkappenstil
- Scharf: rechteckige Enden.
- Abgerundet: pillenförmige Enden.
Ausrichtung
Wie die Linie positioniert wird, wenn ihre Länge weniger als 100% beträgt: Start, Mitte (Standard) oder Ende.
Breite
- Anpassen: der Trennlinien-Container ist nur so breit wie die Linie selbst.
- Füllen: der Trennlinien-Container erweitert sich, um den verfügbaren Platz in seinem übergeordneten Element zu füllen.
Farbschema
Optional ein Farbschema (1-9) festlegen. Die Trennlinie verwendet die Rahmenfarbe aus dem ausgewählten Schema. Wenn kein Schema festgelegt ist, erbt sie die Farbe vom übergeordneten Abschnitt oder der Gruppe.
Polsterung
Abstand auf jeder Seite in Pixeln. Wenn die Trennlinie als übergeordneter Abschnitt verwendet wird, gehen Polsterungswerte bis zu 200 px für großzügigeren vertikalen Atemraum.
Häufige Fehler
- Zwei Füll-Gruppen in einem horizontalen übergeordneten Element: jede nimmt 50% des verfügbaren Platzes ein, was in der Regel das Gewünschte ist. Wenn Sie eine Seite breiter als die andere benötigen, verwenden Sie Benutzerdefiniert Breite bei einer von ihnen.
- Vertikale Trennlinie erscheint nicht: eine Trennlinie wird nur dann vertikal, wenn sie ein direktes untergeordnetes Element einer Gruppe ist, die auf Horizontal eingestellt ist. Stellen Sie sicher, dass die Richtung der übergeordneten Gruppe auf horizontal eingestellt ist.
- Text zeigt eine unerwartete Farbe: Wenn ein Textblock in der falschen Farbe erscheint, erbt er wahrscheinlich von einer übergeordneten Gruppe mit einem anderen Farbschema. Deaktivieren Sie Schema erben im Textblock und weisen Sie das richtige Schema explizit zu.