Zum Hauptinhalt
Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt. Er wurde automatisch mit einer Software übersetzt und unter Umständen nicht korrekturgelesen. Die englischsprachige Fassung gilt als offizielle Version und Sie können dort die aktuellsten Informationen finden. Hier können Sie darauf zugreifen.

Eine benutzerdefiniert kodierte Vorlage in HubSpot erstellen

Zuletzt aktualisiert am: Juni 28, 2023

Mit einem der folgenden Abonnements verfügbar (außer in den angegebenen Fällen):

Alle

Entwickler können Blog-, Website-Seiten, Landingpage- und E-Mail-Vorlagen mithilfe von HTML von Grund auf neu erstellen. Sie können auch ein Drag-&-Drop-Vorlagenlayout zu HTMLklonen und es dann als Code-Vorlage anpassen.

Bitte beachten:Es ist ein Marketing Hub Professional- oder Enterprise-Account erforderlich, um E-Mail-Vorlagen auf Basis von benutzerdefiniertem Code zu erstellen.

Eine neue HTML- & HUBL-Datei erstellen

  • Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing, klicken Sie dann auf Dateien und Vorlagen und abschließend auf Design-Manager.
  • Erstellen Sie in der linken Seitenleiste eine neue Datei, indem Sie auf „Datei“ > „Neue Datei“ klicken. Sie müssen möglicherweise auf das folderOrdner-Symbol klicken, um den Finder zu erweitern.
  • Klicken Sie im Dialogfeld auf das Dropdown-Menü „Was möchten Sie erstellen?“ und wählen Sie „HTML und HUBL“ aus.
design-manager-html-hubl
  • Klicken Sie auf „Weiter“.
  • Geben Sie die Details Ihrer neuen Datei ein:
    • Wählen Sie „Vorlage“ oder „Teilvorlage“ aus. Eine Teilvorlage ist eine Vorlage, die in anderen Vorlagen verwendet werden kann. 
    • Wählen Sie im Dropdown-Menü den Typ der Vorlage aus, die Sie erstellen (Seite, Blog oder E-Mail).
    • Geben Sie Ihren Datei einen Namen.
    • Um den Speicherort der Datei zu aktualisieren, klicken Sie im Abschnitt „Dateispeicherort“ auf „Ändern“ und wählen Sie den Ordner aus, dem die Datei hinzugefügt werden soll.
  • Klicken Sie auf „Erstellen“.
  • Schreiben Sie als Nächstes den HTML-Code für Ihre Seite oder E-Mail-Vorlage.
  • Um in einer Vorschau anzuzeigen, wie Ihr HubL dargestellt wird, klicken Sie auf den Schalter „ Ausgabe anzeigen“, um ihn zu aktivieren. Auf der rechten Seite wird ein Bereich mit der gerenderten Vorschau geöffnet.


    design-manager-show-output
  • Klicken Sie oben rechts auf „Vorschau“, um in einer Vorschau anzuzeigen, wie Ihre Vorlage im Content-Editor aussieht und funktioniert. Diese Vorschau wird mit dem Editor synchronisiert und bei der Arbeit automatisch aktualisiert.
  • Klicken Sie oben rechts auf „Änderungen veröffentlichen“.
Bei Fehlern im Code erfolgt eine Fehlermeldung, wenn Sie versuchen, Änderungen zu veröffentlichen. Die Fehlerkonsole im unteren Bereich des Code-Editors zeigt den Fehler oder die Warnung sowie Vorschläge zur Behebung dieser Fehler und Warnungen an.

error-console

Weitere Ressourcen zu benutzerdefinierten Designs finden Sie in der Dokumentation von HubSpot-Designer. Es gibt zusätzliche Dokumentation zu Code-Moduloptionen wie Filter-Tags und Symbole.

Erforderliche HubL-Tags hinzufügen

Bei einem etwaigen Veröffentlichungsversuch der Datei erhalten Sie eine Fehlermeldung, falls Ihrem Code erforderliche HubL-Tags fehlen. 

Website-, Landingpage- und Blog-Vorlagen erfordern die folgenden Tags:

  • {{standard_footer_includes}}
  • {{standard_header_includes}}
Für E-Mail-Vorlagen müssen die folgenden Tags CAN-SPAM-konform sein. Sie können auf zweierlei Weise hinzugefügt werden:
  • Fügen Sie dieses Token hinzu, mit dem der CAN-SPAM-Abschnitt zum Abmelden eingefügt wird: {{unsubscribe_section}}. Fügen Sie dann diese Token einzeln hinzu: 
    • {{site_settings.company_street_address_1}}
    • {{site_settings.company_city}}
    • {{site_settings.company_state}}
    • {{site_settings.company_zip}}
    • Bei dieser Methode ist es nicht möglich, die Sprache und den Stil von Text und Links zu formatieren.

  • Verwenden Sie diese Token einzeln:
    • {{site_settings.company_name}}
    • {{unsubscribe_link}} oder {{unsubscribe_link_all}} (mindestens einen einfügen)
    • {{unsubscribe_anchor}}
    • {{site_settings.company_name}}
    • {{site_settings.company_street_address_1}}
    • {{site_settings.company_city}}{{site_settings.company_state}}
    • {{site_settings.company_zip}}
    • Mithilfe der Token können Sie die Flexibilität, um die Token und links und links in den gewünschten Stil und Sprache hinzuzufügen. 

Zu HTML klonen

Neben dem Erstellen einer komplett neuen Vorlage können Sie auch eine der HubSpot-Vorlagen zu HTML klonen. Das Klonen einer Vorlage zu HTML ermöglicht Ihnen Zugriff auf den HTML-Content einer Vorlage. 

So erstellen Sie eine Code-Version einer vorhandenen Vorlage:

  • Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing, klicken Sie dann auf Dateien und Vorlagen und abschließend auf Design-Manager.
  • Klicken Sie im Finder auf „Aktionen“ > „Zu HTML klonen“. Die HTML-Datei wird im gleichen Ordner wie die Originaldatei erstellt. Der Dateiname stimmt mit dem Namen der ursprünglichen Vorlage überein, an die kopieren angehängt ist.
design-manager-clone-to-html
 
 
War dieser Artikel hilfreich?
Dieses Formular wird nur verwendet, um Feedback zur Dokumentation zu sammeln. Erfahren Sie, wie Sie Hilfe bei Fragen zu HubSpot erhalten können.