Elements - HTML-Code
Verwenden Sie den Inhaltstyp HTML-Code, um HTML-, CSS- und JavaScript-Code-Ausschnitte in der Page Builder stage“. Wenn Sie beispielsweise benutzerdefinierte HTML hinzufügen möchten, deklarieren Sie eine CSS-Klasse, die auf ein Seitenelement angewendet werden kann. Sie können auch ein Code-Fragment für ein Logo, eine Schaltfläche oder ein Banner hinzufügen, das bzw. das Sie von einem Drittanbieter erhalten haben.
HTML-Code-Toolbox






HTML-Code hinzufügen
Das folgende Beispiel zeigt, wie Sie Google Font-Code einbetten und benutzerdefinierte Überschriftenklassen deklarieren, die das aktuelle Stylesheet überschreiben.
Schritt 1: Google-Schriftart auswählen
-
Besuchen Sie die Google Fonts-Site und wählen Sie die Schriftfamilie aus, die Sie verwenden möchten.
-
Kopieren Sie den generierten Code, der in den
<head>
Abschnitt der Seite eingebettet werden soll, und fügen Sie ihn vorübergehend in einen Texteditor ein.- Schriftart-Code einbetten
- CSS-Regel
-
Fügen Sie die Schriftfamilienregel zu jeder Überschriftenklasse hinzu, indem Sie die Überschriftenklassen in ein
<style>
Tag einschließen.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
-
Navigieren Sie in Admin-Seitenleiste Ihres Stores zu Content > Elements>Pages.
-
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 Content .
-
Erweitern Sie im Page Builder Bedienfeld Elements und ziehen Sie einen HTML Code Platzhalter in eine Zeile, Spalte oder einen Tab, die bzw. der auf dem Bühnenbild festgelegt ist.
Verwenden Sie die rote Richtlinie, um die Trennlinie entweder vor oder nach einem anderen Inhalts-Container in der Zeile, Spalte oder im Registerkartensatz zu positionieren.
-
Bewegen Sie den Mauszeiger über den HTML-Container, um die Toolbox anzuzeigen, und wählen das Symbol Settings (
-
Fügen Sie den von Ihnen vorbereiteten Einbettungs-Google-Schriftarten-Code und die Stildeklarationen in das Textfeld ein.
Um die Lesbarkeit zu vereinfachen, können Sie einige Leerzeichen eingeben, um den Code einzuziehen.
-
Aktualisieren Sie die verbleibenden Einstellungen nach Bedarf (siehe Ändern von HTML-Code-Einstellungen).
-
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 aufgerufen wird.
Schritt 3: Vorschau der Seite
-
Legen Sie im Currently Active Abschnitt Enable Page auf
Yes
fest. -
Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.
-
Suchen Sie die Seite im Raster und wählen Sie View in der Spalte Actions aus.
HTML-Code-Einstellungen ändern html-settings
-
Bewegen Sie den Mauszeiger über den HTML-Container, um die Toolbox anzuzeigen, und wählen das Symbol Settings
-
Bearbeiten Sie den Code im Textfeld nach Bedarf.
HTML-, CSS- und JavaScript-Code werden unterstützt. Code-Snippets, die zum Abschnitt
<head>
der Seite gehören, können hier eingegeben werden.Der Editor bietet außerdem Schaltflächen zum Einfügen spezieller Elemente in den Code:
table 0-row-2 1-row-2 2-row-2 3-row-2 Schaltfläche Beschreibung Widget einfügen… Klicken Sie, um ein Widget an der Cursorposition in das Textfeld "HTML" einzufügen. Bild einfügen… Klicken Sie hier, um ein hochgeladenes Bild oder ein Bild aus der Galerie an der Cursorposition im HTML-Textfeld einzufügen. Variable einfügen… Klicken Sie, um eine Variable an der Cursorposition im Textfeld "HTML" einzufügen. -
Aktualisieren Sie die Advanced nach Bedarf.
-
Um die Positionierung des Codes 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 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. Im folgenden Beispiel werden die Optionen so festgelegt, dass für den gerenderten Code-Block eine Mittelausrichtung verwendet wird.
-
Legen Sie den Border fest, der auf alle vier Seiten des Code-Containers angewendet werden soll:
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 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 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 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
-