Become a HubSpot power user — join us for HubSpot Training Day 2017.

Kurzer Überblick über den Design Manager (Design-Manager)

Zuletzt aktualisiert am: May 18, 2016

Anforderungen

Produkt: HubSpot Marketing
Abonnement: Basic, Pro, & Enterprise

Für die Gestaltung einer Website auf einer beliebigen Plattform können mehrere unterschiedliche Werkzeuge, wie z. B. Text-Editor/IDE, FTP-Client, CMS und andere mehr, erforderlich sein.  Als ob all diese Abkürzungen nicht schon abschreckend genug sind, kann der Versuch, beim Bearbeiten, Speichern, Hochladen und Aktualisieren nicht den Überblick zu verlieren, die Zeit, bis Ihre Website live gestellt werden kann, erheblich verlängern.  Und möglicherweise hat die live gestellte Website nicht die Flexibilität, die sich Ihre Marketer in Bezug auf Designoptionen wünschen. Dies kann dazu führen, dass ständig der Designer gerufen werden muss, um Änderungen vorzunehmen.

Der Design Manager (Design-Manager) von HubSpot vereint alle Werkzeuge, 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. Egal, ob Sie als erfahrener Webdesigner versuchen, Ihre erste Website auf COS von HubSpot anzulegen, oder ob Sie als Marketer Inhalte erstellen und mehr über die Struktur und den Stil der bestehenden Seiten und E-Mails erfahren möchten, dieses Benutzerhandbuch enthält ausführliche Tutorials und bewährte Methoden für die Entwicklung in HubSpot.  Codebeispiele und die Referenzdokumentation finden Sie unter designers.hubspot.com.

In diesem Abschnitt des Benutzerhandbuchs erhalten Sie einen Überblick über alle Funktionen des Design Manager (Design-Manager).

Werkzeuge im Design Manager (Design-Manager)

Der Design Manager (Design-Manager) fasst mehrere wichtige Werkzeuge zu einer leistungsstarken App zusammen.  Zu diesen Werkzeugen gehören:

  • Template Builder (Vorlagendesigner) – ein „Drag-and-Drop“-Editor zur Strukturierung Ihrer Seiten-, Blog-, E-Mail- und Systemvorlagen.
  • Code Editor (Code-Editor) – eine IDE (Integrated Development Environment) für den gesamten Frontend-Code (CSS, Javascript oder sogar für eigene HTML-Vorlagen).
  • Primary CSS (Primäre CSS) – eine globale CSS-Datei, mit der Sie das Erscheinungsbild aller Inhalte, die Sie mit HubSpot erstellen, vereinheitlichen können.
  • Custom Modules (Benutzerdefinierte Module) – wiederverwendbare benutzerdefinierte, kodierte Module, die Sie einrichten können, um Ihrer Website erweiterte Funktionen hinzuzufügen, die auch von technisch nicht versierten Benutzer verwaltet werden können.
  • File Manager (Datei-Manager) – ein Datei-Hosting-System für alle Elemente Ihrer Website.

Navigieren im Design Manager (Design-Manager)

Am schnellsten öffnen Sie den Design Manager (Design-Manager) über die Registerkarte Content (Inhalte) (Content > Design Manager (Inhalte > Design-Manager)).

Design Manager navigation

Ordner

Im Design Manager (Design-Manager) können Sie Ihre gesamten Vorlagen und kodierten Dateien in Ordnern organisieren. Ihre Ordner befinden sich in der linken Seitenleiste der App. Sie erweitern einen Ordner, indem Sie auf den Pfeil neben dem Ordnernamen klicken. Beim Erstellen von Vorlagen oder kodierten Dateien können Sie auch neue benutzerdefinierte Ordner anlegen, indem Sie auf die Schaltfläche New folder (Neuer Ordner) klicken. Benutzerdefinierte Ordner werden automatisch gelöscht, wenn sie keine Vorlagen oder Dateien mehr enthalten.  

Unterhalb der Ordner werden einige hilfreiche Filteroptionen angezeigt, über die Sie schnell die gewünschte Vorlage oder Datei finden können. Diese Optionen umfassen:

Templates and coded files

Um eine Liste der enthaltenen Dateien anzuzeigen, können Sie auf einen Ordner klicken oder einen Dateinamen oder ein Keyword in die Suchleiste eingeben. Die umfangreichsten Ergebnisse erhalten Sie, indem Sie auf den Ordner der obersten Ebene klicken, bevor Sie die Suche beginnen.

Search templates

Registerkarten

Wenn Sie auf den Namen einer Vorlage oder einer kodierten Datei klicken, wird Ihre Auswahl in einer Registerkarte geöffnet. Registerkarten erleichtern Ihnen das gleichzeitige Ausführen mehrerer Arbeitsgänge und das Umschalten zwischen verschiedenen Vorlagen und kodierten Dateien. Klicken Sie auf +Tab (+Registerkarte), um dem Design Manager (Design-Manager) eine weitere Registerkarte hinzuzufügen.

Tabs

Erstellen neuer Vorlagen und Dateien

