Übersicht über Vorlagen
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.
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:
Parameter | Description |
---|---|
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.
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.
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.
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 ohnednd_area
-Tags ausgetauscht werden.
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-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.
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.
Erfahren Sie mehr über globale Teilvorlagen und globalen Content.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Eine Systemvorlage für die integrierte Suchfunktion der CMS-Website. Siehe die Vorlage für die Suchergebnisseite in der Boilerplate.
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.
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.
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.
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.
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.
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 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.
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.
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.
Vielen Dank, dass Sie Ihr Feedback mit uns geteilt haben.