Layout - Zeile
Verwenden Sie den Row-Content-Typ, um eine Zeile in der Page Builder Staging hinzuzufügen.
Zeilen-Toolbox
Die Zeilen-Toolbox wird angezeigt, wenn Sie den Mauszeiger über den Zeilen-Container bewegen. Die Toolbox enthält Optionen zum Verschieben, Ausblenden, Duplizieren, Bearbeiten oder Entfernen der Zeile. Die Auswahl der Einstellungen bestimmt das Erscheinungsbild, den Hintergrund und das Layout der Zeile. Zusätzliche Inhaltselemente können aus dem Page Builder auf der linken Seite in die Zeile gezogen werden.






Zeile hinzufügen
-
Ziehen Sie im Page Builder unter Layout einen neuen Row auf das Stadium, direkt unter der ersten Zeile.
-
Um die Zeile zu formatieren, bewegen Sie den Mauszeiger über den Zeilen-Container, um die Toolbox anzuzeigen, und wählen das Symbol Einstellungen
In den folgenden Abschnitten finden Sie detaillierte Informationen zum Abschließen der verfügbaren Einstellungen.
Zeileneinstellungen ändern
-
Bewegen Sie den Mauszeiger über den Zeilen-Container, um die Toolbox anzuzeigen, und wählen Sie Symbol Einstellungen
-
In den folgenden Abschnitten finden Sie detaillierte Informationen zum Aktualisieren der verfügbaren Einstellungen.
-
Klicken Sie abschließend auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.
Erscheinungsbild
Verwenden Sie die Erscheinungsbild, um festzulegen, wie Inhalte in der Zeile angezeigt werden.
-
Um zu bestimmen, wie die Hintergrundfarbe und/oder das Hintergrundbild in Bezug auf den Container und die Breite des Inhaltsbereichs angezeigt wird, wählen Sie die Ausrichtung aus:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Beschreibung Contained Die Hintergrundfarbe oder das Bild ist auf die maximale Seitenbreite beschränkt, die vom Design definiert wird. Full Width Beschränkt den Inhalt auf die maximale Seitenbreite, die vom Design definiert wird. Die Hintergrundfarbe und/oder das Bild sind nicht beschränkt und erstrecken sich über die gesamte Breite der Zeile. Full Bleed Der Inhalt und das Hintergrundbild und/oder die Farbe sind nicht beschränkt und erweitern die gesamte Breite der Zeile. Vollständiger Anschnitt kann nur mit () verwendet werden die das Layout unterstützen. -
Geben Sie die Minimum Height für die Zeile ein. Dieser Wert kann eine Zahl mit einer beliebigen gültigen CSS-Einheit (z. B.
100px
,50%
,50em
,100vh
) oder eine Berechnung (z. B.100vh - 237px
) sein.Sie können beispielsweise die Mindesthöhe einer Zeile festlegen, um die gesamte Höhe der Seite zu dehnen, sodass Sie überzeugende Optionen für Hintergrundbilder und Videos mit voller Seite erhalten.
-
Wählen Sie eine Vertical Alignment aus, um alle Inhalts-Container auszurichten, die der Zeile hinzugefügt werden (oben, zentriert oder unten).
Hintergrund
Es gibt viele Optionen zum Definieren der Hintergrundanzeige einer Zeile. Sie können ein einfaches Farb- oder Hintergrundbild anwenden und komplexere Effekte verwalten.
Hintergrundfarbe
Geben Sie die Hintergrundfarbe an, indem Sie ein Farbfeld auswählen, auf die Farbauswahl klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben. Diese Einstellung bestimmt die Hintergrundfarbe der Zeile. Sie können auch die Deckkraft der Farbe anpassen.
Sie haben drei Möglichkeiten, den Wert festzulegen:
- Ein vordefinierter Farbname, z. B.
White
- Der hexadezimale Farbwert für die Farbe, z. B.
#ffffff
- Der RGBA-Wert für die Farbe mit Prozentsatz für die Deckkraft, z. B.
rgba(255, 255, 255, 0.75)
Wenn Sie eine Farbe auswählen möchten, klicken Sie auf das Farbfeld links neben dem Feld Keine Farbe.
Wenn Sie auf das Farbfeld klicken, um die Farbauswahl erneut zu öffnen, werden im Feld unter dem Schieberegler die aktuellen Rot-, Grün-, Blau- und Alpha-Werte (RGBA) angezeigt. Die letzte Zahl gibt den aktuellen Prozentsatz der Deckkraft als Dezimalzahl an. Sie können den Schieberegler verwenden, um die Deckkraft anzupassen, oder den gewünschten Dezimalwert eingeben.
Background Type
Ein Hintergrundtyp kann ein Bild oder ein Video sein. Page Builder ist standardmäßig Image
und zeigt verschiedene Bildeinstellungen an. Wenn Sie Video
auswählen, tauscht Page Builder die Bildeinstellungen durch die Videoeinstellungen aus. Beide Hintergrundtypen werden wie folgt beschrieben.
Einstellungen für Bildtyp
Wenn Sie die Background Type auf Image
setzen, verwenden Sie die folgenden Einstellungen, um die Hintergrundbildanzeige zu definieren.
-
Background Image - Verwenden Sie bei Bedarf die bereitgestellten Tools, um ein Hintergrundbild auszuwählen, das auf die Zeile angewendet werden soll:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Beschreibung Upload Lädt eine Bilddatei von Ihrem lokalen Computer in die Galerie hoch und wendet sie dann als Hintergrundbild für die Zeile an. Select from Gallery Fordert Sie auf, ein vorhandenes Bild aus der Galerie als Hintergrundbild für die Zeile auszuwählen. Hiermit können Sie das Bild entweder auf die Kamerakachel ziehen oder zum Bild in Ihrem lokalen Dateisystem navigieren. -
Background Mobile Image - Verwenden Sie bei Bedarf dieselben Tools, um ein anderes Hintergrundbild für die Anzeige auf Mobilgeräten auszuwählen.
-
Background Size - Legen Sie diese Option fest, um festzulegen, wie das Hintergrundbild in Bezug auf die Breite der Zeile skaliert wird:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Beschreibung Cover
Das Hintergrundbild deckt die gesamte Breite der Zeile ab. Contain
Das Hintergrundbild ist auf die Breite des Inhaltsbereichs beschränkt. Auto
Wendet die Größe aus dem aktuellen Stylesheet an. -
Background Position - Legen Sie diese Option fest, um festzulegen, wie das Hintergrundbild in Bezug auf die Zeile verankert wird:
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Ankerpunkt Position Top
Links/Mitte/Rechts Center
Links/Mitte/Rechts Bottom
Links/Mitte/Rechts Der Ankerpunkt ist wie ein Push-Pin, mit dem das Bild an der angegebenen Hintergrundposition an der Zeile befestigt wird.
-
Background Attachment : Legen Sie den Anlagentyp fest, um zu bestimmen, wie sich das Hintergrundbild in Bezug auf die Bildlaufseite bewegt:
table 0-row-2 1-row-2 2-row-2 layout-auto Option Beschreibung Scroll
Das angehängte Hintergrundbild wird synchronisiert, sodass es beim Bildlauf auf der Seite nach unten verschoben wird. Verwenden Sie den Parallax-Hintergrund, um die Bildlaufgeschwindigkeit zu steuern. Fixed
(Nicht für Mobilgeräte verfügbar) Das Hintergrundbild wird nicht verschoben, wenn der Container über das Bild scrollt und an der angegebenen Hintergrundposition fixiert ist. -
Background Repeat : Setzen Sie diesen Wert auf
Yes
, um das Hintergrundbild zu wiederholen und den verfügbaren Platz in der Zeile auszufüllen.
Einstellungen für Videotyp
Wenn Sie den Hintergrundtyp auf Video
setzen, verwenden Sie die folgenden Einstellungen, um die Hintergrundbildanzeige zu definieren.
-
Video URL : Geben Sie eine gültige Video-URL ein. Gültige Video-URLs können Links sein zu:
- Videos zu YouTube:
https://youtu.be/CoDhMRUUjeI
- Videos zu Vimeo:
https://vimeo.com/190156113
- Gültige Videodateien (
.mp4
wird empfohlen):https://myvideos.com/spiral.mp4
- Videos zu YouTube:
-
Overlay Color - Wählen Sie eine Farbe aus, um einen transparenten Farbton auf das Video anzuwenden.
-
Infinite Loop : Stellen Sie diese Option auf
No
ein, damit das Video einmal abgespielt und dann angehalten wird. Wenn diese Option aufYes
(Standard) gesetzt ist, wiederholt sich das Video in einer Endlosschleife. -
Lazy Load : Wählen Sie
No
aus, damit das Video mit der Seite geladen wird, auch wenn es nicht sichtbar ist. Wenn diese Option aufYes
(Standard) gesetzt ist, wird das Video nur von der Quelle geladen, wenn es auf dem Bildschirm sichtbar ist. -
Play Only When Visible : Wählen Sie
No
aus, damit das Video sofort nach dem Laden wiedergegeben wird, unabhängig davon, ob es sichtbar ist. Wenn diese Option aufYes
(Standard) gesetzt ist, wird das Video nur abgespielt, wenn es sichtbar ist. -
Fallback Image : Geben Sie bei Bedarf ein Bild an, das auf dem Bildschirm angezeigt werden soll, bevor das Video geladen wird, und geben Sie an, ob das Video aus irgendeinem Grund nicht geladen wird.
Parallaxenhintergrund
Verwenden Sie diese Optionen, um die Geschwindigkeit des Bildlaufs eines Hintergrundbilds oder -videos im Verhältnis zum Bildlauf auf der Seite zu steuern. Der Hintergrund kann so eingestellt werden, dass er langsamer scrollt, um ein Gefühl der Immersion zu erzeugen.
- Setzen Sie Enable Parallax Background auf
Yes
. - Geben Sie die Parallaxengeschwindigkeit als Dezimalwert zwischen
-1.0
und2.0
ein.
Erweitert
-
Um die horizontale Positionierung von Inhalts-Containern zu steuern, die der Zeile hinzugefügt werden, wählen Sie eine Alignment aus:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Option Beschreibung Default
Wendet die Standardeinstellung für die Ausrichtung an, die im Stylesheet des aktuellen Designs angegeben ist. Left
Richtet die Inhalts-Container am linken Rand des Zeilen-Containers aus, wobei für jeden angegebenen Abstand berücksichtigt wird. Center
Richtet den Inhalts-Container in der Mitte des Zeilen-Containers aus, wobei alle angegebenen Auffüllungen berücksichtigt werden. Right
Richtet den Inhalts-Container am rechten Rand des Zeilen-Containers aus, wobei für jeden angegebenen Abstand berücksichtigt wird. -
Legen Sie den Border fest, der auf alle vier Seiten des Zeilen-Containers angewendet wird:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Option Beschreibung Default
Wendet die Standardformatvorlage für Rahmen an, die im zugehörigen Stylesheet angegeben ist. None
Zeigt keine sichtbaren Begrenzungen des Containers an. Dotted
Der Container-Rahmen wird als gepunktete Linie angezeigt. Dashed
Der Container-Rahmen wird als gestrichelte Linie angezeigt. Solid
Der Container-Rahmen wird als durchgezogene Linie angezeigt. Double
Der Container-Rahmen wird als doppelte Linie angezeigt. Groove
Der Container-Rahmen wird als gerillte Linie angezeigt. Ridge
Der Container-Rahmen wird als geriffelte Linie angezeigt. Inset
Der Container-Rahmen wird als Einfügelinie angezeigt. Outset
Der Container-Rahmen wird als Ausgangslinie angezeigt. -
Wenn Sie einen anderen Rahmenstil als
None
festlegen, müssen Sie die Anzeigeoptionen für den Rahmen vervollständigen:table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Beschreibung Border Color Geben Sie die Farbe an, indem Sie einen Musterabschnitt auswählen, auf die Farbauswahl klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben. Border Width Geben Sie die Anzahl der Pixel für die Rahmenlinienbreite ein. Border Radius Geben Sie die Anzahl der Pixel ein, um die Größe des Radius festzulegen, mit dem jede Ecke des Rahmens gerundet werden soll. Die Zeile im folgenden Beispiel hat einen Rahmenradius von 15.
-
(Optional) Geben Sie die Namen der CSS classes aus dem aktuellen Stylesheet an, die auf den Zeilen-Container angewendet werden sollen.
Trennen Sie mehrere Klassennamen durch ein Leerzeichen.
-
Geben Sie Werte in Pixeln für die Margins and Padding ein, um die äußeren Ränder und den inneren Abstand der Zeile festzulegen.
Geben Sie jeden entsprechenden Wert in das Zeilen-Container-Diagramm ein.
table 0-row-2 1-row-2 2-row-2 layout-auto Container-Bereich Beschreibung Margins Die Menge des Leerraums, der auf die Außenkante aller Seiten des Containers angewendet wird. Optionen: Top
/Right
/Bottom
/Left
Padding Die Menge des Leerraums, der auf die Innenkante aller Seiten des Containers angewendet wird. Optionen: Top
/Right
/Bottom
/Left