Zum Hauptinhalt
Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt. Er wurde automatisch mit einer Software übersetzt und unter Umständen nicht korrekturgelesen. Die englischsprachige Fassung gilt als offizielle Version und Sie können dort die aktuellsten Informationen finden. Hier können Sie darauf zugreifen.

Designs verwenden

Zuletzt aktualisiert am: August 19, 2021

Produkte/Lizenzen

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise

Ein Design ist eine Reihe von Vorlagen, Modulen, globalen Inhalten und Stileinstellungen, die zur Erstellung einer Website verwendet werden können. Designs können vom Marketplace für Vorlagen heruntergeladen werden. CMS Hub-Accounts haben außerdem auch Zugriff auf HubSpot-Standarddesigns. Sie können Seiten, die ein Design verwenden, mit dem Drag-&-Drop-Content-Editor bearbeiten und in Ihren Blog-Einstellungen die Verwendung eines Designs für Blog-Vorlagen festlegen.

Designs verstehen

Ein Design ist eine Reihe von Dateien für Ihre Website, darunter:

  • Kodierte Vorlagen: Eine Reihe von Vorlagen für Ihre Website, einschließlich einer Startseite, einer Info-Seite, einer Landing-Page sowie Blog-Vorlagen. Diese Vorlagen werden zur Anpassung durch einen Entwickler kodiert, die Inhalte und das Layout können jedoch auch im Drag-&-Drop-Content-Editor angepasst werden. 
  • Module: Eine Reihe eindeutiger Designmodule, die Sie zu Inhalten hinzufügen können, in denen dieses Design zum Einsatz kommt. 
  • Globale Inhalte: Inhalte, die auf mehreren Seiten stehen, z. B. eine Website-Kopfzeile oder -Fußzeile. Sie können globale Inhalte direkt über den Drag-&-Drop-Seiten-Editor bearbeiten.
  • Designeinstellungen: Stileinstellungen für Vorlagen, die ein Design verwenden, einschließlich Schriftarten, Abstände und Farben.

Ein aktives Design verwenden

Sie können ein aktives Design festlegen, um die Seiten dieses Designs als die Standardoptionen für neu erstellte Seiten anzuzeigen. Durch das Festlegen oder Ändern eines aktiven Designs wird nicht Design geändert, das für vorhandene Inhalte verwendet wird. Zusätzliche Designs können im Marketplace für Vorlagen gekauft werden. 

Ein aktives Design festlegen

  • Gehen Sie zu Ihren Inhalten:

    • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Website-Seiten.
    • Landing-Pages: Navigieren Sie in Ihrem HubSpot-Account zu Marketing > Landing-Pages.
  • Klicken Sie oben rechts auf das Dropdown-Menü „Erstellen“ und wählen Sie „Website-Seite“ oder „Landing-Page“. aus.
  • Geben Sie im Dialogfeld einen Seitennamen ein und klicken Sie auf „Seite erstellen“.
  • Wählen Sie im Bildschirm für die Designauswahl ein Design aus. Klicken Sie oben rechts auf „Vorschau“, um eine Vorschau des Designs anzuzeigen, oder wählen Sie „Auswählen und fortfahren“ aus, um das Design als aktiv festzulegen. 

select-a-new-active-theme

Zu einem anderen aktiven Design wechseln

  • Gehen Sie zu Ihren Inhalten:

    • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Website-Seiten.
    • Landing-Pages: Navigieren Sie in Ihrem HubSpot-Account zu Marketing > Landing-Pages.
  • Klicken Sie oben rechts auf das Dropdown-Menü „Erstellen“ und wählen Sie „Website-Seite“ oder „Landing-Page“. aus.
  • Geben Sie im Dialogfeld einen Seitennamen ein und klicken Sie auf „Seite erstellen“.
  • Klicken Sie im Bildschirm für die Vorlagenauswahl auf das Dropdown-Menü „Design“ und wählen Sie „Design ändern“ aus. 

