Layout - Zeile

Verwenden Sie den Row-Content-Typ, um eine Zeile in der Page Builder Staging hinzuzufügen.

NOTE
Wenn Sie wesentliche Änderungen an Page Builder Inhalten vornehmen, wird empfohlen, die Admin-Sitzungslebensdauer) zu erhöhen um zu verhindern, dass die Sitzung während der Arbeit abläuft.

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.

Zeilen-Toolbox {width="600" modal="regular"}

Tool
Symbol
Beschreibung
Verschieben
move icon {width="25"}
Verschiebt die Zeile an eine andere Position im Verhältnis zu anderen Zeilen auf der Bühne.
(Bezeichnung)
Row
Identifiziert den aktuellen Inhalts-Container als Zeile. Bewegen Sie den Mauszeiger über den Container, um die Toolbox anzuzeigen.
Einstellungen
Einstellungssymbol {width="25"}
Öffnet die Seite Zeile bearbeiten , auf der Sie die Eigenschaften des Containers ändern können.
Ausblenden
Symbol ausblenden {width="25"}
Blendet die aktuelle Zeile aus.
Anzeigen
Symbol anzeigen {width="25"}
Zeigt die ausgeblendete Zeile an.
Duplikat
Symbol „Duplizieren“ {width="25"}
Erstellt eine Kopie der Zeile.
entfernen
Symbol entfernen {width="25"}
Löscht den Zeilen-Container und seinen Inhalt aus der Phase.
NOTE
Ausgeblendete Elemente werden in der Datenbank gespeichert und sind für Kunden unsichtbar. Diese Elemente sind jedoch für Suchmaschinen und andere Bots sichtbar, die Ihre Site durchsuchen. Sie werden auch als Teil des Inhalts zurückgegeben, wenn sie über einen API-Aufruf mit dem Attribut „unsichtbar“ angefordert werden, es sei denn, Sie entfernen sie aus dem Schritt.

Zeile hinzufügen

  1. Ziehen Sie im Page Builder unter Layout ​einen neuen Row ​auf das Stadium, direkt unter der ersten Zeile.

  2. Um die Zeile zu formatieren, bewegen Sie den Mauszeiger über den Zeilen-Container, um die Toolbox anzuzeigen, und wählen das Symbol Einstellungen aus (Symbol Einstellungen {width="20"} ).

    In den folgenden Abschnitten finden Sie detaillierte Informationen zum Abschließen der verfügbaren Einstellungen.

    Zeile hinzufügen {width="600" modal="regular"}

Zeileneinstellungen ändern

  1. Bewegen Sie den Mauszeiger über den Zeilen-Container, um die Toolbox anzuzeigen, und wählen Sie Symbol Einstellungen ( Einstellungssymbol {width="20"} ) aus.

    Zeilen-Toolbox {width="600" modal="regular"}

  2. In den folgenden Abschnitten finden Sie detaillierte Informationen zum Aktualisieren der verfügbaren Einstellungen.

  3. 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.

Erscheinungsbildeinstellungen {width="600" modal="regular"}

  • 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.

Keine Farbe (Standard) {width="200"}

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.

Auswählen eines Farbmusters {width="600" modal="regular"}

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.

Festlegen der Deckkraft {width="600" modal="regular"}

NOTE
Page Builder unterstützt auch eine Transparenzschicht (Alphakanal in Hintergrundbildern, die verwendet werden können, um Hintergründe mit unterschiedlichem Grad der Deckkraft zu erstellen.

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.

Hintergrundtyp {width="200"}

Einstellungen für Bildtyp

Wenn Sie die Background Type ​auf Image setzen, verwenden Sie die folgenden Einstellungen, um die Hintergrundbildanzeige zu definieren.

Hintergrundbild {width="600" modal="regular"}

  • 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.
    Kamerasymbol {width="25"} 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.

    Hintergrundgröße {width="250"}

  • 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

    URL des Hintergrundvideos {width="300"}

  • 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 auf Yes (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 auf Yes (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 auf Yes (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 und 2.0 ein.

Parallax Hintergrundeinstellungen {width="600" modal="regular"}

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:

    Rahmenfarbe {width="600" modal="regular"}

    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.

    Zeile mit dem Rahmenradius von 15 {width="500"}

  • (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

    Ränder und Abstand {width="600" modal="regular"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d