Layout - Spalte

Ziehen Sie im Bedienfeld Page Builder unter Layout ​eine Column ​auf die Bühne.

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

Die Spaltengruppe ist nun in zwei Spalten mit gleicher Breite unterteilt. Jede Spalte ist ein separater Container für Inhalte und verfügt über einen eigenen Satz an Toolbox-Optionen.

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

Klicken Sie in der linken oberen Ecke der Spaltengruppe auf das Tool Raster ( ) und passen Sie die Rastergröße nach Bedarf an.

Die Positionierung von Inhalten im Raster hilft, Inhalte konsistent auszurichten, und stellt die Seite auf Desktop- und Mobilgeräten korrekt dar. Weitere Informationen finden Sie im Abschnitt Erweiterte Inhaltswerkzeuge der Page Builder -Konfiguration.

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

Bewegen Sie den Mauszeiger über den Rahmen zwischen zwei Spalten.

Der Rahmen wird hervorgehoben und das Toolbox für die ausgewählte Spalte wird angezeigt.

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

Halten Sie die Maustaste gedrückt, um das Raster anzuzeigen, und ziehen Sie den Rahmen an eine neue Position auf dem Raster.

Die Breite beider Spalten wird entsprechend der Änderung angepasst. Die neue Breite jeder Spalte wird nach der Beschriftung angezeigt, z. B. 4/12 (vier von 12) und 8/12 (acht von 12).

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

Bewegen Sie den Mauszeiger über die Spalte, die Sie entfernen möchten, um die Toolbox anzuzeigen, und wählen Sie das Symbol Entfernen ( {width="20"} ).

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

Wenn die Spalte Inhalt enthält, klicken Sie zur Bestätigung auf OK .

Um den Prozess in Zukunft zu beschleunigen, können Sie den Bestätigungsschritt überspringen, indem Sie das Kontrollkästchen Do not show this again aktivieren.

Die Spaltengruppe verfügt nun über eine einzige Spalte (12/12) und ein Raster. Da das Raster nur für Spalten verfügbar ist, können Sie dieses Verfahren verwenden, um das Raster anzuzeigen.

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

Wenn die Spaltengruppe die verbleibende Spalte auf die volle Breite der Zeile oder Phase erweitern soll:

• Bewegen Sie den Mauszeiger über die Spalte, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ).

• Scrollen Sie nach unten zum Abschnitt Advanced ​und setzen Sie alle vier Padding-Werte auf 0.

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

• Klicken Sie oben rechts auf Save , um die Seite Edit Column ​zu schließen.

Klicken Sie oben rechts im Arbeitsbereich auf das Symbol Vollbild schließen ( {width="20"} ) und klicken Sie dann oben rechts auf Save .

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

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

Ändern Sie die Einstellungen für Appearance nach Bedarf.

• Wählen Sie die Ausrichtungseinstellung aus, die die Position der Spalte in Bezug auf ihren Container bestimmt.

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Option	Beschreibung
  Full Height	Die Spalte erweitert die volle Höhe ihres Containers.
  Top Aligned	Die Spalte wird am oberen Rand des Containers ausgerichtet.
  Centered	Die Spalte in zentriert in der Mitte ihres Containers.
  Bottom Aligned	Die Spalte wird am unteren Rand des Containers ausgerichtet.

• Geben Sie bei Bedarf den Wert Minimum Height für die Spalte ein. Sie können beispielsweise die Mindesthöhe so festlegen, dass sie der Höhe eines Hintergrundbilds entspricht.

• Wenn Sie die Mindesthöhe festlegen, legen Sie die Vertical Alignment fest, um die Position der Inhaltscontainer zu steuern, die der Spalte hinzugefügt werden (Top, Center oder Bottom).

Ändern Sie den Hintergrund für den Spalteninhalt.

• Background 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. Diese Einstellung bestimmt die Hintergrundfarbe der Spalte.

• Background Image - Verwenden Sie bei Bedarf die bereitgestellten Tools, um ein Hintergrundbild auszuwählen, das auf die Spalte angewendet werden soll:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Tool	Beschreibung
  Upload	Lädt eine Bilddatei von Ihrem lokalen Computer in die Galerie hoch und wendet sie dann als Hintergrundbild für die Spalte an.
  Select from Gallery	fordert Sie auf, ein vorhandenes Bild aus der Galerie als Hintergrundbild für die Spalte auszuwählen.
  {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 - Ändern Sie diese Einstellung, um festzulegen, wie das Hintergrundbild im Verhältnis zur Breite der Spalte 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 Spalte ab.
  Contain	Das Hintergrundbild ist auf die Breite des Inhaltsbereichs beschränkt.
  Auto	Wendet die standardmäßige Hintergrundgröße an, die im Stylesheet des aktuellen Designs angegeben ist.

• Background Position - Ändern Sie diese Einstellung, um den Ankerpunkt des Bildes in Bezug auf die Spalte zu bestimmen. Optionen: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center oder Bottom Right

• Background Attachment - Ändern Sie diese Einstellung, um festzulegen, 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 Hintergrundbild wird synchronisiert, um beim Bildlauf der Seite nach unten zu navigieren.
  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 - Wenn Sie das Hintergrundbild wiederholen möchten, um den Raum zu füllen, ändern Sie diese Einstellung Yes.

Aktualisieren Sie die Advanced-Einstellungen nach Bedarf.

• Um die horizontale Positionierung der Inhaltscontainer zu steuern, die der Spalte 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 Spaltenbehälters aus, wobei der angegebene Abstand berücksichtigt wird.
  Center	Richtet den Inhalts-Container in der Mitte des Spaltenbehälters aus, wobei der angegebene Abstand berücksichtigt wird.
  Right	Richtet den Inhalts-Container am rechten Rand des Spaltenbehälters aus, wobei der angegebene Abstand berücksichtigt wird.

• Legen Sie den Stil Border fest, der auf alle vier Seiten des Spaltencontainers 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:

  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.

• (Optional) Geben Sie die Namen von CSS classes aus dem aktuellen Stylesheet an, das auf den Spaltencontainer 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 Spalte angibt.

  Geben Sie jeden entsprechenden Wert in das Spaltenbehä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

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