switch-active-themes

  • Wählen Sie im Bildschirm für die Designauswahl ein Design aus. Klicken Sie oben rechts auf „Vorschau“, um eine Vorschau des Designs anzuzeigen, oder wählen Sie „Auswählen und fortfahren“ aus, um das Design als aktiv festzulegen. 

select-new-active-theme

Eine Seite erstellen, die ein Design verwendet

  • Gehen Sie zu Ihren Inhalten:

    • Website-Seiten: Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Website-Seiten.
    • Landing-Pages: Navigieren Sie in Ihrem HubSpot-Account zu Marketing > Landing-Pages.
  • Klicken Sie oben rechts auf das Dropdown-Menü „Erstellen“ und wählen Sie „Website-Seite“ oder „Landing-Page“. aus.
  • Geben Sie im Dialogfeld einen Seitennamen ein und klicken Sie auf „Seite erstellen“.
  • Klicken Sie im Bildschirm für die Vorlagenauswahl auf eine Vorlage. Vorlagen aus Ihrem aktiven Design werden im Abschnitt „Designvorlagen“ angezeigt. Um eine Vorlage auszuwählen, die nicht Teil Ihres aktiven Designs ist, klicken Sie zunächst auf „Andere Vorlagen“ und dann auf eine Vorlage
  • Klicken Sie oben rechts auf „Vorschau“, um die Vorschau einer ausgewählten Vorlage anzuzeigen, oder „Vorlage auswählen“, um mit dem Content-Editor fortzufahren. 

select-template-from-active-theme

  • Im Content-Editor können Sie mithilfe des Drag-&-Drop-Editors die Inhalte von Seiten bearbeiten. 
  • Klicken Sie oben rechts auf „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen live zu schalten. 

Designvorlage für einen Blog übernehmen

In Ihren Blog-Einstellungen können Sie festlegen, dass ein Blog das gleiche Design wie Ihre Seiten verwendet. Die Vorlagen für Blog-Beiträge und Blog-Listing-Seiten werden separat ausgewählt.  

  • Klicken Sie in Ihrem HubSpot-Account in der Hauptnavigationsleiste auf das settings Zahnradsymbol, um die Einstellungen aufzurufen.
  • Gehen Sie im linken Seitenmenü zu „Website“ „Blog“.
  • Klicken Sie, wenn Sie mehrere Blogs haben, auf das Dropdown-Menü „Blog zum Ändern auswählen“ und wählen Sie einen Blog aus. 
  • Klicken Sie auf die Registerkarte „Vorlagen“.
  • Klicken Sie in den Abschnitten „Blog-Beitrag“ und „Blog-Listing“ auf das Dropdown-Menü „Aktionen“ und wählen Sie „Vorlage ändern“ aus.

select-blog-template

  • Wählen Sie im Bildschirm für die Designauswahl Ihr Design aus und wählen Sie dann eine Vorlage mit diesem Design aus. Klicken Sie unten rechts auf „Fertig“

select-a-theme-blog-template

  • Wenn Sie die Vorlagen für Blog-Beiträge und Blog-Listing-Seiten festgelegt haben, klicken Sie unten links auf „Speichern“

Designeinstellungen bearbeiten

Sie können die Stile Ihres Designs, einschließlich Schriftart, Farben und Abstände, in Ihren Designeinstellungen anpassen. Hier bearbeitete Stile werden für alle Seiten und Designmodule übernommen, die in diesem Design enthalten sind. Erfahren Sie mehr über das Verwalten von Designeinstellungen.

edit-global-theme-fonts

Designs verwalten

Im Design-Manager können Sie ein Design bearbeiten, klonen oder in einen anderen HubSpot-Account kopieren. Außerdem können Sie HubSpot-Standarddesigns, geklonte Designs und benutzerdefinierte Designs löschen. 

Ein Design klonen

