Elemente - HTML-Code
Verwenden Sie den Inhaltstyp HTML-Code , um Snippets von HTML-, CSS- und JavaScript-Code in der Page Builder Bühne hinzuzufügen. Sie können beispielsweise eine benutzerdefinierte HTML hinzufügen und eine CSS-Klasse deklarieren, die auf ein Seitenelement angewendet werden kann. Sie können auch einen Codeausschnitt für ein Logo, eine Schaltfläche oder ein Banner hinzufügen, das Sie von einem Drittanbieter erhalten haben.
HTML-Code-Toolbox
HTML-Code hinzufügen
Das folgende Beispiel zeigt, wie Sie den Code für Google Font einbetten und benutzerdefinierte Überschriftenklassen deklarieren, die das aktuelle Stylesheet überschreiben.
Schritt 1: Auswählen einer Google-Schriftart
-
Besuchen Sie die Seite Google Fonts und wählen Sie die Schriftfamilie aus, die Sie verwenden möchten.
-
Kopieren Sie den generierten Code, der in den Abschnitt
<head>
der Seite eingebettet werden soll, und fügen Sie ihn vorübergehend in einen Texteditor ein.- Einbetten von Schriftcode
- CSS-Regel
-
Fügen Sie die Schriftartregel zu jeder Überschriftenklasse hinzu und schließen Sie die Überschriftenklassen in ein
<style>
-Tag ein.Dieser Code wird in Page Builder eingefügt.
code language-html <style> h1 {color: teal; font-family: 'Khand', sans-serif; } h2 {color: teal; font-family: 'Khand', sans-serif; } h3 {color: teal; font-family: 'Khand', sans-serif; } </style>
Schritt 2: Hinzufügen des Codes zur Seite
-
Wechseln Sie in der Seitenleiste Admin Ihres Stores zu Content > Elements>Pages.
-
Suchen Sie die Seite, auf der die Schrift verfügbar sein soll, und öffnen Sie sie im Bearbeitungsmodus.
-
Scrollen Sie nach unten und erweitern Sie den Abschnitt Content .
-
Erweitern Sie im Bedienfeld Page Builder den Eintrag Elements und ziehen Sie einen Platzhalter HTML Code auf eine Zeile, Spalte oder Registerkarte, die auf der Bühne festgelegt ist.
Verwenden Sie die rote Führungslinie, um die Trennlinie entweder vor oder nach einem anderen Inhaltscontainer in der Zeile, Spalte oder Registerkartengruppe zu positionieren.
{width="600" modal="regular"}
-
Bewegen Sie den Mauszeiger über den HTML-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ).
-
Fügen Sie in das Textfeld den von Ihnen vorbereiteten Code für Google-Schriftarten und Stildeklarationen ein.
Um das Lesen zu vereinfachen, können Sie einige Leerzeichen zum Einzug des Codes eingeben.
{width="500" modal="regular"}
-
Aktualisieren Sie die restlichen Einstellungen nach Bedarf (weitere Informationen finden Sie unter HTML-Codeeinstellungen ändern ).
-
Klicken Sie oben rechts auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.
Die neue Schriftart wird gerendert, wenn die Seite über einen Browser angezeigt wird.
Schritt 3: Vorschau der Seite anzeigen
-
Setzen Sie im Abschnitt Currently Active Enable Page auf
Yes
.{width="600" modal="regular"}
-
Klicken Sie in der oberen rechten Ecke auf den Pfeil Save und wählen Sie Save & Close.
-
Suchen Sie die Seite im Raster und wählen Sie View in der Spalte Actions aus.
{width="700" modal="regular"}
HTML-Codeeinstellungen ändern html-settings
-
Bewegen Sie den Mauszeiger über den HTML-Container, um die Toolbox anzuzeigen, und wählen Sie das Symbol Einstellungen ( {width="20"} ).
-
Bearbeiten Sie den Code im Textfeld nach Bedarf.
HTML-, CSS- und JavaScript-Code werden unterstützt. Hier können Code-Snippets eingegeben werden, die zum Abschnitt "
<head>
"der Seite gehören.Der Editor bietet außerdem Schaltflächen zum Einfügen von Sonderelementen in den Code:
table 0-row-2 1-row-2 2-row-2 3-row-2 Schaltfläche Beschreibung Widget einfügen… Klicken Sie auf , um ein Widget an der Cursorposition im Textfeld HTML einzufügen. Bild einfügen… Klicken Sie auf , um ein hochgeladenes Bild oder ein Bild aus der Galerie an der Cursorposition im Textfeld HTML einzufügen. Variable einfügen… Klicken Sie auf , um eine Variable an der Cursorposition im Textfeld HTML einzufügen. -
Aktualisieren Sie die Advanced-Einstellungen nach Bedarf.
-
Um die Positionierung des Codes 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 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. Im folgenden Beispiel werden die Optionen so eingestellt, dass eine mittlere Ausrichtung für den gerenderten Codeblock verwendet wird.
{width="600" modal="regular"}
-
Legen Sie den Border -Stil fest, der auf alle vier Seiten des Code-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 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 Code-Containers zu bestimmen.
Geben Sie die entsprechenden Werte in das Diagramm ein.
table 0-row-2 1-row-2 2-row-2 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
-