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.

Eine kurze Tour durch den Design-Manager

Zuletzt aktualisiert am: Juni 28, 2023

Mit einem der folgenden Abonnements verfügbar (außer in den angegebenen Fällen):

Alle

Der Design Manager von HubSpot vereint alle Tools, die Designer zum Erstellen von Websites auf dem neuesten Stand der Technik benötigen, und stellt dabei Marketern die Flexibilität zur Verfügung, die sie sich beim Erstellen von Inhalten wünschen.

In diesem Artikel erhalten Sie einen Überblick über alle Funktionen des Designmanagers. Wenn Sie spezifische Code-Beispiele und Referenzdokumentationen suchen, lesen Sie die Entwicklerdokumentation von HubSpot.

Im Design-Manager enthaltene Tools

Der Design-Manager umfasst mehrere wichtige Tools in einer leistungsstarken App:

  • Finder – Ein Ort, um Ihre Dateien, Vorlagen, Module und Ordner zu erstellen und zu organisieren.
  • Layout-Editor – Ein Drag-and-Drop-Editor zur Strukturierung Ihrer Seiten, Blogs, E-Mails und Systemvorlagen.
  • Inspektor – Hier können Sie die Eigenschaften von Layouts, Modulen und Gruppen bearbeiten. 
  • Code-Editor – Eine integrierte Entwicklungsumgebung (IDE) für Ihre Frontend-Codes (CSS, Javascript oder sogar Ihre eigenen HTML-Vorlagen).
  • Modul-Editor – Wiederverwendbare benutzerdefinierte Module, die Sie einrichten können, um erweiterte Funktionen auf Ihrer Website hinzuzufügen, die von nicht-technischen Nutzern verwaltet werden können.
  • Datei-Manager – ein Datei-Hosting-System für alle Elemente Ihrer Website.

Navigieren Sie zu Ihrem Design-Manager, um diese Tools zu erkunden.Gehen Sie in Ihrem HubSpot-Account zum Abschnitt Marketing, klicken Sie dann auf Dateien und Vorlagen und abschließend auf Design-Manager.

Finder

Im Finder können Sie alle Ordner, Vorlagen, Module und kodierte Dateien verwalten. Sie können Ihre Dateien und Ordner über die Drag-and-Drop-Oberfläche des Finders organisieren. Klicken Sie auf eine Datei, um ihre Inhalte zu erweitern oder einzuklappen.

Alle Marketing Hub Professional- und Enterprise-Accounts und CMS Hub Professional- und Enterprise-Accounts verfügen im Design-Manager standardmäßig über einen @hubspot-Ordner. Dieser Ordner enthält all Ihre Designs und Standardmodule, darunter Drag-&-Drop-Module für E-Mails. Diese Designs und Module sind schreibgeschützt, können bei Bedarf jedoch geklont und angepasst werden. Erfahren Sie mehr über die Anpassung von Designs und Standardmodulen.

design-manager-hubspot-folder

Klicken Sie auf „Datei“, um neue Dateien und Ordner zu erstellen, oder um die derzeit ausgewählten Elemente zu bearbeiten, beispielsweise um sie zu löschen, zu klonen oder umzubenennen. Verwenden Sie die Optionen unter „Ansicht“, um die Anordnung Ihrer Dateien und Ordner zu verwalten. Sie können alle Ordner schnell einklappen oder vor kurzem bearbeitete oder gelöschte Elemente nach oben ziehen.

Design-Manager einklappen und Auswahl von Ordnern aufheben

Bitte beachten: Der Finder ist kontextbezogen, d. h. Ihre Aktionen beziehen sich immer auf die ausgewählten Ordner und Dateien. Um eine neue Datei oder einen Ordner in einem bestimmten Ordner zu erstellen, klicken Sie im Finder auf diesen Ordner. Um eine neue Datei oder einen Ordner außerhalb aller vorhandenen Ordner zu erstellen, klicken Sie auf „Anzeigen“ und wählen Sie dann „Gesamte Auswahl aufheben“ aus.

