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: Januar 19, 2023

Produkte/Lizenzen

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Ehemaliges Marketing Hub Basic

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

Bitte beachten: Um benutzerdefinierte E-Mail-Vorlagen zu erstellen, ist ein Marketing Hub Professional - oder Enterprise -Konto erforderlich.

Eine neue HTML- & HubL-Datei erstellen

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Erstellen Sie in der linken Seitenleiste eine neue Datei, indem Sie auf „Datei“ > „Neue Datei“ klicken. Sie müssen möglicherweise auf da 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-, Landing-Page- 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 den 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 beinhalten)
    • {{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 zu Marketing > Dateien und Vorlagen > 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.