Elemente - Text

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

Formatierter Text auf einem Banner {width="700"}

NOTE
Wenn Sie wesentliche Änderungen an Page Builder Inhalten vornehmen, wird empfohlen, die Admin-Sitzungslebensdauer) zu erhöhen um zu verhindern, dass die Sitzung während der Arbeit abläuft.

Texteditor-Tools

Sie können auf den Texteditor direkt über die Bühne oder über eine Einstellungsseite zugreifen. Direkt am Staging vorgenommene Änderungen werden automatisch gespeichert. Weitere Informationen finden Sie unter Verwenden des Editors.

Texteditor-Tool - TinyMCE {width="600"}

Toolbox für Text-Container

Toolbox für Text-Container {width="600"}

Tool
Symbol
Beschreibung
Verschieben
move icon {width="25"}
Verschiebt den Text-Container an eine andere gültige Position auf der Seite.
(Bezeichnung)
TEXT
Identifiziert den aktuellen Container als Textelement.
Einstellungen
Einstellungssymbol {width="25"}
Öffnet die Eigenschaften des Textcontainers im Bearbeitungsmodus.
Ausblenden
Symbol ausblenden {width="25"}
Blendet den Text-Container aus.
Anzeigen
Symbol anzeigen {width="25"}
Zeigt den ausgeblendeten Textcontainer an.
Duplikat
Symbol „Duplizieren“ {width="25"}
Erstellt eine Kopie des Textcontainers.
entfernen
Symbol entfernen {width="25"}
Löscht den Text-Container und seinen Inhalt aus der Phase.
NOTE
Ausgeblendete Elemente werden in der Datenbank gespeichert und sind für Kunden unsichtbar. 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 „unsichtbar“ angefordert werden, es sei denn, Sie entfernen sie aus dem Schritt.

Text hinzufügen

  1. Erweitern Sie im Page Builder Bedienfeld Elements und ziehen Sie einen Text Platzhalter in eine Zeile, Spalte oder einen Tab, die bzw. der auf dem Bühnenbild festgelegt ist.

    Ziehen eines Text-Platzhalters zum Schritt {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 vollqualifizierte URL oder eine relative URL verwenden, bei der der Verweis auf Ihre Store-Domain weggelassen wird.

    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 auf Link einfügen/bearbeiten (Schaltfläche Link einfügen/bearbeiten {width="20"} ) in der Editor-Symbolleiste.

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

  3. Geben Sie URL den relativen Link ein, den Sie vorbereitet haben.

  4. Legen Sie Target auf None fest.

    Bei dieser Einstellung wird die Seite im selben Browser-Fenster geöffnet, anstatt eine neue Registerkarte zu öffnen.

  5. Geben Sie Title Shop Tees ein.

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

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

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

Einfügen eines Bildes

  1. Platzieren Sie den Cursor an der Stelle, an der das Bild eingefügt werden soll.

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

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

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

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

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

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

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

Texteinstellungen ändern

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

    note note
    NOTE
    Da der Text-Container fest in einem anderen Container verschachtelt ist, stellen Sie sicher, dass Sie die richtige Toolbox haben.
  2. Aktualisieren Sie den Inhalt nach Bedarf.

  3. Aktualisieren Sie die Advanced ​nach Bedarf.

    • Um die Positionierung des Textes innerhalb des übergeordneten Containers zu steuern, 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 Liste am linken Rand des übergeordneten Containers aus, wobei ein etwaiger 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 alle angegebenen Auffüllungen berücksichtigt werden.
    • Legen Sie den Border fest, der auf alle vier Seiten des Text-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 Container angewendet werden sollen.

      Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

    • Geben Sie Werte in Pixeln für den 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 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
  4. Klicken Sie abschließend auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

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