Übersicht über Vorlagen

Last updated:

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 die Vorlage das erste, das sie bei der Erstellung einer Seite oder E-Mail auswählen.

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

Sie können eine Vorlage entweder in HubSpot oder mithilfe des CLI erstellen.

  • Um eine Vorlage mithilfe des CLI zu erstellen, führen Sie den folgenden Befehl aus:
hs create template <name> [dest]
HS-Parameter für das Erstellen einer Vorlage
ParameterDescription
name

Der Name der Vorlage

dest

Der Pfad des lokalen Verzeichnisses, in dem Sie die Vorlage erstellen möchten. Ist dies nicht der Fall, 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.  

Die Vorlage wird dann lokal erstellt. Wenn Sie die Vorlage zur Verwendung in Ihrem HubSpot-Account bereitstellen möchten, müssen Sie die Vorlage in Ihren Account hochladen. Sie können auch den watch-Befehl verwenden, um automatisch alle neuen Dateien und Änderungen an bestehenden Dateien im aktuellen Arbeitsverzeichnis und in den Unterverzeichnissen hochzuladen.

Vorschau einer Vorlage anzeigen

Nachdem Sie eine Vorlage aktualisiert haben, können Sie eine Vorschau anzeigen, um sicherzustellen, dass sie wie erwartet aussieht und sich verhält. 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 Blog-Beitrag/ein Listings/eine kombinierte Vorlage in einer Vorschau anzeigen müssen.
  • Erstellen eines neuen Elemente über eine Vorlage: Eignet sich am besten für das Testen des Drag-&-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-Tools“.
  • Klicken Sie im Dateiexplorer 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 Blog-Beitrags- oder Listing-Ansicht für Blog-Vorlagen wählen.
    • Wählen Sie „Vorschau ohne Anzeigeoptionen“ aus, um eine Vorschau der Vorlage ohne zusätzliche Optionen anzuzeigen.

template-preview-options

Vorschau mit einer neuen Seite

Wenn Sie Drag-&-Drop-Bereiche, Standardparameterwerte in Modulen oder andere wichtige Komponenten ändern, empfiehlt es sich, mithilfe der Vorlage eine Website-Seite, einen Blog, einen Blog-Beitrag 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, und sie dann 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 Blog-Beiträ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.

Bitte beachten Sie: 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-&-Drop-Layout-Editor erstellte Vorlagen können gegen andere Drag-&-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 ohne dnd_area-Tags ausgetauscht werden.

Seite

templateType: page

Seitenvorlagen sind der offenste Vorlagentyp. Sie können als jede Art von Webseite oder Landingpage dienen. Seitenlayouts werden nicht mit Komponenten vorab ausgefüllt. Code-Seitenvorlagen sind mit nur wenig Markup vorab ausgefüllt, darunter vorgeschlagene HubL-Tags für Meta-Informationen, Titel und erforderliche Header- und Footer-Includes. Beispiele für Seiten, die typischerweise eine Seitenvorlage verwenden, sind unter anderem:

E-Mail

templateType: email

E-Mail-Vorlagen werden vom E-Mail-Tool verwendet. Sie unterliegen strengsten Anforderungen, da sie in vielen verschiedenen E-Mail-Clients angezeigt werden und den besten Praktiken entsprechen müssen, um eine ordnungsgemäße Zustellbarkeit zu gewährleisten. Die Drag-&-Drop-E-Mail-Vorlagen von HTML + HubL und auch des Design-Managers werden bei der Erstellung mit Basiskomponenten vorausgefüllt. Vorlagen mit diesem 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 das Richtige für Ihre Empfänger zu tun.

Erfahren Sie mehr über das Erstellen von E-Mail-Vorlagen.

Teilvorlage

templateType: page isAvailableForNewContent: false

Teilvorlagen sind Vorlagendateien, die in andere Code-Dateien eingefügt werden können. Im Gegensatz zu globalen Teilvorlagen können Teilvorlagen einzeln bearbeitet werden, ohne dass sich dies auf andere Instanzen der Teilvorlage auswirkt. 

Erfahren Sie mehr über Teilvorlagen.

Globale Teilvorlage

templateType: global_partial
Globale Teilvorlagen sind eine Art von Vorlage, die mit HTML & HubL erstellt wurde und auf Ihrer gesamten Website wiederverwendet werden kann. Die gebräuchlichsten Arten von globalen Teilverlagen sind Header, Seitenleisten- und Footer von Websites. Durch die Aktualisierung einer globalen Teilvorlage werden alle Instanzen der globalen Teilvorlage aktualisiert.

Erfahren Sie mehr über globale Teilvorlagen und globalen Content.

Blog

