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.
CMS-General

Eine kurze Tour durch den Design-Manager

Zuletzt aktualisiert am: November 21, 2018

Produkte/Lizenzen

Marketing Hub Professional, Enterprise
Basic
HubSpot CMS

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.

Dieser Artikel enthält eine Tour durch alle Funktionen des Design-Managers.Wenn Sie spezifische Code-Beispiele und Referenzdokumentationen suchen, lesen Sie unsere Designer-Dokumentation.

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 zu Marketing > Dateien und Vorlagen > 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.

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

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. Klicken Sie auf „Ansicht“ > „Gesamte Auswahl aufheben“, wenn Sie eine neue Datei oder einen Ordner außerhalb der vorhandenen Ordner erstellen möchten.

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 Maustastedirekt auf das Element klicken, um eine der folgenden Aktionen auszuführen:

  • Klonen – Kopieren Sie Dateien, Ordner und Vorlagen.
  • Bewegen – Wählen Sie einen neuen Ordner für Ihr Material aus.
  • Umbennen – Geben Sie dem Element einen neuen Namen.
  • Zu HTML klonen – Erstellen Sie eine Kopie Ihres Elements, die vollständig in HTML kodiert ist.
  • Kopieren nach Portal – 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 neue Inhalte.
  • 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 – Kopieren Sie schnell das Codesnippet Ihresbenutzerdefinierten kodierten Moduls in Ihre Zwischenablage. Diese Option wird nur angezeigt, wenn Siemit der rechten Maustasteauf ein Modul klicken.
  • 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.

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.

Weitere Informationen zur Erstellung und Bearbeitung von Vorlagen sowie zum Hinzufügen von Styles zu Ihrer Vorlage finden Sie in späteren Abschnitten dieses Handbuchs.

Inspektor

Der Inspektor ermöglicht es Ihnen, in einer Vorlage oder einem Modul Komponenten hinzuzufügen und zu bearbeiten. Er ist kontextbezogen und abhängig von der Aufgabe, die Sie ausführen, und dem Dateityp. 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.

Weitere Informationen zur Verwendung des Code-Editors finden Sie in einem späteren Abschnitt dieses Handbuchs.

Moduleditor

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- undHubL-Feldern,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 zur Organisation Ihrer Elemente Felder, kodierte Dateien oder Tags hinzuzufügen. Wie im Code-Editor können Sie noch während der Bearbeitung eine Vorschau auf einer Vielzahl von Bildschirmen anzeigen. Sie können auch Standardinhalte für Ihre Modulfelder angeben, Standardinhalte blockieren oder bestimmte Felder für das Modul 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