Das Menü „Aktionen“ ist nur aktiv, wenn aktuell eine Datei oder ein Ordner ausgewählt ist und für diesen Elementtyp kontextbezogene Optionen vorhanden sind. Sie können auch  mit der rechten Maustaste direkt auf das Element klicken, um eine der folgenden Aktionen auszuführen:

  • Klonen: Kopieren Sie Dateien, Ordner und Vorlagen.
  • Verschieben: Wählen Sie einen neuen Ordner für Ihr Element aus.
  • Umbenennen: Geben Sie dem Element einen neuen Namen.
  • Zu HTML klonen: Erstellen Sie eine Kopie Ihres Elements, die vollständig in HTML kodiert ist.
  • In Portal kopieren: Erstellen Sie eine Kopie Ihres Elements und senden Sie diese an einen anderen HubSpot-Account, auf den Sie Zugriff haben.
  • Seite/E-Mail erstellen: Erstellen Sie mit dieser Vorlage ein neues Inhaltselement.
  • Abhängige Elemente anzeigen: Zeigen Sie eine Liste aller HubSpot-Inhalte an, die die Datei verwenden.
  • Revisionsverlauf anzeigen: Zeigen Sie einen Verlauf gespeicherter Versionen an.
  • Snippet kopieren: Verwenden Sie diese Option, um schnell das Code-Snippet Ihres benutzerdefinierten kodierten  Moduls in Ihre Zwischenablage zu kopieren. Diese Option wird nur angezeigt, wenn Sie mit der rechten Maustaste auf ein Modul klicken.
  • Ordner sperren: Sperren Sie einen Ordner, um zu verhindern, dass Benutzer dessen Inhalte im Design-Manager bearbeiten. Inhalte in gesperrten Ordnern können nur in Ihrer lokalen Entwicklungsumgebung bearbeitet werden.
  • Löschen – Löscht die Datei, den Ordner, die Vorlage oder das Modul.

Rechtsklick

Registerkarten

Wenn Sie auf den Namen einer Vorlage, eines Moduls oder einer kodierten Datei klicken, wird Ihre Auswahl in einer Registerkarte im Editor geöffnet. Registerkarten erleichtern Ihnen das gleichzeitige Ausführen mehrerer Arbeitsgänge und das Umschalten zwischen verschiedenen Vorlagen und kodierten Dateien. Sie können mit der rechten Maustaste auf eine Registerkarte klicken, um Optionen für die Verwaltung Ihrer Registerkarten im Editor anzuzeigen. Sie können eine vollständige Liste der geöffneten Registerkarten anzeigen, indem Sie rechts auf den Pfeil nach unten klicken.

Wenn Sie mehr Platz im Layout-Editor benötigen, klicken Sie zuerst auf das entsprechende Symbol, um den Finder einzuklappen. Sie können den Finder wieder erweitern, indem Sie auf das Ordnersymbol klicken.

2021-12-16_16-33-42 (2)

Erstellen neuer Vorlagen und Dateien

Um eine neue Vorlage, ein neues Modul oder eine kodierte Datei zu erstellen, klicken Sie in der oberen linken Ecke des Finders auf „Datei“ > „Neue Datei“. Sie können eine der folgenden Elementarten erstellen:

  • Drag-and-Drop: Vorlage, die durch Hinzufügen von Modulen zu einer intuitiven Drag-and-Drop-Oberfläche erstellt wird.
  • HTML & HUBL: Benutzerdefinierte kodierte Vorlage, die im Code-Editor mit HTML, CSS und Javascript erstellt wird.
  • Stylesheet: Eine kodierte CSS-Datei, die zur Formatierung von Modulen und Dateien verwendet werden kann.
  • JavaScript: Eine mit Javascript kodierte Datei, die auf Module und Dateien angewendet werden kann.
  • Modul: Ein benutzerdefiniertes kodiertes Modul, das zu einer Vorlage hinzugefügt werden kann.

Layout-Editor

Der Layout-Editor ist eine Drag-and-Drop-Oberfläche für Struktur und Standardinhalte Ihrer Seiten und E-Mails. Die Namen Ihrer Module und Gruppen werden zusammen mit der auf jede Komponente angewendeten Body-Class angezeigt. Sie können jedes Modul und jede Gruppe ändern, indem Sie im Inspektor auf der rechten Seite auf das entsprechende Element klicken und es bearbeiten, oder indem Sie mit der rechten Maustaste auf die Komponente klicken, um auf die Funktionen des Inspektors zuzugreifen.

Ziehen Sie die Komponenten per Drag-and-Drop in den Layout-Editor, um ihre Platzierung und Größe in der Vorlage anzupassen. Mit den Schaltflächen „Rückgängig machen“ und „Wiederholen“ in der oberen linken Ecke können Sie Ihre Änderungen schnell wieder zurücksetzen. Sie können auch per Rechtsklick auf ein Modul den Modultyp schnell gruppieren, klonen oder ändern, oder für die gleichen Aktionen Tastaturkürzel verwenden.Klicken Sie oben rechts auf die Schaltfläche „Vorschau“, um eine Vorschau anzuzeigen und Ihr Layout auf verschiedenen Bildschirmgrößen zu überprüfen.

Alle Vorlagenlayouts von HubSpot sind responsiv. Das bedeutet, dass sie sich automatisch an unterschiedliche Bildschirmgrößen anpassen. Dieser Editor erstellt Ihre Drag-and-Drop-Module in reinem HTML-Markup, das durch integrierte CSS responsiv gemacht wurde.

Erfahren Sie mehr über das Erstellen und Bearbeiten von Vorlagen und das Hinzufügen von Stilen zu Ihrer Vorlage.

Inspektor

