DokumentationCommercePage Builder

Layout - Zeile

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Einsteiger
  • Fortgeschrittener
  • Benutzende

Verwenden Sie den Inhaltstyp Zeile , um eine Zeile zur Page Builder Bühne hinzuzufügen.

NOTE
Wenn Sie wesentliche Änderungen am Inhalt von Page Builder vornehmen, wird empfohlen, die Lebensdauer der Admin-Sitzung zu erhöhen, um zu verhindern, dass die Sitzung während der Arbeit abläuft.

Zeilen-Toolbox

Die Zeilen-Symbolleiste wird angezeigt, wenn Sie den Mauszeiger über den Zeilencontainer 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 Bereich "Page Builder"auf der linken Seite in die Zeile gezogen werden.

Zeilen-Toolbox

Tool
Symbol
Beschreibung
Verschieben
Symbol "Verschieben" {width="25"}
Verschiebt die Zeile an eine andere Position im Verhältnis zu anderen Zeilen auf der Bühne.
(Titel)
Row
Identifiziert den aktuellen Inhaltscontainer 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 zum Ausblenden {width="25"}
Blendet die aktuelle Zeile aus.
Anzeigen
Symbol "Anzeigen" {width="25"}
Zeigt die ausgeblendete Zeile an.
Duplizieren
Symbol "Duplizieren" {width="25"}
Kopiert die Zeile.
Entfernen
Symbol "Entfernen" {width="25"}
Löscht den Zeilencontainer und seinen Inhalt aus der Bühne.
NOTE
Ausgeblendete Elemente werden in der Datenbank gespeichert und sind für Kunden nicht sichtbar. 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 "Unsichtbarkeit"angefordert werden, es sei denn, Sie entfernen sie aus der Bühne.

Zeile hinzufügen

  1. Ziehen Sie im Bedienfeld Page Builder unter Layout ​eine neue Row ​auf die Bühne, direkt unterhalb der ersten Zeile.

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

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

    Hinzufügen einer Zeile {width="600" modal="regular"}

Zeileneinstellungen ändern

  1. Bewegen Sie den Mauszeiger über den Zeilencontainer, um die Werkzeugleiste anzuzeigen, und wählen Sie das Symbol Einstellungen ( Einstellungssymbol {width="20"} ).

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

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

  3. Klicken Sie nach Abschluss des Vorgangs auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Erscheinungsbild

Verwenden Sie die Einstellungen für Erscheinungsbild , um festzulegen, wie Inhalte in der Zeile angezeigt werden.

Erscheinungsbildeinstellungen

  • Um zu bestimmen, wie die Hintergrundfarbe und/oder das Hintergrundbild im Verhältnis zum Container und zur Breite des Inhaltsbereichs angezeigt werden, wählen Sie die Ausrichtung:

    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 erweitern 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. Der vollständige Anschnitt kann nur mit Designs 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 so festlegen, dass die gesamte Höhe der Seite gestreckt wird, sodass Sie überzeugende Optionen für Hintergrundbilder und Videos mit vollständigem Seitenumbruch erhalten.

  • Wählen Sie die Einstellung "Vertical Alignment", um alle Inhaltscontainer auszurichten, die der Zeile hinzugefügt werden (oben, zentriert oder unten).

Hintergrund

Es gibt viele Möglichkeiten, die Hintergrundanzeige einer Zeile zu definieren. Sie können eine einfache Farbe oder ein Hintergrundbild anwenden und komplexere Effekte verwalten.

Hintergrundfarbe

Geben Sie die Hintergrundfarbe an, indem Sie ein Muster 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)

Sie können den Wert auf eine von drei Arten festlegen:

  • Ein vordefinierter Farbname, z. B. White
  • Der hexadezimale Farbwert für die Farbe, z. B. #ffffff
  • Der rgba-Wert für die Farbe mit Deckkraft-Prozent, z. B. rgba(255, 255, 255, 0.75)

