Elemente - HTML-Code

Verwenden Sie die HTML-Code Inhaltstyp zum Hinzufügen von Snippets von HTML-, CSS- und JavaScript-Code im Page Builder Schritt. 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-Toolbox

Tool
Symbol
Beschreibung
Verschieben
Symbol Verschieben {width="25"}
Verschiebt den HTML-Code-Container an eine andere gültige Position auf der Seite.
Einstellungen
Symbol Einstellungen {width="25"}
Öffnet die Seite HTML-Code bearbeiten , auf der Sie die Eigenschaften des Containers ändern können.
Ausblenden
Symbol "Ausblenden" {width="25"}
Blendet den HTML-Code-Container aus.
Anzeigen
Symbol "Anzeigen" {width="25"}
Zeigt den ausgeblendeten HTML-Code-Container an.
Duplizieren
Symbol "Duplizieren" {width="25"}
Kopiert den HTML-Code-Container.
Entfernen
Symbol "Entfernen" {width="25"}
Löscht den HTML-Code-Container und seinen Inhalt aus der Phase.
NOTE
Ausgeblendete Elemente werden in der Datenbank gespeichert und sind für Kunden nicht sichtbar. Diese Elemente sind jedoch für Suchmaschinen und andere Bots sichtbar, die Ihre Site durchsuchen. Sie werden auch als Teil des Inhalts zurückgegeben, wenn sie über einen API-Aufruf mit dem Attribut "Unsichtbarkeit"angefordert werden, es sei denn, Sie entfernen sie aus der Bühne.

HTML-Code hinzufügen

Das folgende Beispiel zeigt, wie Sie Google Font und deklarieren benutzerdefinierte Überschriftenklassen, die das aktuelle Stylesheet überschreiben.

Schritt 1: Auswählen einer Google-Schriftart

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

  2. Kopieren Sie den generierten Code, der in die <head> und fügen Sie sie vorübergehend in einen Texteditor ein.

    • Einbetten von Schriftcode
    • CSS-Regel
  3. Fügen Sie die Schriftartregel zu jeder Überschriftenklasse hinzu und schließen Sie die Überschriftenklassen in eine <style> -Tag.

    Dieser Code wird in Page Builder.

    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

  1. Im Admin Seitenleiste Ihres Stores, gehen Sie zu Content > Elements>Pages.

  2. Suchen Sie die Seite, auf der die Schrift verfügbar sein soll, und öffnen Sie sie im Bearbeitungsmodus.

  3. Scrollen Sie nach unten und erweitern Sie die Content Abschnitt.

  4. Im Page Builder Bedienfeld, erweitern Elements und ziehen Sie HTML Code Platzhalter für 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.

    Ziehen eines HTML-Code-Platzhalters auf die Bühne {width="600" modal="regular"}

  5. Bewegen Sie den Mauszeiger über den HTML-Container, um die Toolbox anzuzeigen und die Einstellungen ( Symbol Einstellungen {width="20"} ), Symbol.

  6. 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.

    HTML-Code und -Stile {width="500" modal="regular"}

  7. Aktualisieren Sie die restlichen Einstellungen nach Bedarf (siehe HTML-Codeeinstellungen ändern für Details).

  8. Klicken Sie oben rechts auf Save , um die Einstellungen anzuwenden und zum Page Builder Arbeitsbereich.

    Die neue Schriftart wird gerendert, wenn die Seite über einen Browser angezeigt wird.

Schritt 3: Vorschau der Seite anzeigen

  1. Im Currently Active ​Abschnitt, festlegen Enable Page ​nach Yes.

    Seite aktivieren {width="600" modal="regular"}

  2. Klicken Sie oben rechts auf die Save Pfeil und Auswahl Save & Close.

  3. Suchen Sie die Seite im Raster und wählen Sie View im Actions ​Spalte.

    Vorschau der Seitenüberschriften mit der neuen Schriftfamilie {width="700" modal="regular"}

HTML-Codeeinstellungen ändern html-settings

  1. Bewegen Sie den Mauszeiger über den HTML-Container, um die Toolbox anzuzeigen und die Einstellungen ( Symbol Einstellungen {width="20"} ).

  2. Bearbeiten Sie den Code im Textfeld nach Bedarf.

    HTML-, CSS- und JavaScript-Code werden unterstützt. Codefragmente, die in der <head> -Abschnitt der Seite können Sie hier eingeben.

    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.
  3. Aktualisieren Sie die Advanced ​nach Bedarf.

    • Um die Positionierung des Codes 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
      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.

      Trennlinie mit Mittelausrichtung {width="600" modal="regular"}

    • Legen Sie die Border -Stil, 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, 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 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
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d