Designs verwenden

Ein Design ist eine Reihe von Vorlagen, Modulen, globalen Inhalten und Stileinstellungen, die zur Erstellung einer Website verwendet werden können. Sie können Seiten und Beiträge, die ein Design verwenden, im Content-Editor bearbeiten und in Ihren Blogeinstellungen festlegen, dass Blogvorlagen ein Design verwenden.

Alle Accounts haben Zugriff auf mindestens ein Standarddesign von HubSpot. Designs können auch vom HubSpot-Vorlagen-Marketplace heruntergeladen werden.

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 Landingpage sowie Blogvorlagen. Diese Vorlagen werden zur Anpassung durch einen Entwickler kodiert, die Inhalte und das Layout können jedoch auch im 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 globalen Content 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 das Design geändert, das für vorhandene Inhalte verwendet wird. Dafür muss die aktuelle Vorlage des Inhalts ausgetauscht werden. Zusätzliche Designs können im HubSpot-HubSpot-Marketplace für Vorlagen erworben werden.

1. Gehen Sie zu Ihrem Content:
   • Website-Seiten:Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
   • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
2. Klicken Sie auf Erstellen oder Loslegen.
3. Klicken Sie auf der Seite für die Designauswahl auf der gewünschten Designkarte auf Als aktives Design festlegen. Um eine Vorschau des Designs anzuzeigen, klicken Sie auf Designvorschau.
4. Klicken Sie auf der Seite für die Vorlagenauswahl auf der gewünschten Vorlage-Karte auf Vorlage auswählen . Fahren Sie dann mit dem Erstellen einer Seite mit dem Drag-and-Drop-Editor von HubSpot fort

Aktives Design ändern

1. Gehen Sie zu Ihrem Content:

   • Website-Seiten:Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
   • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
2. Klicken Sie oben rechts auf Erstellen oder Loslegen. 
3. Um das Design von Website-Seiten aus zu ändern, klicken Sie auf das Dropdown-Menü Design und wählen Sie Design ändern aus. Klicken Sie dann auf der gewünschten Designkarte auf Als aktives Design festlegen .

4. Um das Design von Landingpages aus zu ändern, klicken Sie im Menü auf der linken Seite auf den Namen des Designs. Klicken Sie dann auf der gewünschten Designkarte auf Als aktives Design festlegen .

5. Bewegen Sie den Mauszeiger auf dem Bildschirm zur Auswahl eines Designs und klicken Sie dann auf Design-Vorschau , um eine Vorschau des Designs zu öffnen, oder auf Als aktiven Design festlegen.
6. Sie können dann eine Vorlage aus dem Design auswählen, um mit dem Drag-and-Drop-Editor von HubSpot eine Seite zu erstellen.

Eine Seite erstellen, die ein Design verwendet

1. Gehen Sie zu Ihrem Content:

   • Website-Seiten:Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
   • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
2. Klicken Sie oben rechts auf Erstellen oder Loslegen.
3. Wenn Sie noch kein Design ausgewählt haben, werden Sie zum Bildschirm für die Designauswahl weitergeleitet. Klicken Sie auf der gewünschten Designkarte auf Als aktives Design festlegen. Um eine Vorschau des Designs anzuzeigen, klicken Sie auf Designvorschau.
4. Im Bildschirm für die Auswahl von Vorlagen werden Vorlagen von Ihrem aktiven Design im Abschnitt Designvorlagen angezeigt. Um Vorlagen anzuzeigen, die nicht Teil Ihres aktiven Designs sind, klicken Sie auf Andere Vorlagen.
5. Um eine Vorlage aus dem Design auszuwählen, klicken Sie auf Vorlage auswählen oder auf Verwenden.
6. Im Content-Editor können Sie mithilfe des Drag-and-Drop-Editors die Inhalte von Seiten bearbeiten.

7. Um Ihre Änderungen live zu schalten, klicken Sie oben rechts auf Veröffentlichen oder Aktualisieren .

Designvorlage für einen Blog übernehmen

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

1. Klicken Sie in Ihrem HubSpot-Account in der Hauptnavigationsleiste auf das settings Zahnradsymbol, um die Einstellungen aufzurufen.
2. Gehen Sie im Menü der linken Seitenleiste zu Content > Blog.
3. Klicken Sie, wenn Sie mehrere Blogs haben, auf das Dropdown-Menü Blog zum Ändern auswählen und wählen Sie einen Blog aus.
4. Klicken Sie auf den Tab Vorlagen.
5. Klicken Sie in den Abschnitten Blogbeitragsvorlage und Blog-Listing-Seite auf das Dropdown-Menü Aktionen und wählen Sie Vorlage ändern aus.

6. Klicken Sie im Bildschirm für die Designauswahl auf die gewünschte Designkarte und dann auf die Vorlage-Karte. Klicken Sie unten rechts auf Fertig.

Bitte beachten: für Blog-Listing-Seiten, die im Content-Editor bearbeitet werden können, führen diese Schritte zum Content-Editor und nicht zum Bildschirm für die Auswahl des Designs.

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.

Designs verwalten

Im Design-Manager können Sie ein Design bearbeiten, klonen oder in einen anderen HubSpot-Account kopieren. Sie können auch geklonte Designs und benutzerdefinierte Designs löschen sowie untergeordnete Designs erstellen.

Sie können die Designeinstellungen eines untergeordneten Designs bearbeiten, ohne dass sich dies auf das übergeordnete Design auswirkt, aber es werden keine zusätzlichen Kopien von Designelementen erstellt. Um die Elemente eines übergeordneten Designs zu kopieren, wird empfohlen, das Design zu klonen.

