Layout - Spalte

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

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

Die Spaltengruppe ist nun in zwei Spalten gleicher Breite unterteilt. Jede Spalte ist ein separater Container für Inhalte und verfügt über einen eigenen Satz von 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.

Durch die Positionierung von Inhalten im Raster wird der Inhalt konsistent ausgerichtet und die Seite auf Desktop- und Mobilgeräten korrekt gerendert. Weitere Informationen finden Sie Abschnitt „Erweiterte" der Page Builder.

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

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

Der Rahmen wird hervorgehoben und die 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 an die Ä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"} ) aus.

{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 gesamte Breite der Zeile oder des Stadiums erweitern soll:

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

• Scrollen Sie nach unten zum Abschnitt Advanced ​und legen Sie alle vier Padding ​auf 0 fest.

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

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

Klicken Sie auf Vollbildmodus schließen ( {width="20"} ) in der oberen rechten Ecke des Arbeitsbereichs und klicken Sie dann auf Save in der oberen rechten Ecke.

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

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

Ändern Sie die Appearance nach Bedarf.

• Wählen Sie die Ausrichtungseinstellung aus, die die Position der Spalte in Bezug auf den 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 oben im Container ausgerichtet.
  Centered	Die Spalte ist in der Mitte des Containers zentriert.
  Bottom Aligned	Die Spalte wird am unteren Rand ihres Containers ausgerichtet.

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

• Wenn Sie die Mindesthöhe festlegen, legen Sie die Vertical Alignment fest, um die Position von Inhalts-Containern 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"}	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 - Ändern Sie diese Einstellung, um festzulegen, wie das Hintergrundbild in Bezug auf die 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 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 Hintergrundbild wird synchronisiert und bewegt sich beim Bildlauf auf der Seite nach unten.
  Fixed	(Nicht für Mobilgeräte verfügbar) Das Hintergrundbild wird nicht verschoben, wenn der Container über das Bild scrollt, und es wird an der angegebenen Hintergrundposition fixiert.

• Background Repeat : Wenn Sie das Hintergrundbild wiederholen möchten, um den Bereich zu füllen, ändern Sie diese Einstellung Yes.

Aktualisieren Sie die Advanced ​nach Bedarf.

• Um die horizontale Positionierung von Inhalts-Containern zu steuern, die der Spalte hinzugefügt werden, wählen Sie ein 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 Spalten-Containers aus, wobei für jeden angegebenen Abstand berücksichtigt wird.
  Center	Richtet den Inhalts-Container in der Mitte des Spalten-Containers aus, wobei alle angegebenen Auffüllungen berücksichtigt werden.
  Right	Richtet den Inhalts-Container am rechten Rand des Spalten-Containers aus, wobei für jeden angegebenen Abstand berücksichtigt wird.

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

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

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

Klicken Sie abschließend auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.