Elemente - Text
Verwenden Sie die Text Inhaltstyp zum Hinzufügen eines Textcontainers mit einem WYSIWYG-Editor ("What You See Is What You Get") im Page Builder Schritt. Darüber hinaus können Sie Links, Bilder, variablesund Widgets zum Text in der Editor-Symbolleiste.
{width="700"}
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.
{width="600"}
Textcontainer-Toolbox
{width="600"}
Text hinzufügen
-
Im Page Builder Bedienfeld, erweitern Elements und ziehen Sie eine Text Platzhalter für eine Zeile, Spalte oder Registerkarte, die auf der Bühne festgelegt ist.
{width="600" modal="regular"}
-
Verwenden Sie den Editor, um Text nach Bedarf einzugeben und zu formatieren.
Weitere Informationen finden Sie unter Verwenden des Editors.
{width="600"}
Link erstellen
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-Adresse finden Sie unter Hinzufügen benutzerdefinierter Variablen.
-
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
-
Wählen Sie den Text im Editor aus und klicken Sie auf Link einfügen/bearbeiten ( {width="20"} ) in der Editor-Symbolleiste.
{width="500" modal="regular"}
-
Für URL, geben Sie den von Ihnen vorbereiteten relativen Link ein.
-
Satz Target nach
None
.Mit dieser Einstellung wird die Seite im selben Browserfenster geöffnet, anstatt eine neue Registerkarte zu öffnen.
-
Für Title, eingeben
Shop Tees
.Die
Title
Das Link-Attribut wird von einigen Browsern als QuickInfo verwendet. -
So speichern Sie den Link und kehren zur Page Builder Arbeitsbereich, klicken Sie auf OK.
{width="500" modal="regular"}
Bild einfügen
-
Platzieren Sie den Cursor in den Text, an dem Sie das Bild einfügen möchten.
-
Klicks Bild einfügen/bearbeiten ( {width="20"} ) in der Editor-Symbolleiste.
-
Für Source klicken Sie auf das Suchsymbol, um den Medienspeicher zum Suchen und Auswählen eines Bildes zu verwenden.
-
Für Image Description, geben Sie einen beschreibenden Text für das Bild ein.
Dieser Text füllt die
alt
Link-Attribut für das Bild und wird von einigen Browsern für die Barrierefreiheit verwendet. -
Breite und Höhe eingeben Dimensions, in Pixel, zum Rendern des Bildes auf der Seite.
Behalten Sie die Constrain proportions aktivieren, um das Seitenverhältnis für das Bild automatisch beizubehalten.
-
So fügen Sie das Bild ein und kehren dann zum Page Builder Arbeitsbereich, klicken Sie auf OK.
Texteinstellungen ändern
-
Bewegen Sie den Mauszeiger über den Textcontainer, um die Toolbox anzuzeigen und die Einstellungen ( {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. -
Aktualisieren Sie den Inhalt nach Bedarf.
-
Aktualisieren Sie die Advanced nach Bedarf.
-
Um die Positionierung des Texts innerhalb des übergeordneten Containers zu steuern, wählen Sie eine 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 die Border -Stil, 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
, füllen Sie die Randanzeigeoptionen 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, das auf den Container angewendet werden soll.
Trennen Sie mehrere Klassennamen durch ein Leerzeichen.
-
Geben Sie Werte in Pixel für die Margins and Padding 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
-
-
Wenn Sie fertig sind, klicken Sie auf Save , um die Einstellungen anzuwenden und zum Page Builder Arbeitsbereich.