DokumentationCommercePage Builder

Elements - HTML-Code

Last update: Wed Dec 18 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Einsteiger
  • Fortgeschrittener
  • Benutzende

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-Toolbox {width="500" modal="regular"}

Tool
Symbol
Beschreibung
Verschieben
move icon {width="25"}
Verschiebt den HTML-Code-Container an eine andere gültige Position auf der Seite.
Einstellungen
Einstellungssymbol {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.
Duplikat
Symbol „Duplizieren“ {width="25"}
Erstellt eine Kopie des HTML-Code-Containers.
entfernen
Symbol entfernen {width="25"}
Löscht den HTML-Code-Container und seinen Inhalt aus dem Schritt.
NOTE
Ausgeblendete Elemente werden in der Datenbank gespeichert und sind für Kunden unsichtbar. 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 „unsichtbar“ angefordert werden, es sei denn, Sie entfernen sie aus dem Schritt.

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

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

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

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

  1. Navigieren Sie in Admin-Seitenleiste Ihres Stores zu Content > Elements>Pages.

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

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

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

    Ziehen eines HTML-Code-Platzhalters auf den Schritt {width="600" modal="regular"}

  5. Bewegen Sie den Mauszeiger über den HTML-Container, um die Toolbox anzuzeigen, und wählen das Symbol Settings ( Settings icon {width="20"} ) aus.

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

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

  7. Aktualisieren Sie die verbleibenden Einstellungen nach Bedarf (siehe Ändern von HTML-Code-Einstellungen).

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

  1. Legen Sie im Currently Active ​Abschnitt Enable Page ​auf Yes fest.

    Aktivieren der Seite {width="600" modal="regular"}

  2. Klicken Sie oben rechts auf den Save und wählen Sie Save & Close aus.

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

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

HTML-Code-Einstellungen ändern html-settings

  1. Bewegen Sie den Mauszeiger über den HTML-Container, um die Toolbox anzuzeigen, und wählen das Symbol Settings ((Settings icon {width="20"} ).

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

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

      Trennlinie mit zentrierter Ausrichtung {width="600" modal="regular"}

    • 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
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d