Um die Code-Dateien von Standarddesigns im Design-Manager zu bearbeiten, müssen sie zuerst geklont werden. Benutzerdefinierte Designs und Designs, die im Vorlagen-Marketplace gekauft wurden, können ebenfalls geklont, aber auch direkt bearbeitet werden. 

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Klicken Sie im Finder auf den Ordner „@hubspot“. Dieser Ordner enthält all Ihre Designs und Standardmodule, darunter Drag-&-Drop-Module für E-Mails.

    design-manager-hubspot-folder
  • Klicken Sie mit der rechten Maustaste auf einen Desing-Ordner und wählen Sie dann „Design klonen“ aus.

    design-manager-theme-folder-clone
  • Geben Sie im Dialogfeld einen Namen für das Design ein und klicken Sie dann auf „Erstellen“.

Das Design wird in den Stammordner kopiert und im Finder mit Ihren anderen Ordnern aufgeführt. 

Design in einen anderen Account kopieren

Sie können einen Design-Ordner aus einem Account in einen anderen kopieren.  Sie müssen ein Benutzer mit Berechtigungen zur Nutzung von Design-Tools in beiden Accounts sein.

Bitte beachten: Design-Ordner in den @hubspot- oder @marketplace-Verzeichnissen können nicht zwischen Accounts kopiert werden.

So kopieren Sie ein Design in einen Account:

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Bewegen Sie den Mauszeiger im Finder über den Design-Ordner, den Sie kopieren möchten, und klicken Sie dann mit der rechten Maustaste auf den Ordner und wählen Sie „In anderen Account kopieren“ aus.

    copy-theme-folder-to-different-account
  • Wählen Sie im Dialogfeld einen Account aus und klicken Sie dann auf „Element kopieren“. Der Ordner wird im angegebenen Account angezeigt, sobald der Kopiervorgang abgeschlossen ist. 

Ein Design hochladen

Benutzer in CMS Hub-Accounts können HubSpot-Designs vom ThemeForest Marketplace von Envato herunterladen und sie dann in HubSpot hochladen 

  • Gehen Sie zum Abschnitt „HubSpot CMS Hub“ des ThemeForest Marketplace von Envato.
  • Kaufen Sie ein Design im Marketplace und laden Sie es herunter.
  • Doppelklicken Sie auf Ihren Download, um die komprimierte Datei zu erweitern. Dadurch wird ein Ordner mit dem neuen Design und seiner Dokumentation erstellt. 
  • Klicken Sie in Ihrem HubSpot-Account in der Hauptnavigationsleiste auf das settings Zahnradsymbol, um die Einstellungen aufzurufen.
  • Gehen Sie in der linken Seitenleiste zu „Website“ > „Designs“.
  • Klicken Sie oben rechts auf „Design hochladen“
  • Öffnen Sie in den Dateien Ihres Computers den neuen Ordner und wählen Sie Ihr Design aus. 

select-theme-file

  • Wenn Ihr Design fertig hochgeladen ist, wird oben auf der Seite ein Banner angezeigt. Es kann einige Minuten dauern, bis Ihr Design in HubSpot verfügbar ist. 

upload-theme

Design löschen

HubSpot-Standarddesigns, geklonte Designs und hochgeladene Designs können aus dem Design-Manager gelöscht werden:

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Klicken Sie im Finder auf den Ordner mit den Elementen des Designs.
  • Klicken Sie auf das Dropdown-Menü „Datei“ und wählen Sie „[Ordnername] löschen“ aus. 
  • Wählen Sie im Dialogfeld die Option „Ich bin mir sicher, dass ich diesen Ordner löschen möchte“ aus und klicken Sie dann auf „Diesen Ordner löschen“

Gekaufte Designs müssen über den Marketplace für Vorlagen deinstalliert werden: 

  • Klicken Sie in Ihrem HubSpot-Account in der Hauptnavigationsleiste auf das Marketplace-Symbol (marketplace).
  • Navigieren Sie zur Registerkarte „Gekauft“.
  • Bewegen Sie den Mauszeiger über das Design, klicken Sie dann auf das Dropdown-Menü Aktionen und wählen Sie „Deinstallieren“ aus.
  • Klicken Sie im Dialogfeld auf „Deistallieren“.