Wenn Sie eine Farbe auswählen möchten, klicken Sie auf das Muster links neben dem Feld Keine Farbe.

Auswählen eines Farbmusters

Wenn Sie auf das Farbfeld klicken, um die Farbauswahl erneut zu öffnen, zeigt das Feld unter dem Schieberegler die aktuellen Rot-, Grün-, Blau- und Alpha-Werte (rgba) an. Die letzte Zahl gibt den aktuellen Deckkraftprozentsatz als Dezimalzahl an. Sie können den Schieberegler verwenden, um die Deckkraft anzupassen, oder den gewünschten Dezimalwert eingeben.

Einstellen der Deckkraft

NOTE
Page Builder unterstützt auch eine Transparenzschicht (oder den Alphakanal) in Hintergrundbildern, mit der Hintergründe mit unterschiedlicher Deckkraft erstellt werden können.

Background Type

Ein Hintergrundtyp kann ein Bild oder ein Video sein. Page Builder ist standardmäßig auf Image eingestellt und zeigt verschiedene Bildeinstellungen an. Wenn Sie Video auswählen, tauscht Page Builder die Bildeinstellungen mit Videoeinstellungen. Beide Hintergrundtypen werden wie folgt beschrieben.

Hintergrundtyp

Bildtypeinstellungen

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

Hintergrundbild

  • 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"} Ermöglicht Ihnen, das Bild entweder auf die Kachel "Kamera"zu ziehen oder zum Bild in Ihrem lokalen Dateisystem zu 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 zu bestimmen, wie das Hintergrundbild im Verhältnis zur 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 zu bestimmen, wie das Hintergrundbild im Verhältnis zur Zeile verankert ist:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Verankerungspunkt Position
    Top Links/Mitte/Rechts
    Center Links/Mitte/Rechts
    Bottom Links/Mitte/Rechts

    Der Ankerpunkt ist wie eine Push-Pin, die das Bild an der angegebenen Hintergrundposition an die Zeile anhängt.

  • Background Attachment - Legen Sie den Anlagentyp fest, um zu bestimmen, wie sich das Hintergrundbild im Verhältnis zur Scrollseite bewegt:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Option Beschreibung
    Scroll Das angehängte Hintergrundbild wird synchronisiert, um sich beim Bildlauf der Seite nach unten zu bewegen. Verwenden Sie Parallax Background, um die Scrollgeschwindigkeit zu steuern.
    Fixed (Für Mobilgeräte nicht verfügbar) Das Hintergrundbild wird nicht verschoben, wenn der Container über das Bild blättert, und ist an der angegebenen Hintergrundposition fixiert.

  • Background Repeat - Auf Yes setzen, um das Hintergrundbild zu wiederholen und den verfügbaren Platz in der Zeile auszufüllen.

Videotypeinstellungen

Wenn Sie den Hintergrundtyp auf Video festlegen, verwenden Sie die folgenden Einstellungen, um die Anzeige des Hintergrundbilds zu definieren.

  • Video URL - Geben Sie eine gültige Video-URL ein. Gültige Video-URLs können Links zu folgenden Elementen sein:

    • YouTube-Videos: https://youtu.be/CoDhMRUUjeI
    • Video-Videos: https://vimeo.com/190156113
    • Gültige Videodateien (.mp4 wird empfohlen): https://myvideos.com/spiral.mp4

    Video-URL im Hintergrund {width="300"}

  • Overlay Color - Wählen Sie eine Farbe, um einen transparenten Farbton auf das Video anzuwenden.

  • Infinite Loop - Auf No setzen, damit das Video einmal wiedergegeben und gestoppt wird. Wenn diese Option auf "Yes"(Standard) gesetzt ist, wiederholt sich das Video in einer Endlosschleife.

  • Lazy Load - Auf No setzen, um das Video mit der Seite zu laden, selbst wenn es nicht sichtbar ist. Wenn diese Option auf "Yes"(Standard) gesetzt ist, wird das Video nur aus der Quelle geladen, wenn es auf dem Bildschirm sichtbar ist.

  • Play Only When Visible - Auf No setzen, damit das Video sofort nach dem Laden wiedergegeben wird, unabhängig davon, ob es sichtbar ist. Wenn diese Option auf "Yes"(Standard) gesetzt ist, beginnt die Wiedergabe des Videos nur, 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 wenn das Video aus irgendeinem Grund nicht geladen wird.

