Layout - Säule

Verwenden Sie den Inhaltstyp Column, um im Page Builder Arbeitsbereich eine Seite in mehrere Spalten zu unterteilen. Wenn Sie eine Spalte zu einer Zeile oder Registerkarte oder direkt zum Arbeitsbereich hinzufügen, wird die Spaltengruppe zunächst in zwei Spalten mit gleicher Breite unterteilt. Sie können je nach Bedarf Spalten hinzufügen oder entfernen. Die Größe einer Spalte kann durch Ziehen des Randes zwischen zwei Spalten geändert werden. Die Breite der nächsten Spalte wird so angepasst, dass sie den verfügbaren Platz innerhalb der Zeile, der Registerkarte oder des Arbeitsbereich ausfüllt. Eine einzelne Spalte erstreckt sich über die gesamte Breite des Arbeitsbereich oder ihres Containers.

Hinzufügen einer Spalte

Wenn Sie im Arbeitsbereich Page Builder arbeiten, werden Ihre Inhaltsänderungen erst dann vollständig gespeichert, wenn Sie auf das Symbol Vollbild schließen () in der oberen rechten Ecke des Arbeitsbereichs klicken und dann auf Speichern in der oberen rechten Ecke für die CMS-Seite, die Produktseite, die Kategorieseite, den Block oder den dynamischen Block.

Wenn Sie umfangreiche Änderungen am Inhalt von Page Builder vornehmen, empfehlen wir Ihnen, die Admin Session Lifetime zu erhöhen, um zu verhindern, dass die Sitzung während Ihrer Arbeit abläuft.

Werkzeugkasten für Spalten

Jede Spalte hat eine Toolbox mit Optionen, die angezeigt wird, wenn Sie den Mauszeiger über den Container bewegen.

Werkzeug Symbol Beschreibung
Bewegen Verschiebt die Spalte und ihren Inhalt an eine andere Position im Verhältnis zu anderen Spalten.
(Label) Spalte Identifiziert den aktuellen Container als Spalte. Bewegen Sie den Mauszeiger über den Spaltencontainer, um die Toolbox anzuzeigen.
Einstellungen Öffnet die Seite Spalte bearbeiten, wo Sie die Eigenschaften des Containers ändern können.
Duplizieren Erzeugt eine Kopie der aktuellen Spalte.
Entfernen Löscht die aktuelle Spalte und deren Inhalt.

Spaltenraster

Das grid stellt sicher, dass der Inhalt in einer Spalte konsistent ausgerichtet ist und hilft, die Seite sowohl auf dem Desktop als auch auf mobilen Geräten korrekt darzustellen. Weitere Informationen finden Sie im Abschnitt Advanced Content Tools der Konfiguration Page Builder.

Grid-Unterteilungen in einer Zeile mit einer Spalte

In dem folgenden zweispaltigen Beispiel geben die Zahlen in Klammern (6 /12) am oberen Rand jedes Spaltencontainers die Anzahl der Rasterunterteilungen in jeder Spalte und die Gesamtzahl der Unterteilungen an. Dies bedeutet, dass die Spalte die Breite von sechs der insgesamt zwölf Gittereinheiten hat.

Rastereinteilung in einer Zeile mit zwei Spalten

Hinzufügen einer Spalte

  1. Ziehen Sie im Page Builder Panel unter Layout eine Spalte auf den Arbeitsbereich.

    Ziehen einer Spalte auf den Arbeitsbereich

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

    Zwei gleiche Spalten

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

    Die Positionierung des Inhalts auf dem Raster hilft, den Inhalt konsistent auszurichten und die Seite sowohl auf dem Desktop als auch auf mobilen Geräten korrekt darzustellen. Weitere Informationen finden Sie im Abschnitt Advanced Content Tools der Konfiguration von Page Builder.

    Rasterunterteilungen auf zwei Spalten_

Größe einer Spalte ändern

  1. Bewegen Sie den Mauszeiger über den Rand zwischen zwei Spalten.

    Der Rand wird hervorgehoben und die Toolbox für die ausgewählte Spalte erscheint.

    Hervorgehobener Rand zwischen zwei Spalten

  2. Halten Sie die Maustaste gedrückt, um das Raster einzublenden, und ziehen Sie den Rahmen an eine neue Position im Raster.

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

    Geänderte Spalten

