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 Design benutzerdefinierter Inhaltselemente. 

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-E-Mail-Editor 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 der erforderlichen HubL-Variablen für E-Mail-, Website- und Landingpage-Dateien. 

Eine neue HTML + HubL-Datei erstellen

• Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
• Klicken Sie oben in der linken Spalte auf das  MenüDatei und wählen SieNeue Datei aus .

• Klicken Sie im Dialogfeld "Neue Datei " auf das Dropdown-Menü "Was möchten Sie erstellen?", wählen Sie "HTML + HubL" aus und klicken Sie dann auf "Weiter".  

• Geben Sie im Dialogfeld " Neue HTML + HUBL-Vorlage einrichten " die Details Ihrer neuen Datei ein:
  • Wählen Sie eine Option für "Was bauen Sie?":
    • 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. 
  • 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.
  • Geben Sie im Feld Dateiname einen Dateinamen ein.
  • Um den Speicherort der Datei zu aktualisieren, klicken Sie im Abschnitt Dateispeicherort auf Ändern und wählen Sie einen Ordner aus.
• 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 eine Vorschau anzuzeigen, wie er auf einer Live-Seite angezeigt wird.

HTML + HubL hinzufügen

• Geben Sie den HTML-Code für Ihre Vorlage ein. Erfahren Sie mehr über das Hinzufügen von CSS - und JavaScript-Dateien zu Ihrer benutzerdefinierten Code-Vorlage. 
• Um anzuzeigen, wie Ihr HubL gerendert wird, klicken Sie auf den Schalter Show output. Auf der rechten Seite wird ein Fenster mit der gerenderten Vorschau geöffnet.

Erforderlichen HubL hinzufügen

Benutzerdefinierte Code-Vorlagen benötigen bestimmte HubL-Variablen , um zu funktionieren. Wenn eine dieser erforderlichen Variablen fehlt, erscheint eine Fehlermeldung, wenn Sie versuchen, die Vorlage zu veröffentlichen. 

• Für Seiten und Blog Vorlagen sind die folgenden Variablen erforderlich:
  • {{standard_footer_includes}}
  • {{standard_header_includes}}
• Für E-Mail-Vorlagen müssen die folgenden Variablen CAN-SPAM-konform sein. 
  • {{unsubscribe_link}} oder (mindestens eine Angabe) {{unsubscribe_link_all}}
  • {{unsubscribe_anchor}}
  • {{site_settings.company_name}}
  • {{site_settings.company_street_address_1}}
  • {{site_settings.company_city}}{{site_settings.company_state}}
  • {{site_settings.company_zip}}

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.

• So erstellen Sie eine Code-Version einer vorhandenen Vorlage:
  • Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.

• • Öffnen Sie in der linken Seitenleiste die Vorlage, die Sie kopieren möchten.
  • 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 eine Vorschau anzeigen, wie sie auf einer Live-Seite aussehen wird, und sie dann veröffentlichen.

• Klicken Sie oben rechts auf Vorschau.
• 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.
• Wenn Sie mit der Bearbeitung fertig sind, klicken Sie oben rechts auf "Änderungen veröffentlichen ".

• 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 auch zum unteren Rand des Code-Editors gehen und auf "Details anzeigen" klicken.