Parallax-Hintergrund

Mit diesen Optionen können Sie die Geschwindigkeit eines Bildlaufhintergrundbilds oder -videos im Verhältnis zum Bildlauf der Seite steuern. Der Hintergrund kann so eingestellt werden, dass er langsamer scrollt, um ein Gefühl der Eintauchen zu schaffen.

  • Setzen Sie Parallax-Hintergrund aktivieren auf Yes.
  • Geben Sie die Parallax-Geschwindigkeit als Dezimalwert zwischen -1.0 und 2.0 ein.

Parallax-Hintergrundeinstellungen

Erweitert

  • Um die horizontale Positionierung der Inhaltscontainer zu steuern, die der Zeile hinzugefügt werden, wählen Sie einen Alignment:

    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 Inhaltscontainer am linken Rand des Zeilenbehälters aus, wobei der angegebene Abstand berücksichtigt wird.
    Center Richtet den Inhalts-Container in der Mitte des Zeilenbehälters aus, wobei der angegebene Abstand berücksichtigt wird.
    Right Richtet den Inhalts-Container am rechten Rand des Zeilenbehälters aus, wobei der angegebene Abstand berücksichtigt wird.

  • Legen Sie den Border -Stil fest, der auf alle vier Seiten des Zeilenbehälters 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 den standardmäßigen Randstil an, der vom zugehörigen Stylesheet angegeben wird.
    None liefert keine sichtbare Anzeige der Containergrenzen.
    Dotted Der Container-Rahmen wird als gepunktete Linie angezeigt.
    Dashed Der Container-Rahmen wird als gestrichelte Linie angezeigt.
    Solid Der Container-Rahmen wird als durchgehende Linie angezeigt.
    Double Der Container-Rahmen wird als doppelte Linie angezeigt.
    Groove Der Container-Rahmen wird als Rillenlinie angezeigt.
    Ridge Der Container-Rahmen wird als gekürzte Linie angezeigt.
    Inset Der Container-Rahmen wird als Inset-Zeile angezeigt.
    Outset Der Container-Rahmen wird als Ausgangspunkt angezeigt.

  • Wenn Sie einen anderen Rahmenstil als None festlegen, füllen Sie die Anzeigeoptionen für die Rahmenanzeige aus:

    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 ein Muster auswählen, auf die Farbauswahl klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.
    Border Width Geben Sie die Anzahl Pixel für die Rahmenlinienbreite an.
    Border Radius Geben Sie die Anzahl der Pixel an, um die die Größe des Radius definiert wird, mit dem die einzelnen Ecken des Rands gerundet werden.

    Die Zeile im folgenden Beispiel hat einen Rahmenradius von 15.

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

  • (Optional) Geben Sie die Namen von CSS classes aus dem aktuellen Stylesheet an, das auf den Zeilencontainer angewendet werden soll.

    Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

  • Geben Sie Werte in Pixel an, damit der Wert Margins and Padding die äußeren Ränder und den inneren Abstand der Zeile angibt.

    Geben Sie jeden entsprechenden Wert in das Zeilenbehälterdiagramm ein.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Container-Bereich Beschreibung
    Margins Die Menge an leerem Raum, die auf den äußeren Rand aller Seiten des Containers angewendet wird. Optionen: Top / Right / Bottom / Left
    Padding Die Menge an leerem Raum, die auf den inneren Rand 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