Elemente - Text | Magento 2.4 Handbuch

Verwenden Sie den Inhaltstyp Text, um einen Textcontainer mit einem WYSIWYG-Editor (“What You See Is What You Get”) in den Page Builder Arbeitsbereich hinzuzufügen. Darüber hinaus können Sie Links, Bilder Variablen hinzufügen, sowie Widgets für den Text aus der Editor-Symbolleiste.

Formatierter Text auf einem Banner

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.

Texteditor-Tools

Sie können den Texteditor direkt vom Arbeitsbereich oder von einer Einstellungsseite aus aufrufen. Änderungen, die direkt auf dem Arbeitsbereich vorgenommen werden, werden automatisch gespeichert. Weitere Informationen finden Sie unter Verwenden des Editors.

Texteditor-Tool - TinyMCE 4_

Werkzeugkasten für Textcontainer

Textcontainer-Werkzeugkasten

Werkzeug	Icon	Beschreibung
Verschieben		Verschiebt den Textcontainer an eine andere gültige Stelle auf der Seite.
(Label)	TEXT	Identifiziert den aktuellen Container als ein Textelement.
Einstellungen		Öffnet die Eigenschaften des Textcontainers im Bearbeitungsmodus.
Ausblenden		Blendet den Textcontainer aus.
Anzeigen		Zeigt den versteckten Textcontainer.
Duplizieren		Erzeugt eine Kopie des Textcontainers.
Entfernen		Löscht den Textcontainer und seinen Inhalt vom Arbeitsbereich.

Text hinzufügen

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

Ziehen eines Textplatzhalters auf den Arbeitsbereich
Benutzen Sie den Editor, um Text einzugeben und zu formatieren, je nach Bedarf.

Weitere Informationen finden Sie unter Verwenden des Editors.

Texteditor mit Inhalt

Einen Link erstellen

Mit der Schaltfläche Link einfügen im Editor können Sie ganz einfach einen Hyperlink zu einem Bild in der Galerie hinzufügen. Sie kann aber auch verwendet werden, um einen Inline-Link im Text zu erstellen, vorausgesetzt, Sie haben die URL im Voraus. Anders als die Schaltfläche Widget ist die Schaltfläche Link einfügen/bearbeiten nicht in Seiten, Produkte oder Kategorien im Shop integriert.

Um einen Link für eine Telefonnummer oder E-Mail zu erstellen, siehe Hinzufügen von benutzerdefinierten Variablen.

Navigieren Sie im Frontend zu der Seite, die das Ziel für den Link sein soll, und kopieren Sie die Linkinformationen.

Sie können entweder die vollständig qualifizierte URL oder eine relative URL verwenden, bei der der Verweis auf die Domäne Ihres Shops weggelassen wird.

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

Markieren Sie den Text im Editorbereich und klicken Sie auf Link einfügen/bearbeiten () in der Symbolleiste des Editors.

Link in formatierten Text einfügen
Geben Sie für Url den relativen Link ein, den Sie vorbereitet haben.
Setzen Sie Target auf None.

Mit dieser Einstellung wird die Seite im selben Browserfenster geöffnet, anstatt eine neue Registerkarte zu öffnen.
Geben Sie für Titel Shop Tees ein.

Das Link-Attribut Titel wird von einigen Browsern als Tooltip verwendet.
Klicken Sie auf OK, um den Link zu speichern und zum Arbeitsbereich Page Builder zurückzukehren.

Link Detail

Ein Bild einfügen

Platzieren Sie den Cursor an der Stelle im Text, an der Sie das Bild einfügen möchten.
Klicken Sie auf Bild einfügen/bearbeiten () in der Symbolleiste des Editors.
Klicken Sie unter Quelle auf das Suchsymbol, um den Medienspeicher zum Auffinden und Auswählen eines Bildes zu verwenden.
Geben Sie unter Bildbeschreibung einen 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.
Geben Sie die Abmessungen in Pixel für die Darstellung des Bildes auf der Seite ein.

Lassen Sie das Kontrollkästchen Proportionen einschränken aktiviert, um das Seitenverhältnis für das Bild automatisch beizubehalten.
Klicken Sie auf OK, um das Bild einzufügen, und kehren Sie dann zum Arbeitsbereich Page Builder zurück.

Texteinstellungen ändern

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

Da der Textcontainer eng in einem anderen Container verschachtelt ist, stellen Sie sicher, dass Sie die richtige Toolbox haben.

Aktualisieren Sie den Inhalt nach Bedarf.

Aktualisieren Sie die Erweiterten Einstellungen nach Bedarf.

Wählen Sie eine Ausrichtung, um die Positionierung des Textes 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.

Legen Sie den Stil Rahmen fest, der auf alle vier Seiten des Textcontainers 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 eingezogene 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 Textcontainers 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

Klicken Sie abschließend auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.