Ü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.

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: 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 codierte Vorlagen ohne dnd_area-Tags ausgetauscht werden.

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

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.

templateType: blog_listing

Blog-Beitrag

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.

templateType: blog_post

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.

E-Mail

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.

templateType: email

Seite

Seitenvorlagen sind der offenste Vorlagentyp. Sie können als jede Art von Webseite oder Landing-Page 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:

templateType: page

Systemseiten

Systemseitenvorlagen werden intern für ihren spezifischen Zweck gekennzeichnet. In den Content-Einstellungen können Sie diese Vorlagen für den angegebenen Zweck auf der System-Registerkarte auswählen.

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. Muss das HubL-Tag {% email_subscriptions "email_subscriptions" %} 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. Muss das HubL-Tag {% email_simple_subscription "email_simple_subscription" %} enthalten. Siehe die Vorlage für E-Mail-Back-up Abo-Kündigung in der CMS Theme Boilerplate.

templateType: email_backup_unsubscribe_page

E-Mail-Abo-Kündigungsbestätigung

Eine Systemvorlage für Bestätigungsseiten zur E-Mail-Kündigung. Hierher werden Benutzer weitergeleitet, wenn sie zu der von der {{ unsubscribe_link_all }}-Variable 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 (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 Modul {% member_login "member_login" %}. 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 HubL-Tag {% member_register "member_register" %}. 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 HubL-Tag {% password_reset "password_reset" %}. 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 HubL-Tag {% password_reset_request "password_reset_request" %}. Siehe die Beispielvorlage für das Anfordern des Zurücksetzens des Passworts für die Mitgliedschaft in der Boilerplate.

templateType: membership_reset_request_page

Vorschau einer Vorlage anzeigen

Sie sollten Ihre Arbeit nach der Aktualisierung der Vorlagen immer überprüfen, um sicherzustellen, dass sie wie beabsichtigt aussehen und funktionieren. Der Design-Manager von HubSpot bietet ein Tool zur Vorschau von Modulen und Vorlagen. Um die Vorschau einer Vorlage anzuzeigen, öffnen Sie die Vorlage im Design-Manager und klicken Sie in der oberen Leiste auf „Vorschau“.

Design-Manager-Vorschau mit Dropdown-Menü für Anzeigeoptionen

Bei den meisten Vorlagen wird in der Vorschau der Standardzustand der Vorlage angezeigt – der gleiche Zustand, den Sie sehen, wenn Sie eine Website-Seite aus der Vorlage erstellen, diese jedoch nicht bearbeiten. Es gibt zwei Vorschaumodi für Vorlagen, „Live-Vorschau mit Anzeigeoptionen“ und „Live-Vorschau ohne Anzeigeoptionen“. 

Die Live-Vorschau mit Anzeigeoptionen zeigt die Seite in einem Iframe an und stellt Ihnen einige Tools zur Verfügunng, mit denen Sie die Eignung für Mobilgeräte testen und sehen können, wie sich Domain-Stylesheets auf Ihre Vorlage auswirken.

Live-Vorschau mit Anzeigeoptionen dargestellt

Blog-Vorlagen sind insofern einzigartig, als Sie ein Blog-Listing und Blog-Beiträge benötigen, um ein Gefühl dafür zu bekommen, wie die Vorlage funktioniert. In der Vorschau für den Blog können Sie einen bestehenden Blog auswählen, um die Vorschau mit seinem Inhalt zu füllen. Von dort aus können Sie wählen, ob Sie die Listing- oder die Detailseite für diese Blog-Vorlage anzeigen möchten.

Live-Vorschau mit Anzeigeoptionen für Blog

Das Anzeigen einer Vorschau der Vorlagen mithilfe der Vorschaufunktion eignet sich möglicherweise für kleinere visuelle Anpassungen. Wenn Sie Drag-&-Drop-Bereiche, Standardparameterwerte in Modulen oder andere wichtige Komponenten ändern, erstellen Sie am besten mithilfe der Vorlage eine Website-Seite, einen Blog, einen Blog-Beitrag oder eine E-Mai. 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 Content-Staging, eine Entwurfsvorschau oder Ihren Entwickler-Sandbox-Account verwenden, um die Seite zu betrachten, ohne sich Sorgen machen zu müssen, dass die Seite für die ganze Welt sichtbar ist.

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 die Fußzeile verschieben, um die Leistung der Seite zu verbessern. Das Verschieben von jQuery kann den JavaScript beschädigen, das darauf angewiesen ist. Um Ihre Website zu testen, fügen Sie ?hsMoveJQueryToFooter=True am Ende Ihrer URL ein, während Sie die wichtigsten Seiten Ihrer Website aufrufen, um sicherzustellen, dass nichts beschädigt wird.

jQuery war in der Vergangenheit standardmäßig enthalten, weil es für die HubSpot-Funktionen früher erforderlich war. CMS Hub benötigt kein jQuery. Für die meisten Funktionen von jQuery gibt es jetzt moderne Vanilla-Javascript-Äquivalente, und wir empfehlen deren Verwendung. 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 mehrere Seiten Ihrer Website anzeigen, insbesondere solche mit starker Interaktivität.

layout.css

Layout.css (früher bekannt als required_base.css) ist die Datei, die für das Styling des responsiven Rasters von HubSpot verantwortlich ist. Diese Datei ist immer automatisch in jeder Drag-&-Drop-Vorlage enthalten. Sie ist nicht standardmäßig in benutzerdefinierten Vorlagen enthalten. Entwickler, die 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 Theme 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. Sie können die Datei hieranzeigen.

HubSpot-Tracking-Code

Der HubSpot-Tracking-Code wird immer automatisch zu jeder HubSpot-Vorlage hinzugefügt (ausgenommen E-Mail-Vorlagen). Er ist in der standard_footer_includes-HubL-Variable enthalten. 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.


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.