Layout - Zeile

Verwenden Sie den Inhaltstyp Row, um eine neue Zeile im Page Builder Arbeitsbereich hinzuzufügen.

Zeilen-Toolbox

Die Zeilen-Toolbox 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 Aussehen, den Hintergrund und das Layout der Zeile. Zusätzliche Inhaltselemente können über das Bedienfeld Page Builder auf der linken Seite in die Zeile gezogen werden.

Werkzeugkasten Zeile

Werkzeug	Symbol	Beschreibung
Verschieben		Verschiebt die Reihe an eine andere Position im Verhältnis zu anderen Reihen auf dem Arbeitsbereich.
(Label)	Zeile	Identifiziert den aktuellen Inhaltscontainer als Zeile. Bewegen Sie den Mauszeiger über den Container, um die Toolbox zu sehen.
Einstellungen		Öffnet die Seite Zeile bearbeiten, wo Sie die Eigenschaften des Containers ändern können.
Ausblenden		Blendet die aktuelle Zeile aus.
Anzeigen		Zeigt die ausgeblendete Zeile an.
Duplizieren		Erzeugt eine Kopie der Zeile.
Entfernen		Löscht den Zeilencontainer und seinen Inhalt vom Arbeitsbereich.

Hinzufügen einer Zeile

1. Ziehen Sie im Page Builder Panel unter Layout eine neue Reihe auf den Arbeitsbereich, direkt unter die erste Reihe.

2. Um die Zeile zu formatieren, bewegen Sie den Mauszeiger über den Zeilencontainer, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ().

   In den folgenden Abschnitten finden Sie detaillierte Informationen über die verfügbaren Einstellungen.

   Zeile hinzufügen

Zeileneinstellungen ändern

1. Bewegen Sie den Mauszeiger über den Zeilencontainer, um die Toolbox anzuzeigen, und wählen Sie das Symbol Settings ().

   Zeilen-Werkzeugkasten

2. In den folgenden Abschnitten finden Sie detaillierte Informationen zur Aktualisierung der verfügbaren Einstellungen.

3. Klicken Sie abschließend auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Erscheinungsbild

Mit den Einstellungen Aussehen legen Sie fest, wie der Inhalt in der Zeile angezeigt wird.

Einstellungen Erscheinungsbild

• Wählen Sie die Ausrichtung, um festzulegen, wie die Hintergrundfarbe und/oder das Hintergrundbild im Verhältnis zum Container und zur Breite des Inhaltsbereichs angezeigt wird.

  Eingeschlossen	Die Hintergrundfarbe bzw. das Hintergrundbild ist auf die maximale Seitenbreite beschränkt, die durch das Thema definiert ist.
  Volle Breite	Begrenzt den Inhalt auf die maximale Seitenbreite, die durch das Thema definiert ist. Die Hintergrundfarbe und/oder das Bild ist nicht begrenzt und erstreckt sich über die gesamte Breite der Zeile.
  Voller Beschnitt	Weder der Inhalt noch das Hintergrundbild und/oder die Farbe sind begrenzt und erstrecken sich über die volle Breite der Zeile. Full Bleed kann nur mit themes verwendet werden, die dieses Layout unterstützen.

• Geben Sie die Mindesthöhe 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 zum Beispiel die Mindesthöhe einer Zeile so festlegen, dass sie die gesamte Höhe der Seite einnimmt, wodurch Sie überzeugende Optionen für ganzseitige Hintergrundbilder und Videos erhalten.

• Wählen Sie eine Einstellung für Vertikale Ausrichtung, um alle Inhaltscontainer, die der Zeile hinzugefügt werden, auszurichten (Oben, Mitte oder Unten).

Hintergrund

Es gibt viele Optionen, um die Hintergrundanzeige einer Zeile zu definieren. Sie können eine einfache Farbe oder ein Hintergrundbild verwenden, aber auch komplexere Effekte verwalten.

Hintergrundfarbe

Geben Sie die Hintergrundfarbe an, indem Sie ein Farbfeld auswählen, auf den Farbwähler klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben. Damit wird die Hintergrundfarbe der Zeile festgelegt. Sie können auch die Deckkraft der Farbe einstellen.

Keine Farbe (Standard)

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

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

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

Auswählen eines Farbfelds

