Design Manager

Vorlagen für Website-Seiten, E-Mails und Blog-Beiträge im Vorlagendesigner erstellen

Zuletzt aktualisiert am: Oktober 19, 2020

Produkte/Lizenzen

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Ehemaliges Marketing Hub Basic

Verwenden Sie den Vorlagendesigner von HubSpot, um Vorlagen durch Hinzufügen von Modulen in der Drag-&-Drop-Oberfläche zu erstellen. Die Vorlagen dienen anschließend als Grundlage für Website-Seiten, E-Mails und Blog-Beiträge. Weitere Informationen zum Erstellen von Vorlagen in HubSpot finden Sie in dieser Lektion der Academy.

Wenn der technische Kundendienst von HubSpot Ihre Vorlagen für Sie eingerichtet hat, verfügen Sie bereits über eingerichtete benutzerdefinierte Vorlagen, die auf die Designanforderungen Ihrer Website zugeschnitten wurden.

Wenn Sie eine HTML-Vorlage erstellen möchten, erfahren Sie in diesem Artikel, wie Sie eine benutzerdefinierte Code-Vorlage erstellen.

Bitte beachten:Um E-Mail-Vorlagen zu erstellen, ist ein Marketing Hub Professional- oder Enterprise-Abonnement erforderlich. CMS Hub-Accounts können E-Mails mithilfe des Drag-&-Drop-Editors erstellen.

Was ist eine HubSpot-Vorlage?

HubSpot-Vorlagen dienen als Grundlage für die von Ihnen erstellten Inhalte. Vorlagen können über eine Drag-&-Drop-Benutzeroberfläche durch die Anordnung diverser Inhaltsmodule erstellt werden. 

Mit dem Vorlagendesigner können Sie eine Idee, Skizze oder einen Prototyp in eine Vorlage zum Erstellen von Inhalten verwandeln.

Vom Modell zum Layout

Eine neue Vorlage erstellen

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Klicken Sie in der Menüleiste auf „Datei“ > „Neue Datei“, um eine neue Vorlage zu erstellen.

new-file

  • Wählen Sie im Dialogfeld die Option „Drag-&-Drop“ aus.
  • Verwenden Sie das Dropdown-Menü, um den Vorlagentyp auszuwählen. Obwohl die meisten Standardmodule für jede Vorlage verfügbar sind, sind einige Module auf bestimmte Vorlagentypen beschränkt. Sie können aus den folgenden Vorlagentypen auswählen:
    • Blog: Strukturierte Vorlagen, die als Grundlage für Ihre einzelnen Blog-Beiträge und für Blog-Listing-Seiten dienen.
    • E-Mail: Strukturierte Vorlagen, die als Grundlage für Ihre E-Mails dienen.
    • Seite: Strukturierte Vorlagen, die als Grundlage für Ihre Webseiten und Ihre Landing-Pages dienen.
    • System: Strukturierte Vorlagen für Fehler-, Passworteingabe- und Abonnement-Seiten
  • Geben Sie als Nächstes einen Dateinamen ein. Wenn Sie fertig sind, klicken Sie auf Erstellen.
Neue Datei
 

Vorlagen strukturieren und anpassen

Mit dem Inspektor auf der rechten Seite können Sie Ihrer Vorlage weitere Module hinzufügen. Klicken Sie im Inspektor auf „+ Hinzufügen“, um nach Modulen zu suchen und diese Ihrer Drag-&-Drop-Vorlage hinzuzufügen. Erfahren Sie mehr über das Bearbeiten der Struktur Ihrer Vorlage.

Um die Stile Ihrer Vorlage anzupassen, können Sie die Optionen im Inspektor verwenden. Wenn keine bestimmen Module ausgewählt sind, können Sie im Inspektor Styling zum Header-Bereich (<head>) der Vorlage hinzufügen. Klicken Sie auf ein Modul oder eine Gruppe, um die Styling-Optionen für diese Komponenten anzuzeigen. Erfahren Sie mehr darüber, wie Sie die Stile Ihrer Vorlage mithilfe des Inspektors formatieren.

Bitte beachten:Das Anhängen von CSS- oder JavaScript-Dateien an eine E-Mail-Vorlage ist nicht möglich, Sie können jedoch benutzerdefiniertes HTML, Body-Klassen und Inline-Styling hinzufügen

HubSpot-Hilfeartikel – Screenshot

Vorlage in Vorschau anzeigen und veröffentlichen

  • Klicken Sie oben rechts auf „Vorschau“, um eine Vorschau Ihrer Vorlage in einem Webbrowser anzuzeigen. Wenn Sie die Option „Live-Vorschau mit Anzeigeoptionen“ auswählen, können Sie eine Vorschau Ihrer E-Mail auf verschiedenen Geräten anzeigen lassen.

  • Nachdem Sie Ihre Vorlage fertiggestellt haben, klicken Sie oben rechts auf „Änderungen veröffentlichen“.
    HubSpot-Hilfeartikel – Screenshot

Nachdem Ihre neue Vorlage veröffentlicht wurde, können Sie sie für neue Seiten oder E-Mails auswählen. In Ihren Blog-Einstellungen können Sie diese Vorlage auch für Ihren Blog auswählen.