Elemente - Trennlinie

Verwenden Sie den Inhaltstyp Divider , um eine Regel als visuellen Umbruch zwischen Inhaltsabschnitten in der Page Builder Phase hinzuzufügen. Sie können die Linienfarbe, die Dicke und die Breite des Trennzeichens angeben. Sie können auch die Ausrichtung, die Ränder und den Abstand sowie das Format des Containerrahmens steuern. Standardmäßig ist der Divider eine Haarregel, die die gesamte Breite des Containers erweitert, wobei der Abstand berücksichtigt wird.

Standardunterteilung in einem Container ohne Rahmen

Obwohl die meisten Divider-Container unsichtbar sind, zeigt das folgende Beispiel den Container mit einem roten gestrichelten Rand, sodass Sie die Beziehung zwischen dem Divider, dem Abstand und dem Container sehen können. Sie können den Abstand am oberen und unteren Rand der Trennlinie anpassen, um den Abstand zwischen Elementen zu steuern.

Trennlinie mit Abstand im Container mit gestricheltem Rahmen

NOTE
Wenn Sie wesentliche Änderungen am Inhalt von Page Builder vornehmen, wird empfohlen, die Lebensdauer der Admin-Sitzung zu erhöhen, um zu verhindern, dass die Sitzung während der Arbeit abläuft.

Trennlinien-Toolbox

Tool
Symbol
Beschreibung
Verschieben
Symbol "Verschieben" {width="25"}
Verschiebt den Divider-Container an eine andere gültige Position auf der Seite.
(Titel)
DIVIDER
Identifiziert den aktuellen Container als Trennelement.
Einstellungen
Einstellungssymbol {width="25"}
Öffnet die Seite Divider bearbeiten , auf der Sie die Eigenschaften des Dividers und seines Containers ändern können.
Ausblenden
Symbol zum Ausblenden {width="25"}
Blendet den Trenncontainer aus.
Anzeigen
Symbol "Anzeigen" {width="25"}
Zeigt den ausgeblendeten Divider-Container an.
Duplizieren
Symbol "Duplizieren" {width="25"}
Kopiert den Divider-Container.
Entfernen
Symbol "Entfernen" {width="25"}
Löscht den Divider-Container und seinen Inhalt aus der Bühne.
NOTE
Ausgeblendete Elemente werden in der Datenbank gespeichert und sind für Kunden nicht sichtbar. Diese Elemente sind jedoch für Suchmaschinen und andere Bots sichtbar, die Ihre Site durchsuchen. Sie werden auch als Teil des Inhalts zurückgegeben, wenn sie über einen API-Aufruf mit dem Attribut "Unsichtbarkeit"angefordert werden, es sei denn, Sie entfernen sie aus der Bühne.

Divider hinzufügen

  1. Erweitern Sie im Bedienfeld Page Builder den Eintrag Elements und ziehen Sie einen Platzhalter Divider auf eine Zeile, Spalte oder Registerkarte, die auf der Bühne festgelegt ist.

    Verwenden Sie die rote Führungslinie für die Referenz, wenn Sie die Trennlinie entweder vor oder nach einem anderen Inhaltscontainer auf der Bühne positionieren.

    Ziehen einer Trennlinie auf die Bühne {width="600" modal="regular"}

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

    Trennen von Textabteilungen {width="500" modal="regular"}

  2. Gehen Sie wie folgt vor, um die Einstellungen der neuen Trennlinie festzulegen.

Dividereinstellungen ändern

  1. Bewegen Sie den Mauszeiger über den Divider-Container, um die Toolbox anzuzeigen und das Symbol Einstellungen ( Einstellungssymbol {width="20"} ) zu wählen.

    Trennlinien-Toolbox {width="500" modal="regular"}

  2. Ändern Sie den Divider Line Color mit einer der folgenden Methoden:

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

    Klicken Sie nach Abschluss des Vorgangs auf Apply.

    Festlegen der Linienfarbe {width="600" modal="regular"}

  3. Geben Sie den Wert Line Thickness in Pixel ein.

  4. Um die Maßeinheit anzugeben, geben Sie den Wert Line Width gefolgt von px oder % ein.

    Festlegen der Linienfarbe, -dicke und -breite {width="600" modal="regular"}

  5. Aktualisieren Sie die Advanced-Einstellungen nach Bedarf.

    • Um die Positionierung des Trennzeichens innerhalb des übergeordneten Containers zu steuern, wählen Sie den Wert 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 Liste am linken Rand des übergeordneten Containers aus, wobei der angegebene Abstand berücksichtigt wird.
      Center Richtet die Liste in der Mitte des übergeordneten Containers aus, wobei der angegebene Abstand berücksichtigt wird.
      Right Richtet den Block am rechten Rand des übergeordneten Containers aus, wobei der angegebene Abstand berücksichtigt wird.

      Im folgenden Beispiel werden die Optionen so eingestellt, dass eine mittlere Ausrichtung für die Trennlinie verwendet wird.

      Trennlinie mit Mittelausrichtung {width="600" modal="regular"}

    • Legen Sie den Border -Stil fest, der auf alle vier Seiten des Divider-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 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 Container angewendet werden soll.

      Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

    • Geben Sie Werte in Pixel für den Wert Margins and Padding ein, um die äußeren Ränder und den inneren Abstand des Divider-Containers zu bestimmen.

      Geben Sie die entsprechenden Werte in das Diagramm 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
  6. Klicken Sie nach Abschluss des Vorgangs auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

    In einer Zeile zentrierte Trennlinie {width="500" modal="regular"}

Divider duplizieren

Für einen formatierten Divider mit bestimmten Einstellungen ist es effizienter, ein Duplikat zu erstellen, anstatt von vorn mit einem neuen Platzhalter zu beginnen.

  1. Bewegen Sie den Mauszeiger über den Divider-Container, um die Werkzeugleiste anzuzeigen, und wählen Sie das Symbol Duplizieren ( Duplizieren-Symbol {width="20"} ).

    Der doppelte Divider-Container wird direkt unter dem Original angezeigt.

    Duplizierter Divider {width="500" modal="regular"}

  2. Bewegen Sie den Mauszeiger über den neuen Divider-Container, um die Toolbox anzuzeigen und das Symbol Verschieben ( Verschieben-Symbol {width="20"} ) zu wählen.

    Verschieben eines Trennzeichens {width="500" modal="regular"}

  3. Wählen Sie die Trennlinie aus und ziehen Sie sie, bis die rote Führungslinie die neue Position markiert.

    Die oberen und unteren Ränder jedes Containers werden als gestrichelte Linien angezeigt, während der Divider verschoben wird.

    Verschieben des duplizierten Trennzeichens in Position {width="500" modal="regular"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d