Elemente - HTML-Code | Magento 2.4 Handbuch

Verwenden Sie den Inhaltstyp HTML-Code, um HTML-, CSS- und JavaScript-Codefragmente im Page Builder Arbeitsbereich hinzuzufügen. Sie können zum Beispiel benutzerdefinierten HTML-Code hinzufügen, eine CSS-Klasse deklarieren, die auf ein Element auf der Seite angewendet werden kann, oder einen Codeschnipsel für ein Logo, eine Schaltfläche oder ein Banner hinzufügen, das Sie von einem Drittanbieter erhalten haben.

HTML-Code-Toolbox

HTML-Code-Toolbox

Werkzeug	Symbol	Beschreibung
Verschieben		Verschiebt den HTML-Code-Container an eine andere gültige Stelle auf der Seite.
Einstellungen		Öffnet die Seite HTML-Code bearbeiten, wo Sie die Eigenschaften des Containers ändern können.
Ausblenden		Blendet den HTML-Code-Container aus.
Anzeigen		Zeigt den versteckten HTML-Code-Container.
Duplizieren Sie		Erzeugt eine Kopie des HTML-Code-Containers.
Entfernen Sie		Löscht den HTML-Code-Container und seinen Inhalt vom Arbeitsbereich.

HTML-Code hinzufügen

Das folgende Beispiel zeigt, wie man Google Font Code einbettet und benutzerdefinierte Überschriftenklassen deklariert, die das aktuelle Stylesheet außer Kraft setzen.

Schritt 1: Wählen Sie eine Google-Schriftart

Besuchen Sie die Website Google Fonts und wählen Sie die Schriftfamilie aus, die Sie verwenden möchten.

Google Fonts-Website
Kopieren Sie den generierten Code, der in den<head>Abschnitt</head> <head> der Seite</head>eingefügt werden soll<head>, und fügen Sie ihn vorübergehend in einen Texteditor ein.
- Code der eingebetteten Schriftart
- CSS-Regel
Fügen Sie die Regel font-family zu jeder Überschriftenklasse hinzu, indem Sie die Überschriftenklassen in ein <style> Tag</style>einschließen

Dies ist der Code, der in Page Builder eingefügt wird.

  <style>
      h1 {Farbe: teal; font-family: 'Khand', sans-serif; }
      h2 {Farbe: teal; Schriftart-Familie: 'Khand', sans-serif; }
      h3 {Farbe: teal; Schriftart-Familie: 'Khand', sans-serif; }
  </style>

Schritt 2: Fügen Sie den Code in die Seite ein

Gehen Sie in der Seitenleiste Admin Ihres Shops auf Inhalt > Elemente > Seiten.
Suchen Sie die Seite, auf der die Schriftart verfügbar sein soll, und öffnen Sie sie im Bearbeitungsmodus.
Scrollen Sie nach unten und erweitern Sie den Abschnitt Inhalt.
Erweitern Sie im Bereich Page Builder Elemente und ziehen Sie einen HTML-Code-Platzhalter in eine Zeile, Spalte oder Registerkarte auf dem Arbeitsbereich.

Verwenden Sie die rote Hilfslinie, um den Teiler entweder vor oder nach einem anderen Inhaltscontainer in der Zeile, Spalte oder dem Registersatz zu positionieren.

Ziehen eines HTML-Code-Platzhalters auf den Arbeitsbereich
Bewegen Sie den Mauszeiger über den HTML-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Settings ( ), aus.
Fügen Sie in das Textfeld den von Ihnen vorbereiteten Code für die Einbettung von Google Fonts und die Stildeklarationen ein.

Um die Lesbarkeit zu verbessern, können Sie den Code mit ein paar Leerzeichen einrücken.

HTML-Code und Stile_
Aktualisieren Sie die übrigen Einstellungen nach Bedarf (siehe HTML-Code-Einstellungen ändern für Details).
Klicken Sie in der oberen rechten Ecke auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Die neue Schriftart wird gerendert, wenn die Seite in einem Browser angezeigt wird.

Schritt 3: Vorschau der Seite

Setzen Sie im Abschnitt Aktuell aktiv Seite aktivieren auf Ja.

Aktivierung der Seite
Klicken Sie in der oberen rechten Ecke auf den Pfeil Speichern und wählen Sie Speichern && Schließen.
Suchen Sie die Seite im Raster und wählen Sie Anzeigen in der Spalte Aktionen.

Überprüfen Sie die Seitenüberschriften mit der neuen Schriftfamilie

HTML-Code-Einstellungen ändern

Bewegen Sie den Mauszeiger über den HTML-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ().

Bearbeiten Sie im Textfeld den Code nach Bedarf.

Dies unterstützt HTML-, CSS- und JavaScript-Code. Codefragmente, die in den<head>Abschnitt</head> <head> der Seite</head>gehören<head>, können hier eingegeben werden.

Der Editor bietet auch Schaltflächen zum Einfügen spezieller Elemente in den Code:

Widget einfügen…	Klicken Sie darauf, um ein Widget an der Position des Cursors im HTML-Textfeld einzufügen.
Bild einfügen…	Klicken Sie hier, um ein hochgeladenes Bild oder ein Bild aus der Galerie an der Position des Cursors in das HTML-Textfeld einzufügen.
Variable einfügen…	Klicken Sie hier, um eine Variable an der Position des Cursors in das HTML-Textfeld einzufügen.

Aktualisieren Sie die Erweiterten Einstellungen nach Bedarf.

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

Im folgenden Beispiel sind die Optionen so eingestellt, dass der gerenderte Codeblock mittig ausgerichtet wird.

Teiler mit zentrierter Ausrichtung

Legen Sie den Stil Border fest, der auf alle vier Seiten des Code-Containers 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 versenkte 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 Code-Containers 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