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: Oktober 31, 2019

Produkte/Lizenzen

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

Design- manager-tool können Designer Vorlagen mit HTML aus Grund neu erstellen. Für Marketing Hub Professional- und Enterprise-Accounts umfasst dies benutzerdefiniert kodierte E-Mail-Vorlagen. Es ist auch möglich, ein HubSpot-Vorlagenlayout zu klonen, um HTML zu HTML zu klonen und diese als kodierte Vorlage anzupassen.

In diesem Artikel erfahren Sie, wie Sie benutzerdefiniert kodierte Vorlagen erstellen und Probleme mit diesen beheben sowie welche 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 auf dem Vorlagen-Marketplace vorgefertigte Vorlagen erwerben.

Bitte beachten Sie: Eine individuell kodierte Vorlage wird standardmäßig nicht responsive sein. Arbeiten mit einem professional-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 eine neue Datei, indem Sie auf Datei > Neue Datei klicken. YSie müssen möglicherweise auf das Ordnersymbol folder klicken, um den Finder zu erweitern.
  • Klicken Sie im Dialogfeld auf HTML und HUBL.
Code-Editor
  • Geben Sie die Details Ihrer neuen Datei ein:
    • Wählen Sie  „Vorlage“ oder „Teilvorlage“ aus. 
    • Wählen Sie dieArt der Vorlage aus, die Sie erstellen (Seite, Blog oder E-Mail).
    • Geben Sie Ihren Datei einen Namen.
  • Klicken Sie auf „Erstellen“.

Schreiben Sie als nächstes den HTML-Code für Ihre Seite oder E-Mail-Vorlage. Der HubSpot-Code-Editor formatiert den HTML-Code automatisch, hebt die HTML-Syntax hervor und wählt die passenden Tags aus. 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 geschriebenen Moduloptionen wie Filter-Tags und Symbolen.

Wenn Sie fertig sind, klicken Sie auf „Änderungen veröffentlichen“, um die Vorlage oder HTML-Datei zu veröffentlichen.

Erforderliche HubL-Tags hinzufügen

Sobald Sie Ihr strukturelles HTML geschrieben haben, werden Sie eine Fehlermeldung sehen, wenn Ihr Code irgendwelche benötigten HubL-Tags fehlt, wenn Sie versuchen sollten, Ihre Datei zu veröffentlichen. HubL-Tags verbinden Ihren Code mit den HubSpot-Einstellungen und dem Content-Editor. Hier erfahren Sie mehr über erforderliche Vorlagenvariablen und HubL-Modul-Tags.

Geben Sie bei E-Mail-Vorlagen die erforderlichen E-Mail- und CAN-SPAM -Token an. Weitere Informationen über CAN-SPAM-Token finden Sie in der  HubL-Dokumentation.

Die erforderlichen CAN-SPAM-Token können auf zwei Arten eingefügt werden:

1. Fügen Sie einen Token hinzu, mit den der CAN-SPAM-Abschnitt zum Abmelden eingefügt wird: {{unsubscribe_section}}. Wenn dieser Token verwendet wird, können Sie die Sprache und den Stil von Text und Links nicht formatieren. Es folgt ein Beispiel dafür, wie der {{unsubscribe_section}} aussehen würde:

Anschließend müssen Sie die folgenden Token einzeln hinzufügen:

{{site_settings.company_street_address_1}}
{{site_settings.company_city}}
{{site_settings.company_state}}
{{site_settings.company_zip}}

2. Fügen Sie den erforderlichen Abmelde-Llink und die Adress-Tokens ein:
{{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,

Klonen nach HTML

Eine alternative zur kompletten Neucodierung ist das Klonen einer der HubSpot-Vorlagen in eine Datei. Das Klonen einer Vorlage in eine Datei gewährt Ihnen Zugriff auf die HTML/HubL einer Vorlage und ist eine großartige Möglichkeit, die HubSpot-Vorlage, die Sie erstellt haben, zurückzuentwickeln.

So erstellen Sie eine kodierte version einer vorhandenen Vorlage:

  • {{ local.navDesignManager }}
  • Klicken Sie im Finder auf Aktionen > Klonen zu HTML . Die HTML-Datei wird in einem neuen Tab des Designers geöffnet. Der Dateiname stimmt mit dem Namen der ursprünglichen Vorlage überein, an die kopieren angehängt ist.
HubSpot-Hilfeartikel Screenshot
/de/cos-general/build-a-custom-coded-template-in-hubspot