Vorlagen
Übersicht über Vorlagen
Vorlagen sind wiederverwendbare Seiten- oder E-Mail-Wrapper, die im Allgemeinen Module und Teilvorlagen in ein Layout platzieren. Content-Autoren wählen eine Vorlage aus, die sie bei der Erstellung einer Seite oder E-Mail verwenden.
Letzte Änderung: 22. August 2025
Vorlagen definieren das Layout Ihrer HubSpot-Seiten, -E-Mails und -Designs. Eine Vorlage besteht aus Modulen und Teilvorlagen und kann auf andere Elemente wie Stylesheets und JavaScript-Dateien verweisen. Vorlagen können entweder über das HubSpot-CLI oder im Design-Manager von HubSpot erstellt werden. Für Content-Autoren ist das Auswählen einer Vorlage der erste Schritt bei der Erstellung einer Seite oder E-Mail.
Im Folgenden erfahren Sie, wie Sie eine Vorlage erstellen, welche Arten von Vorlagen es gibt und was in Ihren Vorlagen enthalten ist.
Eine Vorlage erstellen
Um eine Vorlage zu erstellen, können Sie entweder den Design-Manager in HubSpot verwenden oder denhs create template-CLI-Befehl ausführen.
| Parameter | Beschreibung |
|---|---|
name | Der Name der Vorlage |
dest | Der Pfad des lokalen Verzeichnisses, in dem Sie die Vorlage erstellen möchten. Falls nicht vorhanden, wird die Vorlage in dem Verzeichnis erstellt, in dem Sie sich gerade befinden. |
- Navigieren Sie mit den Pfeiltasten zu dem Typ von Vorlage, den Sie erstellen möchten, und drücken Sie dann die Eingabetaste.
Vorschau einer Vorlage anzeigen
Nachdem Sie eine Vorlage aktualisiert haben, können Sie eine Vorschau anzeigen, um sicherzustellen, dass sie so aussieht und sich so verhält wie erwartet. Es gibt verschiedene Möglichkeiten in HubSpot, die Vorschau einer Vorlage anzuzeigen, z. B.:- Vorschau einer Vorlage im Design-Manager: Eignet sich am besten für schnelle visuelle Überprüfungen oder wenn Sie einen Blogbeitrag, ein Listing oder eine kombinierte Vorlage in einer Vorschau anzeigen müssen.
- Erstellen eines neuen Elements über eine Vorlage: Eignet sich am besten für das Testen des Drag-and-Drop-Editors und der Content-Erstellung.
Vorschau mit dem Design-Manager
Die Vorschau von Vorlagen mithilfe des Design-Managers kann für schnelle visuelle Überprüfungen besonders hilfreich sein. Mit der Vorlagenvorschau können Sie auch Anzeigeoptionen konfigurieren, z. B. Viewport-Maße. So zeigen Sie die Vorschau einer Vorlage im Design-Manager an:- Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
- Klicken Sie im Datei-Explorer in der linken Seitenleiste auf die Vorlage, die Sie in der Vorschau anzeigen möchten.
- Klicken Sie oben rechts auf Vorschau.
- Wählen Sie Live-Vorschau mit Anzeigeoptionen aus, um eine Vorschau der Vorlage mit Optionen zum Testen der Responsivität und der Domain-Einstellungen wie Stylesheets anzuzeigen. Diese Option zeigt die Seite in einem iFrame an. Auf diese Weise können Sie auch zwischen Blogs und der Blogbeitrags- oder Listing-Ansicht für Blogvorlagen wählen.
- Wählen Sie Vorschau ohne Anzeigeoptionen aus, um eine Vorschau der Vorlage ohne zusätzliche Optionen anzuzeigen.
Vorschau mit einer neuen Seite
Wenn Sie Drag-and-Drop-Bereiche, Standardparameterwerte in Modulen oder andere wichtige Komponenten ändern, empfiehlt es sich, mithilfe der Vorlage eine Website-Seite, einen Blog, einen Blogbeitrag oder eine E-Mail zu erstellen. Sie können dann verschiedene Werte für die Modulfelder ausprobieren und testen, wie Ihre Vorlage tatsächlich aussehen wird. Anschließend können Sie die Vorlage so optimieren, dass Content-Autoren ideal mit ihr arbeiten können. Sie können diese Elemente entweder veröffentlichen oder zu Testzwecken im Entwurfsmodus belassen. Darüber hinaus können Sie Content-Staging oder einen Entwickler-Sandbox-Account verwenden, um Elemente zu erstellen und anzuzeigen, ohne einen Produktions-Account zu beeinträchtigen.Vorlagentypen
Vorlagen können für verschiedene Typen von Inhalten verwendet werden, z. B. für Website-Seiten und Blogbeiträge. Bei Code-Vorlagen geben Sie den Typ der Vorlage an, indem Sie eine Annotation am Anfang der Datei hinzufügen. Im Folgenden erfahren Sie mehr über die verschiedenen Typen von Vorlagen und die Annotationen, die Sie zur Kennzeichnung der einzelnen Typen verwenden können.Hinweis:
Ein Content-Autor kann die Vorlage einer Seite gegen eine andere Vorlage desselben Typs austauschen, je nachdem, ob sie dnd_area-Tags enthält.- Mit dem visuellen Drag-and-Drop-Layout-Editor erstellte Vorlagen können gegen andere Drag-and-Drop-Vorlagen oder Code-Vorlagen mit oder ohne
dnd_area-Tags ausgetauscht werden. - Code-Vorlagen mit dnd_area-Tags können nur gegen andere Code-Vorlagen mit
dnd_area-Tags ausgetauscht werden. - Code-Vorlagen ohne
dnd_area-Tags können nur gegen andere Code-Vorlagen ohnednd_area-Tags ausgetauscht werden.
Seite
templateType sind nur beim Erstellen einer E-Mail als auswählbare Vorlage sichtbar.
Um CAN-SPAM-konform zu sein, müssen E-Mail-Vorlagen über eine Reihe von erforderlichen Variablen verfügen.
E-Mail-Vorlagen verfügen außerdem über eine integrierte Funktion für inline-css, das <style>-Elementen mit einem speziellen Klassennamen oder Datenattribut hinzugefügt wurde. Das Einbinden von CSS in E-Mails ist eine Methode, um eine bessere Unterstützung über verschiedene E-Mail-Clients zu erreichen. Glücklicherweise unterstützen die meisten gängigen E-Mail-Clients inzwischen eingebettetes CSS. Dies ist jedoch nicht repräsentativ für Ihre spezifischen Empfänger. Setzen Sie Ihr Urteilsvermögen ein, um die richtige Auswahl für Ihre Empfänger zu treffen.
Hier erfahren Sie mehr über das Erstellen von E-Mail-Vorlagen.
Teilvorlage
Globale Teilvorlage
Blog
Bei der Erstellung eines Blogs sind die Blogvorlagen ähnlich aufgebaut wie die Standard-Seitenvorlagen. Der entscheidende Unterschied besteht darin, dass sie in den Content-Einstellungen als Blogvorlagen ausgewählt werden können, Seitenvorlagen hingegen nicht. Vorlagen, die mit demtemplateType blog_listing, blog_post oder blog erstellt wurden, werden nicht während der Vorlagenauswahl angezeigt, wenn ein Benutzer eine Webseite erstellt. Blogvorlagen können grundsätzlich in zwei Formen auftreten, als Blog-Listing-Seiten und als Blogbeitragsdetailseiten.
Blog-Listing
Blogbeitrag
Kombinierte Blogbeitrags- und Listing-Vorlage
Eine einzige Blogvorlage kann das Layout für die Listing- und Detailseiten übernehmen, aber in der Regel werden diese in separate Vorlagen aufgeteilt. Kombinierte Vorlagen werden in den Blogeinstellungen als für beide Optionen (Listing und Blogbeitrag) auswählbar angezeigt. Wenn Sie eine Vorlage erstellen, die nur für Beiträge oder Listings verwendet werden soll, sollten Sie stattdessenblog_post oder blog_listing verwenden.
Um die Entwicklung und die Erstellung von Inhalten zu vereinfachen, wird empfohlen, die separaten
blog_post- und blog_listing-templateTypes anstelle von kombinierten Vorlagen zu verwenden.Systemseiten
Systemseitenvorlagen werden intern für ihren spezifischen Zweck gekennzeichnet. In den Content-Einstellungen Ihres Accounts können Sie diese Vorlagen für den angegebenen Zweck auf der System-Registerkarte auswählen.Hinweis:
Der einzige Typ von Systemseitenvorlage, der über das CLI erstellt werden kann, ist die Vorlage für die Suchergebnisseite.Fehlerseiten
Fehlerseiten können in den Content-Einstellungen entweder als 404- oder als 500-Seiten festgelegt werden. Beide Vorlagen verwenden denselben templateType. Vorlagen, die mit diesem templateType erstellt wurden, werden nicht während der Vorlagenauswahl angezeigt, wenn ein Benutzer eine Webseite erstellt.E-Mail-Abo-Einstellungen
Die Seite für E-Mail-Abo-Einstellungen. Führt alle verfügbaren Abonnementtypen auf, für die sich ein Benutzer entscheiden kann. Muss das{% email_subscriptions "email_subscriptions" %}-HubL-Tag enthalten. Siehe die Vorlage für die Abonnementeinstellungen in der CMS Theme Boilerplate.
E-Mail-Back-up Abo-Kündigung
Eine Systemvorlage für E-Mail-Kündigungsseiten. Muss das{% email_simple_subscription "email_simple_subscription" %}-HubL-Tag enthalten. Siehe die Vorlage für E-Mail-Back-up Abo-Kündigung in der CMS Theme Boilerplate.
Bestätigung der Abmeldung von E-Mail-Abos
Eine Systemvorlage für Bestätigungsseiten zur Kündigung von E-Mail-Abonnements. Hierher werden Benutzer weitergeleitet, wenn sie zu der von der Variable{{ unsubscribe_link_all }} generierten URL gehen. Siehe die Vorlage für die Abonnementbestätigung in der CMS Theme Boilerplate.
Passwortaufforderung
Vorlagen für Passwortaufforderungen bieten eine gebrandete Seite, die Content-Autoren anzeigen können, um ein Passwort zu verlangen, bevor ein Besucher den eigentlichen Inhalt der Seite aufrufen kann. Vorlagen für Passwortaufforderungen werden über die Content-Einstellungen festgelegt. In diesem Artikel erfahren Sie, wie Sie Ihre Seite in HubSpot mit einem Passwort schützen. Siehe die Aufforderung für die passwortgeschützte Seite in der Boilerplate.Suchergebnisseite
Eine Systemvorlage für die integrierte Suchfunktion der CMS-Website. Siehe die Vorlage für die Suchergebnisseite in der Boilerplate.Zugriffsberechtigung
HubSpot-Accounts mit der Funktion für Mitgliedschaften (nur in CMS Hub Enterprise verfügbar) können auf ihren Websites Seiten erstellen, auf die nur Benutzer zugreifen können, die nicht zu bestimmten Listen im CRM gehören. Dies ermöglicht es den Besuchern der Website, Accounts mit Anmeldedaten einzurichten. Diese Vorlagen geben Ihnen die Kontrolle über das Erscheinungsbild dieser Seiten.Nur HTML-und-HubL-Code-Vorlagen können Mitgliedschaftsvorlagen sein.
Anmeldung für zugriffsbeschränkte Inhalte
Dies ist die Anmeldeseite, die angezeigt wird, wenn ein Benutzer versucht, auf Inhalte zuzugreifen, deren Zugriff durch die Mitgliedschaftsfunktion kontrolliert wird. Enthält in der Regel das{% member_login "member_login" %}-Modul. Siehe die Beispielvorlage für die Mitgliedschaftsanmeldung in der Boilerplate.
Registrierung für Zugriffsberechtigungen
Dies ist die Seite für die Benutzerregistrierung, auf der Benutzer einen Account erstellen können, um die Inhalte anzuzeigen, auf die die Benutzer dieser Liste zugreifen können. Enthält in der Regel das{% member_register "member_register" %}-HubL-Tag. Siehe die Beispielvorlage für die Registrierung für Mitgliedschaft in der Boilerplate.
Zurücksetzen des Passworts für die Mitgliedschaft
Dies ist die Seite zum Zurücksetzen des Passworts. Die Benutzer geben ihr neues Passwort auf dieser Seite ein. Enthält in der Regel das{% password_reset "password_reset" %}-HubL-Tag. Siehe die Beispielvorlage für das Zurücksetzen des Passworts für die Mitgliedschaft in der Boilerplate.
Anfrage zum Zurücksetzen der Zugriffsberechtigung
Dies ist die Seite für das Anfordern des Zurücksetzens des Passworts. Sie zeigt ein Formular zum Anfordern einer E-Mail zum Zurücksetzen des Passworts an. Enthält in der Regel das{% password_reset_request "password_reset_request" %}-HubL-Tag. Siehe die Beispielvorlage für das Anfordern des Zurücksetzens des Passworts für die Mitgliedschaft in der Boilerplate.
Enthaltene CMS-Dateien
Es gibt bestimmte JavaScript- und CSS-Dateien, die mit CMS-Vorlagen verbunden sind. Einige Dateien sind automatisch enthalten und können nicht entfernt werden, während andere optional hinzugefügt werden können. Weitere Informationen zur Reihenfolge, in der Stylesheets an CMS-Inhalte angehängt werden, finden Sie in diesem Artikel.jQuery
jQuery ist optional im head-Tag von HubSpot-Vorlagen enthalten. Wenn sie enthalten ist, wird sie als Teil derstandard_header_includes-HubL-Variable gerendert.
Unter Einstellungen > Website > Seiten können Sie die jQuery-Version auf 1.11.x, Version 1.7.1 ändern oder sie ganz deaktivieren. Sie können auch ein jQuery-Migrationsskript für die Abwärtskompatibilität mit älteren Browsern einfügen. Sie können jQuery in den Footer verschieben, um die Seiten-Performance zu verbessern. Durch das Verschieben von jQuery kann allerdings JavaScript beschädigt werden, das darauf angewiesen ist. Es wird empfohlen, dies zu testen, bevor Sie jQuery verschieben, indem Sie am Ende Ihrer Website-Seiten-URLs ?hsMoveJQueryToFooter=True hinzufügen.
Während jQuery in der Vergangenheit standardmäßig enthalten war, erfordert CMS Hub jQuery derzeit nicht. Die meisten Funktionen von jQuery verfügen jetzt über moderne Vanilla-JavaScript-Äquivalente, und es wird empfohlen, diese stattdessen zu verwenden. Wenn Sie jQuery verwenden müssen, empfehlen wir, die Standardversion in den Einstellungen zu deaktivieren und die neueste Version zu verwenden, die über das </body>-Tag geladen wird.
Um zu testen, ob das Entfernen von jQuery auf Ihrer Website irgendetwas beschädigt, fügen Sie ?hsNoJQuery=true am Ende der URL hinzu, während Sie Ihre Website anzeigen, insbesondere Seiten mit starker Interaktivität.
layout.css
Diese Datei, früher alsrequired_base.css bekannt, ist für die Formatierung des responsiven Rasters von HubSpot verantwortlich. Diese Datei wird automatisch in jede Drag-and-Drop-Vorlage aufgenommen, ist jedoch standardmäßig nicht in Vorlagen auf Basis von benutzerdefiniertem Code enthalten. Wenn Sie dnd_area-Tags in HTML- und HubL-Code-Vorlagen verwenden, müssen Sie die layout.css-Datei nicht laden, aber eine Version davon ist in der CMS-Boilerplate enthalten, um den schnellen Einstieg zu erleichtern.
Zusätzlich zum responsiven CSS-Raster enthält die Datei einige Klassen, die zum Ein- und Ausblenden von Elementen in verschiedenen Viewports verwendet werden können. Um mehr darüber zu erfahren, sehen Sie sich die Datei direkt an.
HubSpot-Tracking-Code
Der HubSpot-Tracking-Code wird, ausgenommen E-Mail-Vorlagen, immer automatisch mit der standard_footer_includes-HubL-Variable zu jeder HubSpot-Vorlage hinzugefügt. Der Tracking-Code lädt eine Analytics-JavaScript-Datei namensyour_HubID.js (Beispiel: 158015.js). Dieser Tracking-Code ist direkt in die GDPR-Funktionalität von HubSpot integriert.