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: November 21, 2018

Produkte/Lizenzen

Marketing Hub Professional, Enterprise
Basic

Während der Vorlagendesigner Content-Erstellern viel Flexibilität im Hinblick auf die Strukturierung von Inhalten bietet und Designern die Arbeit mit HTML erspart, ermöglicht das Design-Manager-Tool Designern zusätzlich das Erstellen neuer Vorlagen in HTML.  

In diesem Artikel zeigen wir Ihnen, wo sich benutzerdefinierte Vorlagen in HubSpot schreiben lassen und welche Variablen in benutzerdefinierten E-Mail-Vorlagen enthalten sein müssen. Wenn Sie als Designer keine neuen Vorlagen schreiben möchten, verwenden Sie eine der gebrauchsfertigen Vorlagen in Ihrem HubSpot-Account oder kaufen Sie vorgefertigte Vorlagen im Vorlagen-Marketplace.

Bitte beachten Sie Folgendes: Das Schreiben neuer HTML-Websites oder E-Mails bedeutet nicht, dass Vorlagen responsiv sind. 

Eine neue HTML- & HUBL-Datei erstellen

{{ local.navDesignManager }}

Erstellen Sie eine neue Datei, indem Sie auf „Aktionen“ > „Neue Datei“  klicken. (Möglicherweise müssen Sie auf den Ordnersymbol Ordner  klicken, um die Suchfunktion zu erweitern).

Klicken Sie im Dialogfeld auf HTML und HUBL.

Code-Editor

Geben Sie die Details Ihrer neuen Datei ein:

  • Was erstellen Sie?: Wählen Sie  „Vorlage“ oder „Teilvorlage“ aus. 
  • Vorlagentyp: Wählen Sie die Art der Vorlage aus, die Sie erstellen (Seite, Blog oder E-Mail).
  • Dateiname: Geben Sie einen Dateinamen ein.
  • 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

Nachdem Sie den grundlegenden HTML-Code geschrieben haben, wird eine Fehlermeldung angezeigt, die angibt, dass erforderliche HubL-Tags fehlen, wenn Sie versuchen, 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 ein Token hinzu, mit den der CAN-SPAM-Abschnitt zum Abmelden eingefügt wird: „{{unsubscribe_section}}“. Wenn dieses Token verwendet wird, können Sie die Sprache und den Stil von Text und Links nicht formatieren. Es folgt ein Beispiel für die 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-Link und die Adress-Tokens ein:
{{site_settings.company_name}}
{{unsubscribe_link}} oder {{unsubscribe_link_all}} (mindestens eines 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}}

Wenn Sie einzelne Tokens verwenden können Sie Text um Token und Links herum hinzufügen und diesem im gewünschten Stil und in der gewünschten Sprache formatieren.

Zu HTML klonen

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

Um eine Code-Version einer vorhandenen Vorlage zu erstellen, klicken Sie im Layout-Editor auf „Aktionen“ > „Klonen“. Die HTML-Datei wird in einem neuen Tab des Designers geöffnet. Ihr Name entspricht dem Namen der ursprünglichen Vorlage mit dem Zusatz Kopie .

HubSpot-Hilfeartikel – Screenshot