Elemente - Text

Verwenden Sie den Inhaltstyp Text , um einen Textcontainer mit einem WYSIWYG-Editor ("What You See Is What You Get") in der Page Builder Bühne hinzuzufügen. Darüber hinaus können Sie dem Text über die Editor-Symbolleiste Links, Bilder, Variablen und Widgets hinzufügen.

Formatierter Text auf einem Banner

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.

Texteditor-Tools

Sie können auf den Texteditor direkt von der Bühne oder von einer Einstellungsseite aus zugreifen. Änderungen, die direkt an der Bühne vorgenommen werden, werden automatisch gespeichert. Weitere Informationen finden Sie unter Verwenden des Editors.

Text-Editor-Tool - TinyMCE

Textcontainer-Toolbox

Textcontainer-Toolbox

Tool
Symbol
Beschreibung
Verschieben
Symbol "Verschieben" {width="25"}
Verschiebt den Text-Container an eine andere gültige Position auf der Seite.
(Titel)
TEXT
Identifiziert den aktuellen Container als Textelement.
Einstellungen
Einstellungssymbol {width="25"}
Öffnet die Eigenschaften des Textcontainers im Bearbeitungsmodus.
Ausblenden
Symbol zum Ausblenden {width="25"}
Blendet den Textcontainer aus.
Anzeigen
Symbol "Anzeigen" {width="25"}
Zeigt den ausgeblendeten Textcontainer an.
Duplizieren
Symbol "Duplizieren" {width="25"}
Kopiert den Textcontainer.
Entfernen
Symbol "Entfernen" {width="25"}
Löscht den Text-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.

Text hinzufügen

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

    Ziehen eines Text-Platzhalters auf die Bühne {width="600" modal="regular"}

  2. Verwenden Sie den Editor, um Text nach Bedarf einzugeben und zu formatieren.

    Weitere Informationen finden Sie unter Verwenden des Editors.

    Texteditor mit Inhalt {width="600"}

Die Schaltfläche Link einfügen im Editor erleichtert das Hinzufügen eines Hyperlinks zu einem Bild in der Galerie. Sie kann jedoch auch verwendet werden, um einen Inline-Link im Text zu erstellen, wenn Sie die URL im Voraus haben. Im Gegensatz zur Schaltfläche Widget ist die Schaltfläche Link einfügen/bearbeiten nicht mit Seiten, Produkten oder Kategorien im Store integriert.

Informationen zum Erstellen eines Links für eine Telefonnummer oder E-Mail finden Sie unter Hinzufügen benutzerdefinierter Variablen.

  1. Navigieren Sie in der Storefront zu der Seite, die das Ziel des Links sein soll, und kopieren Sie die Link-Informationen.

    Sie können entweder die vollständig qualifizierte URL oder eine relative URL verwenden, die den Verweis auf Ihre Store-Domäne weglässt.

    Vollständige URL - https://mystore.com/women/tops-women/tees-women.html

    Relative URL - ../women/tops-women/tees-women.html

  2. Wählen Sie den Text im Editor-Bereich aus und klicken Sie in der Editor-Symbolleiste auf Link einfügen/bearbeiten ( Link-Schaltfläche einfügen/bearbeiten {width="20"} ).

    Hinzufügen eines Links zu formatiertem Text {width="500" modal="regular"}

  3. Geben Sie für "URL"den relativen Link ein, den Sie vorbereitet haben.

  4. Setzen Sie Target auf None.

    Mit dieser Einstellung wird die Seite im selben Browserfenster geöffnet, anstatt eine neue Registerkarte zu öffnen.

  5. Geben Sie für Title den Wert Shop Tees ein.

    Das Link-Attribut Title wird von einigen Browsern als QuickInfo verwendet.

  6. Um den Link zu speichern und zum Arbeitsbereich Page Builder zurückzukehren, klicken Sie auf OK.

    Link-Detail {width="500" modal="regular"}

Bild einfügen

  1. Platzieren Sie den Cursor in den Text, an dem Sie das Bild einfügen möchten.

  2. Klicken Sie in der Editor-Symbolleiste auf Bild einfügen/bearbeiten ( Schaltfläche Bild einfügen/bearbeiten {width="20"} ).

  3. Klicken Sie für "Source"auf das Suchsymbol, um den Medienspeicher zum Suchen und Auswählen eines Bildes zu verwenden.

  4. Geben Sie für "Image Description"beschreibenden Text für das Bild ein.

    Dieser Text füllt das Link-Attribut alt für das Bild und wird von einigen Browsern für die Barrierefreiheit verwendet.

  5. Geben Sie die Breite und Höhe Dimensions in Pixel für das Rendern des Bildes auf der Seite ein.

    Behalten Sie das Kontrollkästchen Constrain proportions bei, um das Seitenverhältnis für das Bild automatisch beizubehalten.

  6. Um das Bild einzufügen und dann zum Arbeitsbereich Page Builder zurückzukehren, klicken Sie auf OK.

Texteinstellungen ändern

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

    note note
    NOTE
    Da der Textcontainer in einem anderen Container eng verschachtelt ist, stellen Sie sicher, dass Sie über die richtige Toolbox verfügen.
  2. Aktualisieren Sie den Inhalt nach Bedarf.

  3. Aktualisieren Sie die Advanced-Einstellungen nach Bedarf.

    • Um die Positionierung des Texts innerhalb des übergeordneten Containers zu steuern, 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 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.
    • Legen Sie den Border -Stil fest, der auf alle vier Seiten des Textcontainers 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 Textcontainers 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
  4. Klicken Sie nach Abschluss des Vorgangs auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

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