Elemente - Teiler

Verwenden Sie den Inhaltstyp Divider, um einen Teiler als visuelle Unterbrechung zwischen Abschnitten des Inhalts im Page Builder Arbeitsbereich hinzuzufügen. Sie können die Linienfarbe, -dicke und -breite der Trennlinie festlegen. Sie können auch die Ausrichtung, die Ränder und die Auffüllung sowie das Format des Container-Rahmens festlegen. Standardmäßig ist die Trennlinie eine Haarlinie, die sich über die gesamte Breite des Containers erstreckt, wobei eine Auffüllung berücksichtigt wird.

Standardtrennlinie in einem Container ohne Rahmen

Obwohl die meisten Trennlinien-Container unsichtbar sind, zeigt das folgende Beispiel den Container mit einem rot gestrichelten Rahmen an, damit Sie die Beziehung zwischen der Trennlinie, der Füllung und dem Container sehen können. Sie können die Auffüllung am oberen und unteren Rand des Teilers anpassen, um die Abstände zwischen den Elementen zu steuern.

Teiler mit Füllung im Container mit gestricheltem Rahmen

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.

Teiler-Toolbox

Werkzeug Symbol Beschreibung
Verschieben Verschiebt den Teiler-Container an eine andere gültige Stelle auf der Seite.
(Label) DIVIDER Kennzeichnet den aktuellen Container als Teilerelement.
Einstellungen Öffnet die Seite Teiler bearbeiten, wo Sie die Eigenschaften des Teilers und seines Containers ändern können.
Ausblenden Blendet den Teiler-Container aus.
Anzeigen Zeigt den versteckten Teiler-Container.
Duplizieren Sie Erzeugt eine Kopie des Teiler-Containers.
Entfernen Löscht den Teiler-Container und seinen Inhalt vom Arbeitsbereich.

Einen Divider hinzufügen

  1. Erweitern Sie im Bedienfeld Page Builder Elemente und ziehen Sie einen Teiler-Platzhalter in eine Zeile, Spalte oder Registerkarte auf dem Arbeitsbereich.

    Verwenden Sie die rote Hilfslinie als Referenz, wenn Sie den Teiler entweder vor oder nach einem anderen Inhaltscontainer auf dem Arbeitsbereich positionieren.

    Ziehen eines Teilers auf den Arbeitsbereich

    Im folgenden Beispiel markiert die Trennlinie den Beginn eines neuen Textabschnitts.

    Teiler zur Trennung von Textabschnitten

  2. Gehen Sie wie folgt vor, um die Einstellungen für die neue Trennlinie festzulegen.

Ändern Sie die Einstellungen der Trennlinie

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

    Teiler-Werkzeugkasten

  2. Ändern Sie die Linienfarbe der Trennlinie mit einer der folgenden Methoden:

    • Geben Sie einen gültigen HTML-Farbnamen ein. Zum Beispiel: Teal.
    • Geben Sie den hexadezimalen Farbwert ein. Beispiel: #008080.

    Wenn Sie fertig sind, klicken Sie auf Übernehmen.

    Einstellung der Linienfarbe

  3. Geben Sie die Linienstärke in Pixeln ein.

  4. Geben Sie die Linienbreite gefolgt von entweder px oder % ein, um die Maßeinheit anzugeben.

    Einstellung von Linienfarbe, -dicke und -breite

  5. Aktualisieren Sie die Erweiterten Einstellungen nach Bedarf.

    • Wählen Sie die Ausrichtung, um die Positionierung der Trennlinie innerhalb des übergeordneten Containers zu steuern:

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

      Im folgenden Beispiel sind die Optionen so eingestellt, dass der Teiler mittig ausgerichtet wird.

      Teiler mit zentrierter Ausrichtung

    • Legen Sie den Stil Rahmen fest, der auf alle vier Seiten des Trenncontainers 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 Container 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 des Trenncontainers zu bestimmen.

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

    Teiler zentriert in einer Reihe_

Teiler duplizieren

Bei einem formatierten Teiler mit bestimmten Einstellungen ist es effizienter, ein Duplikat zu erstellen, als mit einem neuen Platzhalter zu beginnen.

  1. Bewegen Sie den Mauszeiger über den Teiler-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Duplizieren ().

    Der duplizierte Trenncontainer wird direkt unter dem Original angezeigt.

    Duplizierter Teiler

  2. Bewegen Sie den Mauszeiger über den neuen Teiler-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Verschieben ().

    Verschieben eines Teilers

  3. Wählen Sie den Teiler aus und ziehen Sie ihn, bis die rote Hilfslinie die neue Position markiert.

    Die oberen und unteren Ränder jedes Containers erscheinen als gestrichelte Linien, während die Trennlinie verschoben wird.

    Verschieben des duplizierten Teilers in die richtige Position