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.
CMS-General

Eine benutzerdefiniert kodierte Vorlage in HubSpot erstellen

Zuletzt aktualisiert am: April 25, 2019

Produkte/Lizenzen

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

Design- manager-tool können Designer Vorlagen mit HTML aus Grund neu erstellen. 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 zeigen wir Ihnen, wo sich in benutzerdefinierte Vorlagen in HubSpot schreiben lassen und welche Variablen in benutzerdefinierte E-Mail-Vorlagen enthalten sein müssen. Wenn Sie sich bei der Arbeit mit Code nicht wohl fühlen, verwenden Sie eine der vorgefertigten Vorlagen in Ihrem HubSpot-Konto oder schauen Sie sich den Template Marketplace bis Kauf vorgefertigter Vorlagen. an

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 für dei anzeige von „{{unsubscribe_section}}“:

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