Wie füge ich benutzerdefinierten Code zu meiner Landing Page hinzu?

Sie können Ihr eigenes HTML, CSS-Formatierungen und JavaScript

zu Ihrer Landing Page hinzufügen, indem Sie das Element Benutzerdefinierter Code verwenden.

Es gibt einige Dinge zu beachten, wenn Sie mit benutzerdefiniertem Code arbeiten:

  • Sie können benutzerdefinierten Code in den <body> – oder <head>-Bereich Ihrer Landing Page einfügen. Wenn Sie Code von Drittanbietern verwenden, stellen Sie sicher, dass Sie Informationen zur Platzierung des Codes vom Anbieter erhalten.
  • Um DSGVO-konform zu sein, informieren Sie Ihre Leads und Besucher darüber, dass Sie externe Formulare oder Code verwenden, die Heatmapping oder Tracking beinhalten.
  • Wenn Sie mehrere Tracking-Codes, Widgets etc. hinzufügen, kann dies Ihre Landing Page verlangsamen. Außerdem kann eine überladene Landing Page dazu führen, dass Besucher die Seite verlassen.
  • Bei der Arbeit im Landing Page Editor wird Ihnen nur der Platzhalter angezeigt. Das Skript wird nur im Vorschaumodus und auf der veröffentlichten Seite ausgeführt. Sie sollten die Seite also direkt nach der Veröffentlichung überprüfen, um sicherzustellen, dass das Skript wie vorgesehen funktioniert. Teilen Sie den Seitenlink erst, nachdem Sie sich vergewissert haben, dass alles einwandfrei ist.
  • Es ist eine gute Idee, sicherzustellen, dass die Seite mit dem Code in allen Webbrowsern korrekt angezeigt wird, besonders wenn Sie CSS geändert haben.
  • Unser Customer Success-Team kann Sie bei den Standardfunktionen des Editors unterstützen. Bei Drittanbieter-Skripten können wir keine Unterstützung bieten und deren Funktionsfähigkeit nicht garantieren.

Hinzufügen von benutzerdefiniertem Code zum Body der Landing Page

Der Body-Bereich einer Landing Page ist der Hauptbereich, in dem der primäre Inhalt angezeigt wird, wie zum Beispiel Text, Bilder, Videos und interaktive Elemente wie Anmeldeformulare. Er liegt zwischen dem Header und dem Footer und dient als zentraler Raum, um Informationen bereitzustellen und Besucher zu engagieren.

Um benutzerdefinierten Code zum Body Ihrer Landing Page hinzuzufügen:

  1. Klicken Sie im Landing Page Editor auf die Schaltfläche Elemente hinzufügen.



  2. Ziehen Sie das Element Dein Code per Drag und Drop in den Inhaltsbereich Ihrer Seite. Beachten Sie, dass der Editor die Stellen markiert, an denen Sie es ablegen können.



  3. Klicken Sie in das Element Dein Code, um die Symbolleiste zu öffnen, und geben Sie Ihren Code im Editor auf der rechten Seite ein.



Es gibt drei Arten von Code, die Sie im Body-Bereich verwenden können:

  • HTML – Standard-HTML-Formatierungen, zum Beispiel:
    <p> </p>
  • CSS – Platzieren Sie Ihren CSS-Code zwischen den Style-Tags:
    <style> </style>
  • JavaScript – Platzieren Sie Ihren JS-Code zwischen den Script-Tags:
    <script> </script>

Wenn Sie Less- oder Sass-Formatierungen verwenden möchten, müssen Sie diese zuerst in CSS kompilieren und dann zwischen den Style-Tags platzieren:
<style> </style>

Sie können auch zusätzliche Optionen für Ihr benutzerdefiniertes Code-Element festlegen:

  • Zusatzliche Klassennamen hinzufügen – aktivieren Sie diese Option, um Klassennamen zum Element-Container hinzuzufügen, damit Sie ihn nach Ihren Bedürfnissen gestalten können.
  • Absolute Positionierung – aktivieren Sie diese Option, um den benutzerdefinierten Code an beliebiger Stelle auf Ihrer Landing Page zu platzieren. Wir empfehlen, diese Option nur zu verwenden, wenn Sie ein ungewöhnliches Design haben, das auf keine andere Weise erstellt werden kann. Die Verwendung von Objekten mit absoluter Positionierung kann Ihre Seite auf mobilen Geräten weniger benutzerfreundlich machen. Weitere Informationen zu dieser Funktion finden Sie hier.
  • Auf Mobilgeräten verbergen – aktivieren Sie diese Option, um das Ergebnis des benutzerdefinierten Codes zu verbergen, wenn Ihre Seite auf einem mobilen Gerät geöffnet wird.

Hinzufügen von benutzerdefiniertem Code zum Head-Bereich Ihrer Landing Page