Der Inspektor ermöglicht es Ihnen, in einer Vorlage oder einem Modul Komponenten hinzuzufügen und zu bearbeiten. Dies hängt von der ausgeführte Aufgabe und dem Dateityp ab. Beispiel:

  • Wenn eine Komponente im Drag & Drop-Editor ausgewählt ist, zeigt der Inspektor alle Funktionen und Optionen dieser Komponente an.
  • Wenn keine Komponente im Drag & Drop-Editor ausgewählt ist, zeigt der Inspektor die Optionen für die Vorlage selbst an.
  • Beim Bearbeiten eines Moduls können Sie im Inspektor Felder bearbeiten und hinzufügen.

Je nach Art des Moduls, das in Ihrer Vorlage ausgewählt wird, können im Inspektor verschiedene Optionen verfügbar sein. 

Für Drag-and-Drop-Vorlagen können dem Layout mit der Registerkarte „+ Hinzufügen“ neue Komponenten hinzugefügt werden. Die Registerkarte „Bearbeiten“ des Inspektors kann für die Zuweisung benutzerdefinierter CSS-Klassen verwendet werden, Standardinhalte bearbeiten oder kodierte Dateien anhängen.

Der Inspektor enthält oben eine Pfadmenü-Navigationsleiste zur schnellen Navigation zwischen dem Element, dem Modul, der Gruppe und der Vorlage, an der Sie aktuell arbeiten.

Für benutzerdefinierte kodierte HTML-& HUBL-Vorlagen und Module können Sie den Inspektor verwenden, um neue Felder oder Links zu kodierten Dateien hinzuzufügen. Sie können auch Filtertags als Hinweis auf die Art und die Funktion Ihrer kodierten Vorlagen und Module hinzufügen, um sie im Finder einfacher suchen zu können. Sie können auch Snippets und weitere Informationen darüber finden, wie diese benutzerdefinierten kodierten Elemente in Ihren Vorlagen verwendet werden können.

Code-Editor

Der Code-Editor von HubSpot ist eine leistungsstarke IDE, mit der Sie CSS-Dateien, Javascript-Dateien und sogar HTML-Vorlagen programmieren können. Wenn Sie Ihre Stylesheets kodieren oder bearbeiten, können Sie die Wirkungen Ihrer Änderungen auf einer Vielzahl von Bildschirmen anzeigen. Der Code-Editor bietet auch viele andere hilfreiche IDE-Funktionen wie farbkodierte Klassen, Fehlerüberprüfung, Syntaxhervorhebung, Tags für automatisches Speichern, Schließen und Einrücken und mehr.

Erfahren Sie mehr darüber, wie Sie den Code-Editor verwenden.

Bitte beachten Sie: Standardmäßig minimiert HubSpot automatisch JavaScript und CSS, die im Design-Manager enthalten sind, um unnötige Leerzeichen, Zeilenumbrüche und Kommentare zu entfernen. Dies gilt auch für JavaScript und CSS , die über die CLI in den Designmanager hochgeladen werden. Das bedeutet, dass Sie bereits verkleinerten Code nicht direkt in den Design-Manager einfügen sollten.

Erfahren Sie mehr über JavaScript und CSS Minification.

design-manager-code-editor-example

Modul-Editor

Die Drag-and-Drop-Vorlagen von HubSpot verfügen zwar über eine Reihe von Standardmodulen, Designer benötigen jedoch möglicherweise hin und wieder weitere benutzerdefinierte Design-Lösungen.Module sind wiederverwendbare benutzerdefiniert kodierte Komponenten, die aus HTML- und HubL- CSS sowie Javascript bestehen. Diese Module können zu einer Vorlage hinzugefügt und im Seiteneditor ohne Code angepasst werden.

Verwenden Sie den Inspektor, um Felder hinzuzufügen, kodierte Dateien anzuhängen oder Tags hinzufügen, um Ihre Elemente zu organisieren. Genau wie im Code-Editor können Sie Ihre Arbeit auf verschiedenen Bildschirmgrößen als Vorschau anzeigen. Sie können auch Standardinhalte für Ihre Modulfelder angeben, Standardinhalte blockieren oder spezifische Modulfelder als Pflichtfeld festlegen. 

Datei-Manager

Der Datei-Manager von HubSpot speichert alle Elemente, die Sie zum Erstellen von Inhalten verwenden. Mit diesem Tool können Sie PDFs, Bilder, Videos, Audiodateien, Schriftarten und vieles mehr hochladen. Sie können auf Ihre kreativen Elemente zugreifen oder neue Dateien hochladen, ohne die App verlassen zu müssen.

Datei-Manager

War dieser Artikel hilfreich?
Dieses Formular wird nur verwendet, um Feedback zur Dokumentation zu sammeln. Erfahren Sie, wie Sie Hilfe bei Fragen zu HubSpot erhalten können.