Wenn Sie auf das Farbfeld klicken, um den Farbwähler erneut zu öffnen, zeigt das Feld unter dem Slider die aktuellen Rot-, Grün-, Blau- und Alphawerte (rgba) an. Die letzte Zahl gibt die aktuelle Deckkraft in Prozent als Dezimalzahl an. Sie können den Slider verwenden, um die Deckkraft anzupassen, oder den gewünschten Dezimalwert eingeben.

Deckkraft einstellen

Page Builder unterstützt auch eine Transparenzebene oder einen Alpha-Kanal in Hintergrundbildern, der verwendet werden kann, um Hintergründe mit unterschiedlichen Deckungsgraden zu erstellen.

Hintergrund Typ

Ein Hintergrundtyp kann ein Bild oder ein Video sein. Page Builder ist standardmäßig auf Bild eingestellt und zeigt verschiedene Bildeinstellungen. Wenn Sie Video wählen, tauscht Page Builder die Bildeinstellungen gegen Videoeinstellungen aus. Beide Hintergrundtypen werden im Folgenden beschrieben.

Hintergrundtyp

Einstellungen des Bildtyps

Wenn Sie den Hintergrundtyp auf Bild einstellen, verwenden Sie die folgenden Einstellungen, um die Anzeige des Hintergrundbildes zu definieren.

Hintergrundbild

• Hintergrundbild - Verwenden Sie bei Bedarf die bereitgestellten Werkzeuge, um ein Hintergrundbild für die Zeile auszuwählen:

  Hochladen	Lädt eine Bilddatei von Ihrem lokalen Computer in die Galerie hoch und wendet sie dann als Hintergrundbild für die Zeile an.
  Aus Galerie auswählen	Fordert Sie auf, ein vorhandenes Bild aus der Galerie als Hintergrundbild für die Zeile auszuwählen.
  	Ermöglicht es Ihnen, das Bild entweder auf die Kamerakachel zu ziehen oder das Bild in Ihrem lokalen Dateisystem zu suchen.

• Hintergrundbild für Mobilgeräte - Verwenden Sie bei Bedarf die gleichen Werkzeuge, um ein anderes Hintergrundbild für die Anzeige auf Mobilgeräten auszuwählen.

• Hintergrundgröße - Legen Sie mit dieser Option fest, wie das Hintergrundbild im Verhältnis zur Breite der Zeile skaliert werden soll:

  Abdeckung	Das Hintergrundbild deckt die gesamte Breite der Zeile ab.
  Umfassen	Das Hintergrundbild ist auf die Breite des Inhaltsbereichs begrenzt.
  Automatisch	Wendet die Größe aus der aktuellen Stilvorlage an.

  Hintergrundgröße

• Hintergrundposition - Setzen Sie diese Option, um festzulegen, wie das Hintergrundbild im Verhältnis zur Zeile verankert wird:

  Oben	Links / Mitte / Rechts
  Mitte	Links/Mitte/Rechts
  Unten	Links / Mitte / Rechts

  Der Ankerpunkt ist wie eine Stecknadel, die das Bild an der angegebenen Hintergrundposition in der Zeile festhält.

• Hintergrundbefestigung - Legen Sie den Befestigungstyp fest, um zu bestimmen, wie sich das Hintergrundbild in Bezug auf die scrollende Seite bewegt:

  Scrollen	Das angehängte Hintergrundbild wird synchronisiert, um sich beim Scrollen der Seite nach unten zu bewegen. Verwenden Sie Parallaxe-Hintergrund, um die Scrollgeschwindigkeit zu steuern.
  Fixiert	(Nicht verfügbar für Mobilgeräte) Das Hintergrundbild bewegt sich nicht, wenn der Container über das Bild scrollt und bleibt an der angegebenen Hintergrundposition fixiert.

Videotyp-Einstellungen

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

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

  • YouTube-Videos: https://youtu.be/CoDhMRUUjeI
  • Vimeo-Videos: https://vimeo.com/190156113
  • Gültige Videodateien (wir empfehlen .mp4): https://myvideos.com/spiral.mp4

  Hintergrundvideo-URL_

• Überlagerungsfarbe - Wählen Sie eine Farbe aus, um dem Video einen transparenten Farbton zu verleihen.

• Endlosschleife - Setzen Sie diese Option auf Nein, um das Video einmal abzuspielen und dann anzuhalten. Wenn diese Option auf Ja (Standard) eingestellt ist, wird das Video in einer Endlosschleife wiederholt.

• Lazy Load - Setzen Sie dies auf Nein, damit das Video mit der Seite geladen wird, auch wenn es nicht sichtbar ist. Wenn diese Option auf Ja (Standard) eingestellt ist, wird das Video nur dann von der Quelle geladen, wenn es auf dem Bildschirm sichtbar ist.