Entfernen Sie eine Spalte

  1. Bewegen Sie den Mauszeiger über die Spalte, die Sie entfernen möchten, um die Toolbox anzuzeigen, und wählen Sie das Symbol Remove ( ).

    Spalten-Werkzeugkasten

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

    Um den Vorgang in Zukunft zu beschleunigen, können Sie den Bestätigungsschritt überspringen, indem Sie das Kontrollkästchen Nicht mehr anzeigen aktivieren.

    Die Spaltengruppe hat nun eine einzelne Spalte (12/12) und ein Gitter. Da das Gitter nur für Spalten verfügbar ist, können Sie diese Technik verwenden, um das Gitter anzuzeigen.

    Einzelne Spalte mit Raster

  3. Wenn Sie möchten, dass die Spaltengruppe die verbleibende Spalte auf die gesamte Breite der Zeile oder Arbeitsbereich ausdehnt:

    • Bewegen Sie den Mauszeiger über die Spalte, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen () aus.

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

      Null-Padding verwenden

    • Klicken Sie in der oberen rechten Ecke auf Speichern, um die Seite Spalte bearbeiten zu schließen.

  4. Klicken Sie auf das Symbol Vollbild schließen () in der oberen rechten Ecke des Arbeitsbereichs und klicken Sie dann auf Speichern in der oberen rechten Ecke.

Spalteneinstellungen ändern

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

    Spalten-Werkzeugkasten

  2. Ändern Sie die Erscheinungsbild-Einstellungen nach Bedarf.

    • Wählen Sie eine Ausrichtungseinstellung, um die Position der Spalte im Verhältnis zu ihrem Container festzulegen.

      Volle Höhe Die Spalte erstreckt sich über die gesamte Höhe des Containers.
      Oben ausgerichtet Die Spalte wird am oberen Rand ihres Containers ausgerichtet.
      Zentriert Die Spalte wird in der Mitte des Containers zentriert.
      Unten ausgerichtet Die Spalte wird am unteren Rand ihres Containers ausgerichtet.
    • Geben Sie bei Bedarf die Mindesthöhe für die Spalte ein. Sie können die Mindesthöhe zum Beispiel so festlegen, dass sie der Höhe eines Hintergrundbildes entspricht.

    • Wenn Sie die Mindesthöhe festlegen, legen Sie die Vertikale Ausrichtung fest, um die Position der Inhaltscontainer zu steuern, die der Spalte hinzugefügt werden (Oben, Mitte oder Unten).

  3. Ändern Sie den Hintergrund für den Spalteninhalt.

    • Hintergrundfarbe - 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. Damit wird die Hintergrundfarbe der Spalte festgelegt.

    • Hintergrundbild - Verwenden Sie bei Bedarf die bereitgestellten Werkzeuge, um ein Hintergrundbild für die Spalte zu wählen:

      Hochladen Lädt eine Bilddatei von Ihrem lokalen Computer in die Galerie hoch und wendet sie dann als Hintergrundbild für die Spalte an.
      Aus Galerie auswählen Fordert Sie auf, ein vorhandenes Bild aus der Galerie als Hintergrundbild für die Spalte zu wählen.
      Kamerasymbol 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 - Ändern Sie diese Einstellung, um festzulegen, wie das Hintergrundbild im Verhältnis zur Breite der Spalte skaliert wird:

      Abdeckung Das Hintergrundbild deckt die gesamte Breite der Spalte ab.
      Umfassen Das Hintergrundbild ist auf die Breite des Inhaltsbereichs begrenzt.
      Automatisch Wendet die Standard-Hintergrundgröße an, die in der Stilvorlage des aktuellen Themas angegeben ist.
    • Hintergrundposition - Ändern Sie diese Einstellung, um den Ankerpunkt des Bildes in Bezug auf die Spalte zu bestimmen (Oben links, Oben Mitte, Oben rechts, Mitte links, Mitte, Mitte rechts, Unten links, Unten Mitte oder Unten rechts).

    • Hintergrundbefestigung - Ändern Sie diese Einstellung, um festzulegen, wie sich das Hintergrundbild in Bezug auf die scrollende Seite bewegt:

      Scrollen Das Hintergrundbild wird synchronisiert, um sich beim Scrollen der Seite nach unten zu bewegen.
      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.
    • Hintergrundwiederholung - Wenn Sie das Hintergrundbild wiederholen möchten, um den Raum zu füllen, ändern Sie diese Einstellung Ja.

  4. Aktualisieren Sie die Erweiterten Einstellungen nach Bedarf.

    • Wählen Sie eine Ausrichtung, um die horizontale Positionierung von Inhaltscontainern zu steuern, die der Spalte 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 Spaltencontainers aus, unter Berücksichtigung der angegebenen Polsterung.
      Zentriert Richtet den Inhaltscontainer in der Mitte des Spaltencontainers aus, unter Berücksichtigung der angegebenen Füllung.
      Rechts Richtet den Inhaltscontainer entlang des rechten Randes des Spaltencontainers aus, unter Berücksichtigung der angegebenen Füllung.
    • Legen Sie den Stil Border fest, der auf alle vier Seiten des Spaltencontainers 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.

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

    • (Optional) Geben Sie die Namen der CSS-Klassen aus der aktuellen Stilvorlage an, die auf den Spaltencontainer 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 Spalte anzugeben.

      Geben Sie die entsprechenden Werte in das Diagramm des Spaltencontainers 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
  5. Klicken Sie abschließend auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.