Bei der Erstellung eines Blogs sind die Blog-Vorlagen ähnlich aufgebaut wie die Standard-Seitenvorlagen. Der entscheidende Unterschied besteht darin, dass sie in den Content-Einstellungen als Blog-Vorlagen ausgewählt werden können, Seitenvorlagen hingegen nicht. Vorlagen, die mit templateType blog_listing, blog_post oder blog erstellt wurden, werden im Vorlagenauswahlbildschirm nicht angezeigt, wenn ein Benutzer eine Webseite erstellt. Blog-Vorlagen können grundsätzlich in zwei Formen auftreten, als Blog-Listing-Seiten und als Blog-Beitragsdetailseiten. 

Blog-Listing

templateType: blog_listing

Die Blog-Listing-Vorlage ist die Vorlage, die die Benutzer sehen, wenn sie zur URL des Blogs navigieren. Diese Vorlage wird in der Regel verwendet, um Zusammenfassungen, Titel und Feature-Bilder aller Beiträge im Blog aufzulisten, und zeigt außerdem eine Seitennummerierung an, um zu älteren Beiträgen zu gelangen.

Blog-Beitrag

templateType: blog_post

Die Blog-Beitragsvorlage ist die Vorlage, die Benutzer sehen, wenn sie einen einzelnen Beitrag im Blog anzeigen. Diese Vorlagen zeigen in der Regel den vollständigen Inhalt des Beitrags.

Kombinierte Blog-Beitrags- und Listing-Vorlage

Eine einzige Blog-Vorlage 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 Blog-Einstellungen als für beide Optionen, Listing und Blog-Beitrag, auswählbar angezeigt. Wenn Sie eine Vorlage erstellen, die nur für Beiträge oder Listings verwendet werden soll, sollten Sie stattdessen blog_post oder blog_listing verwenden.

templateType: blog

Um die Entwicklung und die Erstellung von Inhalten zu vereinfachen, wird empfohlen, die separaten templateTypes blog_post und blog_listing 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.

Bitte beachten: 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 im Bildschirm für die Vorlagenauswahl angezeigt, wenn ein Benutzer eine Webseite erstellt.

templateType: error_page

E-Mail-Abo-Einstellungen

Die Seite für E-Mail-Abo-Einstellungen Listet alle verfügbaren Abonnementtypen auf, für die sich ein Benutzer entscheiden kann. Erforderlich, um das {% email_subscriptions "email_subscriptions"  %}-HubL-Tag zu enthalten. Siehe die Vorlage für die Abonnementeinstellungen in der CMS Theme Boilerplate.

templateType: email_subscription_preferences_page

E-Mail-Back-up Abo-Kündigung

Eine Systemvorlage für E-Mail-Kündigungsseiten. Erforderlich, um das {% email_simple_subscription "email_simple_subscription" %}-HubL-Tag zu enthalten. Siehe die Vorlage für E-Mail-Back-up Abo-Kündigung in der CMS Theme Boilerplate.

templateType: email_backup_unsubscribe_page

Bestätigung der Abmeldung von E-Mail

Eine Systemvorlage für Bestätigungsseiten zur E-Mail-Kündigung. 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.

templateType: email_subscriptions_confirmation_page

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 anzeigen kann. Vorlagen für Passwortaufforderungen werden über die Content-Einstellungen festgelegt. In diesem Artikel erfahren Sie, wie Sie Seite in HubSpot mit einem Passwort schützen. Siehe die Aufforderung für die passwortgeschützte Seite in der Boilerplate.

templateType: password_prompt_page

Suchergebnisseite

Eine Systemvorlage für die integrierte Suchfunktion der CMS-Website. Siehe die Vorlage für die Suchergebnisseite in der Boilerplate.

templateType: search_results_page

Mitgliedschaft

HubSpot-Accounts mit der Funktion für Mitgliedschaften (nur CMS Hub Enterprise) 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 + HubL-Vorlagen können Mitgliedschaftsvorlagen sein.

Mitgliedschaftsanmeldung

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.

templateType: membership_login_page

Registrierung für Mitgliedschaft

Dies ist die Seite für die Benutzerregistrierung, auf der die 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.

templateType: membership_register_page

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.

templateType: membership_reset_page

Anfrage zum Zurücksetzen der Mitgliedschaft

Dies ist die Seite für das Anfordern des Zurücksetzens des Passworts. Sie zeigt ein Formulars zum Anfordern einer E-Mail zum Zurücksetzen des Passworts. 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.

templateType: membership_reset_request_page

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 der standard_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 derzeit nicht jQuery. 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 als required_base.css bekannt, ist für die Formatierung des responsiven Rasters von HubSpot verantwortlich. Diese Datei wird automatisch in jede Drag- & -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 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 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 namens Ihre_HubID.js (Beispiel 158015.js). Dieser Tracking-Code ist direkt in die GDPR-Funktionalität von HubSpot integriert.

Weiterführende Ressourcen


War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.