• Nur bei Sichtbarkeit abspielen - Setzen Sie diese Option auf Nein, damit das Video sofort nach dem Laden abgespielt wird, unabhängig davon, ob es sichtbar ist. Wenn diese Option auf Ja (Standard) eingestellt ist, wird das Video nur abgespielt, wenn es sichtbar ist.

• Fallback-Bild - Geben Sie bei Bedarf ein Bild an, das auf dem Bildschirm angezeigt werden soll, bevor ein Video geladen wird und für den Fall, dass das Video aus irgendeinem Grund nicht geladen wird.

Parallaxen-Hintergrund

Verwenden Sie diese Optionen, um die Geschwindigkeit eines scrollenden Hintergrundbildes oder Videos im Verhältnis zum Scrollen der Seite zu steuern. Der Hintergrund kann so eingestellt werden, dass er langsamer scrollt, um ein Gefühl der Immersion zu erzeugen.

• Setzen Sie Parallaxenhintergrund aktivieren auf Ja.
• Geben Sie die Parallaxengeschwindigkeit als Dezimalwert zwischen -1.0 und 2.0 ein.

Einstellungen für Parallaxenhintergrund

Erweitert

• Wählen Sie eine Ausrichtung, um die horizontale Positionierung von Inhaltscontainern zu steuern, die der Zeile hinzugefügt werden.

  Standard	Wendet die Standardeinstellung der Ausrichtung an, die in der Stilvorlage des aktuellen Themas angegeben ist.
  Links	Richtet die Inhaltscontainer entlang des linken Randes des Zeilencontainers aus, unter Berücksichtigung der angegebenen Polsterung.
  Zentriert	Richtet den Inhaltscontainer in der Mitte des Zeilencontainers aus, unter Berücksichtigung der angegebenen Füllung.
  Rechts	Richtet den Inhaltscontainer entlang des rechten Randes des Zeilencontainers aus, unter Berücksichtigung der angegebenen Füllung.

• Legen Sie den Stil Border fest, der auf alle vier Seiten des Zeilencontainers angewendet wird:

  Standard	Wendet den Standard-Rahmenstil an, der in der zugehörigen Stilvorlage angegeben ist.
  Keiner	Bietet keinen sichtbaren Hinweis auf die Containergrenzen.
  Gepunktet	Der Containerrand erscheint als gepunktete Linie.
  Gestrichelt	Der Containerrand erscheint als gestrichelte Linie.
  Durchgehend	Der Containerrand wird als durchgezogene Linie dargestellt.
  Doppelt	Der Containerrand wird als Doppellinie dargestellt.
  Rille	Der Containerrand erscheint als gerillte Linie.
  Steg	Der Containerrand erscheint als geriffelte Linie.
  Einzug	Die Umrandung des Containers erscheint als versenkte Linie.
  Außenlinie	Der Containerrand erscheint als Umrandungslinie.

• Wenn Sie einen anderen Rahmenstil als None einstellen, vervollständigen Sie die Rahmenanzeigeoptionen:

  • Rahmenfarbe - Geben Sie die Farbe an, indem Sie ein Farbfeld auswählen, auf den Farbwähler klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.

    Rahmenfarbe

  • Rahmenbreite - Geben Sie die Anzahl der Pixel für die Breite der Rahmenlinie ein.

  • Rahmenradius - Geben Sie die Anzahl der Pixel ein, um die Größe des Radius zu definieren, der verwendet wird, um jede Ecke des Rahmens abzurunden.

    Die Zeile im folgenden Beispiel hat einen Rahmenradius von 15.

    Zeile mit Randradius von 15

• (Optional) Geben Sie die Namen der CSS-Klassen aus der aktuellen Stilvorlage an, die auf den Zeilencontainer angewendet werden sollen.

  Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

• Geben Sie Werte in Pixeln für Margins und Padding ein, um die äußeren Ränder und die innere Auffüllung der Zeile anzugeben.

  Geben Sie die entsprechenden Werte in das Diagramm des Zeilencontainers ein.

  Ränder	Die Menge an Leerraum, die an der Außenkante aller Seiten des Containers angebracht wird. Optionen: Oben / Rechts / Unten / Links
  Auffüllung	Die Höhe des Leerraums, der auf die Innenkante aller Seiten des Containers angewendet wird. Optionen: Oben / Rechts / Unten / Links

  Ränder und Abstände_