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.
Design Manager

Eine benutzerdefiniert kodierte Vorlage in HubSpot erstellen

Zuletzt aktualisiert am: September 21, 2021

Produkte/Lizenzen

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

Designer können mithilfe von HTML komplett neue Website-, Landing-Page- und Blog-Vorlagen erstellen.  Marketing Hub Professional- und Enterprise-Accounts können ebenfalls E-Mail-Vorlagen auf Basis von benutzerdefiniertem Code erstellen. Es ist auch möglich, ein HubSpot-Vorlagenlayout zu HTML klonen und es als Code-Vorlage anzupassen.

In diesem Artikel erfahren Sie, wie Sie Vorlagen auf Basis von benutzerdefiniertem Code erstellen und Probleme mit diesen beheben sowie welcher HubL in Ihren Vorlagen erforderlich ist. Wenn Sie mit der Arbeit mit Code nicht vertraut sind, verwenden Sie eine der vorgefertigten Vorlagen in Ihrem HubSpot-Account. Sie können auch im Vorlagen-Marketplace vorgefertigte Vorlagen erwerben.

Bitte beachten: Eine benutzerdefinierte Code-Vorlage ist standardmäßig nicht responsiv. Arbeiten Sie mit einem professionellen Designer, um sicherzustellen, dass Ihre Vorlage für verschiedene Bildschirmgrößen responsiv ist.

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 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 kodierte version einer vorhandenen Vorlage:

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Klicken Sie im Finder auf Aktionen > Klonen zu HTML . 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