Ein Design klonen

Um die Code-Dateien von Standarddesigns im Design-Manager zu bearbeiten, müssen sie zuerst geklont werden.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf den Ordner @hubspot. Dieser Ordner enthält alle Designs und Standardmodule, einschließlich Drag-&-Drop-Module für E-Mails.
3. Klicken Sie auf einen Design-Ordner.
4. Klicken Sie auf das Dropdown-Menü Datei und wählen Sie Design klonen aus.
5. Geben Sie im Dialogfeld einen Namen für das Design ein.
6. Um den Dateispeicherort des geklonten Designs zu ändern, klicken Sie im Feld Dateispeicherort auf Ändern . Wählen Sie dann einen Standort aus. Standardmäßig wird der Stammordner ausgewählt.
7. Wenn Sie fertig sind, klicken Sie auf Erstellen.

Ein untergeordnetes Design erstellen

Im Design-Manager können Sie ein untergeordnetes Design auf der Grundlage eines im HubSpot-Marketplace für Vorlagen erworbenen Designs oder eines HubSpot-Standarddesigns erstellen. Sie können die Designeinstellungen eines untergeordneten Designs bearbeiten, ohne dass sich dies auf das übergeordnete Design auswirkt.

Entwickler können ebenfalls untergeordnete Designs erstellen, die auf benutzerdefinierten Designs basieren , und wie in der Entwicklerdokumentation erläutert untergeordnete Designs mithilfe der CLI erstellen . Erfahren Sie mehr über das Arbeiten mit untergeordneten Designs.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf den @marketplace-Ordner für Designs vom HubSpot-Marketplace für Vorlagen oder auf den @hubspot-Ordner für Standarddesigns.
3. Klicken Sie mit der rechten Maustaste auf einen Design-Ordner und wählen Sie dann Untergeordnetes Design erstellen aus.
4. Geben Sie im Dialogfeld einen Namen für Ihr untergeordnetes Design ein.
5. Um zu ändern, wo das untergeordnete Design gespeichert werden soll, klicken Sie im Abschnitt Dateispeicherort auf Ändern. Klicken Sie auf einen Ordner und dann auf Auswählen.
6. Um die Namen der CSS- und JS-Dateien des Designs anzupassen, klicken Sie auf Erweiterte Optionen und geben Sie dann neue Dateinamen in die Felder CSS und JS ein.
7. Um den Vorgang abzuschließen, klicken Sie auf Untergeordnetes Design erstellen. Sie können das Layout für das untergeordnete Design im Content-Editor bearbeiten.

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 des Design-Managers 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:

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Bewegen Sie den Mauszeiger im Finder über den Design-Ordner , den Sie kopieren möchten, klicken Sie dann mit der rechten Maustaste auf den Ordner und wählen Sie In anderen Account kopieren aus.
3. Klicken Sie im Dialogfeld auf das Dropdown-Menü Zielaccount und wählen Sie einen Account aus. Klicken Sie dann auf Element kopieren. Der Ordner wird im Ziel-Account angezeigt, sobald der Kopiervorgang abgeschlossen ist.
   
   

Ein Design hochladen

Benutzer in Content Hub-Accounts können HubSpot-Designs vom ThemeForest Marketplace von Envato erwerben und sie dann über den Bildschirm für die Vorlagenauswahl nach HubSpot hochladen:

1. Gehen Sie zum Abschnitt CMS Hub des ThemeForest Marketplace von Envato.
2. Erwerben Sie ein Design im Marketplace.
3. Sie erhalten eine E-Mail mit einem Kaufcode für Ihr erworbenes Design. Kopieren Sie den Kaufcode.
4. Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
5. Klicken Sie oben rechts auf Erstellen.
6. Klicken Sie auf der Seite Vorlage auswählen auf das Dropdown-Menü Design und dann auf Design ändern.

7. Klicken Sie auf der Seite Design auswählen unten auf der Seite Ein Design von ThemeForest installieren.
8. Fügen Sie den Kaufcode aus der E-Mail im Dialogfeld ein und klicken Sie dann auf Design installieren.
9. Melden Sie sich auf dem neuen Tab beim ThemeForest Marketplace von Envato an, um den Installationsvorgang abzuschließen.
10. Wenn Sie sich angemeldet haben, wird ein Banner in HubSpot angezeigt. Es kann einige Minuten dauern, bis Ihr Design verfügbar ist.

Design löschen

Geklonte Designs und hochgeladene Designs können aus dem Design-Manager gelöscht werden:

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf den Ordner mit den Elementen des Designs.
3. Klicken Sie auf das Dropdown-Menü Datei und wählen Sie [Ordnername] löschen aus.
4. Aktivieren Sie im Dialogfeld das  Kontrollkästchen, um zu bestätigen, dass Sie die abhängigen Elemente überprüft haben, und klicken Sie dann auf Diesen Ordner löschen.

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

1. Klicken Sie in Ihrem HubSpot-Account in der Hauptnavigationsleiste auf das Marketplace-Symbol marketplace und wählen Sie dann Marketplace-Downloads aus.
2. Klicken Sie auf der Registerkarte Designs auf das Dropdown-Menü Aktionen und wählen Sie Deinstallieren für das zutreffende Design aus. 
3. Vor der Deinstallation müssen Sie möglicherweise die Vorlage eines Blogbeitrags oder einer Blog-Seite ändern. Erfahren Sie mehr über das Ändern einer Seiten- oder BeitragsVorlage . 
4. Klicken Sie im Dialogfeld auf Deinstallieren.