Nur PaaS

Elements - HTML-Code

Letzte Aktualisierung: 5. Mai 2025
  • 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

ToolSymbolBeschreibung
Verschieben move icon Verschiebt den HTML-Code-Container an eine andere gültige Position auf der Seite.
Einstellungen Einstellungssymbol Öffnet die Seite HTML-Code bearbeiten , auf der Sie die Eigenschaften des Containers ändern können.
Ausblenden Symbol ausblenden Blendet den HTML-Code-Container aus.
Anzeigen Symbol anzeigen Zeigt den ausgeblendeten HTML-Code-Container an.
Duplikat Symbol „Duplizieren“ Erstellt eine Kopie des HTML-Code-Containers.
entfernen Symbol entfernen 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.

    <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

  5. Bewegen Sie den Mauszeiger über den HTML-Container, um die Toolbox anzuzeigen, und wählen das Symbol Settings ( Settings icon ) 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

  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.