Eine benutzerdefiniert kodierte Vorlage in HubSpot erstellen

Entwickler können mit HTML + HubL Blog-, Website-Seiten-, Landingpage- und E-Mail-Vorlagen von Grund auf neu erstellen. Sie können auch ein Layout einer Drag-&-Drop-Vorlage in HTML kopieren, dann anpassen es als codierte Vorlage.

Erfahren Sie in unserer Entwicklerdokumentation mehr über das Entwerfen von benutzerdefinierten Inhaltselementen. 

Bevor Sie loslegen

Bevor Sie mit dieser Funktion beginnen, sollten Sie sich im Voraus darüber im Klaren sein, welche Schritte unternommen werden sollten und welche Einschränkungen die Funktion mit sich bringt und welche Konsequenzen sich daraus ergeben können.

Dies sind die Voraussetzungen:

• Vergewissern Sie sich, dass Sie über die Berechtigungen für Design-Tools zum Erstellen und Bearbeiten von Vorlagen im Design-Manager verfügen.
• Es wird empfohlen, auchüber die Berechtigungen für globalen Content und Design und Website-Einstellungen zu verfügen , wenn Sie globale Web-Ressourcen und Blog/Website-Einstellungen bearbeiten müssen.

Einschränkungen und Wissenswertes

• Zum Erstellen von E-Mail-Vorlagen ist ein Marketing Hub Professional- oder Enterprise-Abonnement erforderlich.   Content Hub-Accounts können E-Mails mit dem Drag-&-Drop-Editor für E-Mails erstellen.
• Benutzerdefinierte Code-Vorlagen können viele vordefinierte Variablen verwenden. Einige dieser Variablen sind erforderlich, um E-Mails und Seiten zu erstellen, während andere optional sind. Erfahren Sie mehr über das Hinzufügen erforderlicher HubL-Variablen für E-Mails, Websites und Landingpages. 

Eine neue HTML + HubL-Datei erstellen

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie oben im Finder auf das Dropdown-Menü Datei und wählen Sie Neue Datei aus.

3. Klicken Sie im Dialogfeld auf das Dropdown-Menü Was möchten Sie erstellen? und wählen Sie HTML + HubL aus.

4. Wählen Sie im Feld Was bauen Sie auf? eine Option aus:
   • Vorlage: Legt das Layout und die Struktur des Contents fest, der auf den Seiten der Website, auf den Landingpages, in Blog-Beiträgen oder in E-Mails angezeigt wird. 
   • Teilvorlage: ist wiederverwendbarer Code oder ein Snippet an Code, der in mehrere andere Vorlagen eingefügt werden kann. 
5. Klicken Sie auf das Dropdown-Menü Vorlagentyp und wählen Sie einen Typ für die benutzerdefinierte Vorlage aus (Seite, Blogbeitrag/Listing, E-Mail oder Systemseite). Erfahren Sie mehr über Vorlagentypen.
6. Geben Sie im Feld Dateiname einen Dateinamen ein.
7. Um den Speicherort der Datei zu aktualisieren, klicken Sie im Abschnitt Dateispeicherort auf Ändern und wählen Sie einen Ordner aus.
8. Wenn Sie fertig sind, klicken Sie auf Erstellen.

HTML + HubL zu Ihrer Vorlage hinzufügen

Nachdem Sie Ihre neue Datei konfiguriert haben, werden Sie zum Code-Editor weitergeleitet, um Ihren benutzerdefinierten Code hinzuzufügen und in einer Vorschau anzuzeigen, wie er auf einer Live-Seite angezeigt wird.

HTML + HubL hinzufügen

1. Geben Sie den HTML-Code für die Vorlage ein. Erfahren Sie mehr über das Hinzufügen von CSS - und JavaScript-Dateien zu benutzerdefinierten Vorlagen. 
2. Um anzuzeigen, wie HTML + HubL dargestellt wird, aktivieren Sie oben links den Schalter Ausgabe anzeigen . Auf der rechten Seite wird ein Fenster mit der gerenderten Vorschau geöffnet.

Erforderliches HTML + HubL hinzufügen

Vorlagen auf Basis von benutzerdefiniertem Code benötigen spezifische HTML- oder HubL-Variablen , um zu funktionieren. Wenn eine dieser erforderlichen Variablen fehlt, kann eine Fehlermeldung angezeigt werden, wenn Sie versuchen, die Vorlage zu veröffentlichen. 

• Für Seiten und Blog Vorlagen sind die folgenden Variablen erforderlich:

<!-- Enter above the closing </header> tag -->
{{ standard_header_includes }}

<!-- Enter above the closing </body> tag -->
{{ standard_footer_includes }}

• Für E-Mail-Vorlagen müssen die folgenden Variablen CAN-SPAM-konform sein:

<!-- Enter variables above the closing </body> tag -->
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}

<!-- Choose one unsubscribe variable -->
{{ unsubscribe_link }}
{{ unsubscribe_link_all }}

• Für E-Mail-Vorlagen ist der folgende Code erforderlich, damit in bestimmten E-Mail-Clients Vorschautext angezeigt werden kann:

<!-- Preview text (text which appears right after subject in certain email clients) -->

<div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}
</div>

Kopieren einer Vorlage in HTML

Sie können nicht nur Vorlagen von Grund auf neu erstellen, sondern auch Blogs, Website Seiten und Landingpages zu HTML kopieren Drag-&-Drop-Vorlagen.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf den Namen der Vorlage, die Sie klonen möchten.
3. Klicken Sie auf das Dropdown-Menü Aktionen und wählen Sie In HTML kopieren aus. Die HTML-Datei wird im gleichen Ordner wie die Originaldatei erstellt.

Vorlage in Vorschau anzeigen und veröffentlichen

Nachdem Sie Ihre Vorlage erstellt haben, können Sie in einer Vorschau anzeigen, wie sie auf einer Live-Seite angezeigt wird, und sie dann veröffentlichen.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf den Namen der Vorlage, die Sie in der Vorschau anzeigen oder veröffentlichen möchten.
3. Klicken Sie oben rechts auf das Dropdown-Menü Vorschau und wählen Sie eine Option aus:
   • Wenn Sie die Option "Live-Vorschau mit Anzeigeoptionen" auswählen, können Sie eine Vorschau Ihrer Vorlage anzeigen, wie sie auf anderen Geräten angezeigt wird, indem Sie die Option Viewport Voreinstellung auswählen.
   • Wenn Sie Vorschau ohne Anzeigeoptionen auswählen, können Sie nur in einer Vorschau anzeigen, wie Ihre Vorlage in Browsern angezeigt wird.
4. Wenn Sie fertig sind, klicken Sie auf "Änderungen veröffentlichen".
5. Bei Codefehlern wird eine Fehlermeldung angezeigt. Weitere Informationen zu diesen Fehlern finden Sie in der Fehlerkonsole unterhalb des Code-Editors:

• • Klicken Sie in der Fehlermeldung oben auf der Seite auf Fehlerkonsole , um die Konsole unterhalb des Code-Editors zu öffnen. 
  • Alternativ können Sie unten links im Code-Editor auf Details anzeigen klicken.