Der <head>-Bereich einer Landing Page enthält Metadaten und Informationen über die Seite, wie zum Beispiel den Titel, die Zeichencodierung, verlinkte Stylesheets, Skripte und SEO-relevante Tags. Er zeigt keine Inhalte direkt auf der Seite an, sondern liefert wichtige Anweisungen für Browser

und Suchmaschinen.

Um benutzerdefinierten Code zum Head-Bereich Ihrer Landing Page hinzuzufügen:

  1. Klicken Sie im Landing Page Editor auf die Schaltfläche Seiten verwalten.



  2. Bewegen Sie den Mauszeiger über die Schaltfläche neben der Startseite und klicken Sie auf Einstellungen.



  3. Im Fenster Seiteneinstellungen gehen Sie zum Tab <head>-Element und fügen dort Ihren eigenen oder einen Drittanbieter-Skript ein.




    Hinweis: Änderungen werden automatisch gespeichert, wenn Sie außerhalb des Textfelds klicken.

Verwenden Sie Tags, um anzugeben, wie der Code gerendert werden soll:

  • Für HTML verwenden Sie HTML-Tags, wie: <h2> </h2>
  • Für CSS umschließen Sie den Code mit <style> </style> tags
  • Für JavaScript umschließen Sie den Code mit <script> </script> Tags
Schritte für Legacy Landing Pages

Sie können benutzerdefinierten Code (HTML, CSS und JavaScript) mit dem Platzhalter für benutzerdefinierten Code im Landing Page Editor zu Ihrer Landing Page hinzufügen. Nutzen Sie diese Option, wenn Sie Tools und Widgets einfügen möchten, die nicht im Editor enthalten sind.

Der Code wird sowohl zur Desktop- als auch zur mobilen Version Ihrer Landing Page hinzugefügt. Wenn Sie A/B-Tests auf Ihrer Landing Page durchführen möchten, stellen Sie sicher, dass Sie den Platzhalter in jede Variante einfügen. Sie können ihn auch auf einer Dankeseite verwenden.

Sie können den benutzerdefinierten Code zu jeder neuen oder bestehenden Vorlage im Editor hinzufügen. So gelangen Sie dorthin:

1. Gehen Sie zu Landing Pages und führen Sie eine der folgenden Aktionen aus:

  • Klicken Sie auf Landing Page erstellen, um eine neue Seite zu erstellen.
    Erstellungsbutton auf der Verwaltungsseite für Landing Pages.
  • Wählen Sie im Aktionen-Menü neben dem Seitennamen die Option Seite bearbeiten.
Option zur Seitenbearbeitung auf der Verwaltungsseite für Landing Pages.

2. Doppelklicken Sie auf das Symbol Benutzerdefinierter Code, um den Platzhalter zur Vorlage hinzuzufügen.

Der Platzhalter erscheint in der oberen linken Ecke des angezeigten Bereichs.

Zu einem Abschnitt hinzugefügter Platzhalter.

Wenn Sie auf das Symbol doppelklicken, öffnet sich automatisch ein Modal, in das Sie den Code eingeben können.
3. (Optional) Ziehen Sie den Platzhalter per Drag & Drop, wenn Sie möchten, dass der Platzhalter an einer bestimmten Stelle auf der Seite erscheint. Doppelklicken Sie auf den Platzhalter, um ein Modal zu öffnen, in das Sie den Code eingeben können.
4. Fügen Sie den Code ein oder tippen Sie ihn ein. Achten Sie darauf, Ihre Skripte in <script>-Tags zu setzen (für JavaScript). Wenn Sie mehrere Code-Snippets hinzufügen, fügen Sie diese nacheinander ein.

Modul, in das benutzerdefinierter Code eingegeben werden kann.

5. (Optional) Wenn Sie einen A/B-Test durchführen, wiederholen Sie die Schritte 2-4 für jede Variante der Seite.
6. Wenn Sie eine neue Seite erstellen, klicken Sie auf das Handysymbol, um eine mobilfreundliche Version Ihrer Seite zu erstellen. Wenn Sie eine bestehende Seite bearbeiten, klicken Sie darauf, um zu überprüfen, ob Sie mit den Änderungen zufrieden sind.

Platzierung des Symbols für die mobile Version.

7. (Optional) Klicken Sie auf Vorschau, um zu überprüfen, ob der Code korrekt alle hinzugefügten Elemente anzeigt, die für Ihre Besucher sichtbar sein sollen.

8. Speichern Sie die Änderungen oder veröffentlichen Sie die Landing Page.
9. Sehen Sie sich die veröffentlichte Landing Page an, um sicherzustellen, dass sie korrekt angezeigt wird.

Verwandte Artikel

Beliebte Ratgeber