Klicken Sie auf die blaue Schaltfläche auf der rechten Seite der App, um eine neue Vorlage oder kodierte Datei zu erstellen. Je nachdem, ob Sie einen Vorlagenordner, einen Ordner für kodierte Dateien oder den Ordner für benutzerdefinierte Module ausgewählt haben, wird auf der Schaltfläche eine andere Beschriftung angezeigt: New template (Neue Vorlage), New coded file (Neue kodierte Datei) bzw. New custom module (Neues benutzerdefiniertes Modul). Nähere Informationen zum Erstellen von Vorlagen und kodierten Dateien finden Sie weiter unten in diesem Handbuch.  

New template

Template Builder (Vorlagendesigner)

Der Template Builder (Vorlagendesigner) ist ein „Drag-and-Drop“-Editor, mit dem Sie die Struktur und die Standardinhalte Ihrer Seiten und E-Mails einrichten können.  Sie können eigene HTML-Vorlagen auch komplett neu programmieren. Das Erstellen Ihrer Website und E-Mails mit dem Template Builder (Vorlagendesigner) spart Designern jedoch Zeit und Marketer erhalten eine größere Kontrolle bei der Strukturierung der Inhalte.  

Alle Vorlagenlayouts von HubSpot sind responsiv. Das bedeutet, dass sie sich automatisch an unterschiedliche Bildschirmgrößen anpassen. Dieser Editor kompiliert Ihre „Drag-and-Drop“-Module in reines HTML-Mark-up, das aufgrund der integrierten CSS responsiv ist.  

Da fast ein Drittel des gesamten Traffic im Internet von mobilen Geräten stammt, muss Ihre Website auf allen Geräten, unabhängig von der Bildschirmgröße, benutzerfreundlich sein.  Informationen zum Erstellen und Bearbeiten von Vorlagen sowie zum Anwenden integrierter und benutzerdefinierter CSS für Vorlagen finden Sie weiter unten in diesem Handbuch.  

Template Builder

Code Editor (Code-Editor)

Der Code Editor (Code-Editor) von HubSpot ist eine leistungsstarke IDE, mit der Sie CSS-Dateien, Javascript-Dateien und sogar HTML-Vorlagen programmieren können.  Beim Programmieren oder Bearbeiten Ihrer Stylesheets können Sie die Auswirkungen Ihrer Änderungen auf Ihre Vorlagen in einer Live-Vorschau anzeigen, ohne Ihre veröffentlichten Inhalte zu beeinträchtigen oder die App verlassen zu müssen. Zusätzlich zur Live-Vorschau Ihrer Änderungen nutzt der Code Editor (Code-Editor) auch viele andere hilfreiche IDE-Funktionen, wie Syntax-Hervorhebung, automatisches Speichern, automatisches Schließen von Tags, automatische Einzüge und vieles mehr.

Nähere Informationen zur Verwendung dieses Editors finden Sie weiter unten in diesem Handbuch.  

Code editor

Primäre CSS-Datei

Die Primary CSS (primäre CSS-Datei) ist eine globale CSS-Datei, die für alle HubSpot-Vorlagen gilt.  Die primäre CSS-Datei ist der ideale Ort, um Menüs, Formulare und andere Standardmodule mit Stilen zu versehen, die über Ihre Vorlagen angezeigt werden. Durch die Verwendung dieser Datei sparen Designer Zeit und behalten die Übersicht.  Nähere Informationen zur primären CSS-Datei finden Sie weiter unten in diesem Handbuch.

Primary CSS

Benutzerdefinierte Module

HubSpot-Vorlagen enthalten vielfältige Moduloptionen. Manchmal wünschen sich Designer aber möglicherweise eine mehr benutzerorientierte Lösung für ihre Marketer, ohne sich Sorgen darüber machen zu müssen, ob technisch nicht versierte Benutzer ihren Code zerstören. Benutzerdefinierte Module sind wiederverwendbare, kodierte Module, die Designern die Verwendung benutzerdefinierter Variablen im Hintergrund ermöglichen und Marketern die Flexibilität geben, ihre Inhalte anzupassen. 

Custom module

Ein Marketer kann die Inhalte dieses Moduls anpassen, indem er Bilder und Text auf Seitenebene auswählt, ohne jemals in den Code eingreifen zu müssen.  

Custom module preview

File Manager (Datei-Manager)

Der File Manager (Datei-Manager) von HubSpot speichert alle Elemente, die Sie zum Erstellen von Inhalten verwenden. Mit diesem Werkzeug können Sie PDFs, Bilder, Videos, Audiodateien, Schriftarten und vieles mehr hochladen. Über den Design Manager (Design-Manager) greifen Sie auf all diese kreativen Elemente zu und laden schnell neue Dateien hoch, ohne die App verlassen zu müssen. Nähere Informationen zum Hochladen und Zugreifen auf Ihre Dateien über den Design Manager (Design-Manager) finden Sie weiter unten in diesem Handbuch.  

File manager

Vorheriger Artikel:

Weiter zum nächsten Artikel: