Become a HubSpot power user — join us for HubSpot Training Day 2017.

Gewusst wie: So kodieren Sie HTML-Seiten- und E-Mail-Vorlagen

Zuletzt aktualisiert am: May 18, 2016

Anforderungen

Produkt: HubSpot Marketing
Abonnement: Basic, Pro, & Enterprise
Während der Template Builder (Vorlagendesigner) Ihren Inhalts-Erstellern größere Flexibilität bei der Strukturierung der Inhalte bietet und sie davor rettet, Hunderte von Seiten in HTML schreiben zu müssen, können sie mit dem HubSpot-Design-Manager Vorlagen mit HTML von Grund auf neu erstellen. Nachdem Sie Ihre Vorlage komplett neu codiert haben, müssen Sie Hubl-Tags (HubSpot Markup Language) hinzufügen, um bearbeitbare Module zu erstellen, die mithilfe des HubSpot-Inhalts-Editors angepasst werden können.  
Es ist wichtig zu beachten, dass die komplette Neucodierung von HTML-Seiten oder E-Mails nicht automatisch eine responsive Vorlage gewährleistet.

Anleitung

Gehen folgendermaßen Sie vor, um eine HTML-E-Mail oder Seitenvorlage zu erstellen.

Zu Design Manager (Design-Manager) navigieren

Navigieren Sie zu Content > Design Manager (Inhalte > Design-Manager).

Navigate to Design Manager

Neue kodierte Datei erstellen

Wählen Sie den Ordner Coded Files (Codierte Dateien) aus und klicken Sie auf New Coded File (Neu codierte Datei).

New coded file

Typ der codierten Datei auswählen

Ihre Wahl bestimmt nicht nur den Hauptordner, in dem die Datei gespeichert werden soll, sondern auch die Hubl-Token-Anforderungen für diesen Dateityp.

Code editor

Datei benennen und speichern

Geben Sie einen Dateinamen mit der Erweiterung .html ein und klicken Sie dann auf Save (Speichern).

HubSpot Help article screenshot

Vorlage codieren

Als Nächstes müssen Sie den HTML-Code für Ihre Seite oder E-Mail-Vorlage schreiben. Der HubSpot-Code-Editor fügt Einzüge automatisch ein, markiert Ihre HTML-Syntax und schließt Ihre Tags für Sie. Dies sind nur einige der erweiterten IDE (Integrierte Entwicklungsumgebung)-Funktionen, die das Codieren mit HubSpot sehr Designer-freundlich gestalten.

Vorlage veröffentlichen

Klicken Sie auf Publish Changes (Änderungen veröffentlichen), um die Vorlage oder die HTML-Datei zu veröffentlichen.

HubSpot Help article screenshot

Sie werden aufgefordert, ob Sie die Vorlage für die Auswahl durch Inhalts-Ersteller verfügbar machen sollen. Wenn Sie die Option Make this template available for new content (Diese Vorlage für neue Inhalte zur Verfügung stellen) deaktivieren, können Sie eine HTML-Datei ohne die erforderlichen HubSpot-Vorlagen-Tags speichern. Diese Option steht dann allerdings Inhalts-Erstellern nicht zur Verfügung. Beispiel hierfür wäre ein globaler Abschnitt, den Sie in eine andere Vorlagendatei aufnehmen würden. 

Confirm Update

Erforderliche HubL-Tags hinzufügen

Sobald Sie die strukturelle HTML geschrieben haben, würde die Fehlermeldung angezeigt, dass die erforderlichen HubL-Tags für Ihren Code fehlen, wenn Sie versuchten, Ihre Vorlage und Ihre HTML-codierte Vorlage zu veröffentlichen. HubL-Tags verbinden Ihren Code mit den HubSpot-Einstellungen und dem Inhalts-Editor. Weitere Informationen zu den erforderlichen Vorlagenvariablen finden Sie hier und Informationen zu den HubL-Modul-Tags hier.

In Datei klonen

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. Um eine Vorlage in eine Datei zu klonen, wählen Sie Actions > Clone to file (Aktionen > In Datei klonen) aus.  Als Nächstes benennen Sie die Datei mit der Erweiterung .html.

Der HubSpot Template Builder (Vorlagendesigner) spart beiden, Designern und Marketern, Zeit. Es empfiehlt sich daher, formatierte Vorlagen, die mit dem mit Template Builder (Vorlagendesigner) erstellt wurden, zu verwenden, anstatt Vorlagen von Grund auf neu zu erstellen. Die vorherigen Abschnitte dieses Handbuchs behandeln, wie Sie Ihre Vorlagen strukturieren und formatieren.

Vorheriger Artikel:

Weiter zum nächsten Artikel: