Überblick über CMS Hub

Dieser Abschnitt soll Ihnen helfen, die wichtigsten Aspekte von CMS Hub, dem Content Management System von HubSpot, zu verstehen und großartige Websites auf dessen Grundlage zu entwickeln. Für ein optimales Erlebnis wird ein professionelles Verständnis der Grundlagen der Webentwicklung, einschließlich HTML, JavaScript und CSS, erwartet.

Wenn Sie neu bei CMS Hub sind, empfehlen wir Ihnen, mit dem Schnellstart-Tutorial zu beginnen und bei Bedarf darauf zurückzugreifen.

So funktioniert CMS Hub

CMS Hub ist ein SaaS (Software-as-a-Service)-CMS, das Unternehmen beim Ausbau ihrer Webpräsenz unterstützen soll, wobei der Schwerpunkt auf der Unterstützung von Marketern liegt. Es ist für Unternehmenswebsites konzipiert, bei denen Content-Autoren ohne technische Kenntnisse in der Lage sein müssen, Inhalte unabhängig zu erstellen, zu messen und zu verbessern, während sie innerhalb der Design-, Stil- und Vorgaben in Bezug auf Funktionen arbeiten, die Sie als Entwickler einrichten können. Die Inhalte, Lead-Erfassung und Analytics sind ebenfalls in das CRM von HubSpot integriert, sodass Marketer auf einfache Weise personalisierte Erlebnisse für Besucher erstellen und diese Erlebnisse in das übrige Unternehmen integrieren können.

Die primäre Aufgabe von CMS Hub-Entwicklern besteht darin, Inhalte zu ermöglichen, anstatt sie zu erstellen. Unternehmenswebsites sind am besten, wenn die Inhalte aktuell und optimiert sind. Die Entwickler sollten so viel Problemelemente wie möglich beseitigen und bei Bedarf Leitlinien einrichten. CMS Hub wurde so konzipiert, dass es dank seines Modulsystems, der flexiblen Spalten und der Drag-&-Drop-Bereiche die Bedürfnisse von Entwicklern mit den Anforderungen von Content-Autoren in Einklang bringt. Das bedeutet weniger lästige Kopier-/Aktualisierungsarbeit für Sie als Entwickler und zufriedenere Benutzer, sprich Content-Autoren.

Vorlage und Module sind die Schnittstelle zwischen Entwicklern und Marketern

Die Schlüsselkonzepte und Grundlagen des Systems spiegeln diese Philosophie wider: Eine gut konzipierte CMS Hub-Website sollte in enger Zusammenarbeit mit Ihren Content-Autoren entwickelt werden, um deren Bedürfnisse zu verstehen, und erfordert dann weniger laufenden Support und Wartung durch einen Entwickler. Wenn Sie auf Grundlage von CMS Hub programmieren, sollten Sie immer wieder prüfen, wie die Seitenerstellung für die Content-Autoren aussieht und funktioniert. Dadurch wird sichergestellt, dass sie so weit wie möglich unabhängig mit der Website arbeiten können.

Animierte Darstellung der Erstellung einer Drag-&-Drop-Seite durch den Benutzer

Da HubSpot das Hosting und die Wartung des CMS-Systems übernimmt, müssen Sie sich nicht um Plug-in-Verwaltung, Updates, Hosting, Skalierung oder Sicherheit kümmern. Der Nachteil dabei ist, dass das System die Möglichkeiten ein wenig mehr einschränkt als bei selbst gehosteten CMS-Systemen. So können Sie beispielsweise keine Systemgrundlagen manuell oder über Plugins ändern oder erweitern, das Low-Level-Rendering manipulieren oder direkt auf Datenbankinhalte zugreifen und diese ändern.

Von Entwicklern erstellte Inhalte (z. B. Designs, Vorlagen, Module, JavaScript und CSS) werden in einem Dateisystem für Entwickler erstellt, während Seiteninhalte (Seiten, Blog-Beiträge) in einem leistungsstarken blockbasierten WYSIWYG-Editor (What You See Is What You Get) gestaltet und erstellt werden und Mediendateien (von Content-Autoren erstellte Bilder, PDFs usw.) in einem auf einer Web-App basierenden Datei-Manager gespeichert werden.

Wenn eine Seite gerendert wird, leitet HubSpot die Anfrage an einen von vielen Servern auf der Grundlage der Domain weiter, rendert die Seite auf unseren Servern und lspeichert sie, wenn möglich, in einem Content Delivery Network (CDN) zwischen.

Website-Seiten, Landing-Pages, Blogs und E-Mails

Mit CMS Hub können Marketer verschiedene Typen von Inhalten erstellen. Die Benutzeroberfläche (UI) für Content-Autoren ist je nach Inhaltstyp leicht unterschiedlich. Dies hat Auswirkungen, die Entwickler beachten müssen. 

Vorlagen und Module sind mit einem oder mehreren der unten genannten Inhaltstypen verknüpft. Die Entwickler können ihre Verwendung auf bestimmte Inhaltstypen beschränken.

Website-Seiten und Landing-Pages

Website-Seiten und Landing-Pages werden unabhängig voneinander erstellt. Seiten basieren auf Vorlagen, und Änderungen können sowohl lokal an der Seite als auch an der Vorlage vorgenommen werden. 

Die Funktionen, die Content-Autoren zur Verfügung stehen, sind für Website-Seiten und Landing-Pages sehr ähnlich. Der Unterschied besteht darin, dass Website-Seiten dazu dienen, Informationen zu präsentieren, die Teil Ihrer Website sind und organisch gefunden werden sollen, während eine Landing-Page in der Regel mit einem bestimmten Marketingangebot oder einer Kampagne verknüpft ist (z. B. mit einer Marketing-E-Mail, die an eine bestimmte Liste von Kontakten gesendet wird). 

In der Benutzeroberfläche für Marketer sind die Analytics und die Organisation dieser Seitentypen ebenfalls separat organisiert, da Landing-Pages oft spezifische Konversionsziele haben.

Blogs

Blogs in CMS Hub hingegen haben jeweils zwei Ansichten – eine für die Listing-Seite und eine für die Seite mit den einzelnen Beiträgen – und jeder Blog-Beitrag wird in jede dieser Ansichten eingefügt. Ein Portal (der Begriff, der für eine einzelne Instanz von HubSpot verwendet wird) kann mehr als einen Blog haben, die Vorlage, die für einen einzelnen Beitrag verwendet wird, kann jedoch nicht für jeden einzelnen Beitrag festgelegt werden. Die für die Blog-Listing-Seite und die Blog-Beitragsseite verwendeten Vorlagen sowie das Tool zum Erstellen neuer Blogs werden auf der HubSpot-Benutzeroberfläche unter „Einstellungen“ > „Website“ > „Blog“ definiert.

E-Mails

Das benutzerdefinierte (oder „klassische“) E-Mail-Tool von HubSpot basiert auf der gleichen Plattform wie das CMS, sodass Vorlagen und Module auch in die mit diesem Tool verwendeten E-Mails aufgenommen werden können. E-Mails, die mit dem Drag-&-Drop-E-Mail-Tool erstellt wurden, können keine benutzerdefinierten Vorlagen verwenden.

Entwickler-Dateisystem

Die Kernelemente – Vorlagen, Designs und Module sowie die JavaScript- und CSS-Dateien sowie die Bilder, die sie unterstützen – werden in einem Dateisystem für Entwickler erstellt, das im Hintergrund einer Datenbank zugeordnet ist. Sie können dieses Dateisystem entweder im linken Fenster des Design-Managers oder in Ordnern sehen, die mit den Tools für die lokale Entwicklung synchronisiert wurden. Innerhalb des Dateisystems können die Elemente mit absoluten oder relativen Pfaden aufeinander verweisen.

Dabei ist zu beachten, dass diese Dateien im Hintergrund nicht genau so auf der Festplatte von HubSpot gespeichert werden; sie werden Einträgen in einer Datenbank zugeordnet. Aus diesem Grund erfolgt der Zugriff auf das Dateisystem für Entwickler über die HubSpot-CLI-Tools und nicht über einen direkten SSH- oder FTP-Zugang, und einige Dateisystemfunktionen, die Sie vielleicht erwarten, z. B. Berechtigungen und Symlinks, werden im Dateisystem für Entwickler nicht angeboten.

Dies unterscheidet sich von der Vorgehensweise herkömmlicher CMS-Systeme, bedeutet aber, dass fehlerhafte Verweise zwischen Dateien oder Syntaxfehler zum Zeitpunkt der Veröffentlichung und nicht erst zur Laufzeit erkannt werden, was Sie zusätzlich vor unbeabsichtigten Fehlern bei späterem Live-Traffic auf der Website schützt.

Das CMS erkennt die Vorlagen im Dateisystem und präsentiert sie den Autoren, wenn sie neue Seiten erstellen, sodass die Struktur des Dateisystems Ihnen überlassen bleibt. Es ist nicht erforderlich, dass Module in einem /modules/-Ordner oder JavaScript in einem /js/-Ordner gespeichert werden. Wir empfehlen jedoch, Ihre Elemente so zu organisieren, wie wir es im Boilerplate-Beispielcode für das CMS getan haben. Das Layout Ihrer Elemente wird Ihnen bekannt vorkommen, wenn Sie bereits mit anderen branchenüblichen Entwicklungstools gearbeitet haben.

Designs, Vorlagen, Module und Felder

Designs, Vorlagen, Module und Felder sind die Objekte, mit denen Sie als Entwickler in CMS Hub am häufigsten arbeiten werden. Durch den effektiven Einsatz dieser verschiedenen Objekte können Sie Content-Autoren die Freiheit geben, selbstständig an Websites zu arbeiten und diese zu überarbeiten, ohne die von Ihnen festgelegten Stil- und Layoutvorgaben zu verletzen.

Designs und Module enthalten Felder, die Einstellungen für bestimmte Datentypen sind. (z. B. Zahlen, Zeichenfolgen, Rich-Text, Bilder usw.) Entwickler können steuern, wie diese beim Rendern dieser Objekte verwendet werden und wie sie organisiert und im WYSIWYG-Editor angezeigt werden sollen. Content-Autoren können im WYSIWYG-Editor Werte für Felder festlegen, die zum Zeitpunkt des Renderns auf das Design oder Modul angewendet werden.

Designs

Wenn Sie mit anderen CMS-Systemen gearbeitet haben, werden Ihnen die Grundlagen von Designs vertraut sein. Designs sind die Top-Level-Objekte, die das Erscheinungsbild einer Website definieren und ein marketingfreundliches Content-Editing ermöglichen. Zu diesen Elementen können Vorlagen, Module, CSS-Dateien, JavaScript-Dateien, Bilder und vieles mehr gehören.

Designs ermöglichen es Entwicklern, eine Reihe von Feldern zu erstellen, mit denen Content-Autoren eine globale stilistische Kontrolle über eine Website erhalten, ohne CSS bearbeiten zu müssen. Sie können in CSS festlegen, wo diese Steuerelemente angewendet werden, Steuerelemente so anordnen, dass sie von anderen erben, und verwalten, wie sie im Design-Editor für Marketer dargestellt und organisiert werden. Die Content-Autoren verwenden den Design-Editor, um Designfelder zu ändern, eine Vorschau dieser Änderungen anhand der vorhandenen Vorlagen innerhalb eines Designs anzuzeigen und ihre Änderungen zu veröffentlichen.

Diese Designfelder können entweder global für eine Website festgelegt oder auf Seitenebene überschrieben werden.

Design-Editor

Vorlagen

Vorlagen definieren das Basis-Markup und den Stil einer Reihe von Seiten, die eine Vorlage verwenden. Sie können beliebigen HubL, HTML und Links zu JavaScript- und CSS-Dateien enthalten und können auf die Verwendung mit bestimmten Inhaltstypen beschränkt werden. Sie haben volle Flexibilität bei der Gestaltung und dem Stil, den Sie in eine Vorlage einfügen können, aber Sie sollten sich an einige bewährte Methoden halten und einige wichtige Funktionen des CMS nutzen, um sicherzustellen, dass die Marketer die Seiten einfach bearbeiten können.

Denken Sie daran, dass Sie bei der Erstellung von Vorlagen auch die Bearbeitungsmöglichkeiten für die Personen schaffen, die die Seiten aus Ihren Vorlagen erstellen werden. Bei dieser Person kann es sich um einen Kollegen, einen Kunden oder vielleicht sogar um Sie selbst handeln. Stellen Sie in jedem Fall sicher, dass die Bearbeitung einfach und intuitiv ist.

Dazu gehören:

  • Erstellen von Vorlagen als Teil eines Designs und Verwendung von CSS auf Designebene, einschließlich Designfeldern, um den Großteil des Stylings innerhalb einer Vorlage zu übernehmen. Dies erleichtert es Content-Autoren, globale und lokale Stiländerungen auf konsistente Weise vorzunehmen, ohne dass sie sich mit dem Bearbeiten von CSS befassen müssen.
  • Verwenden von Modulen (mehr dazu im nächsten Abschnitt) für die meisten Komponenten auf Ihrer Seite, wodurch sie neu angeordnet und auf der gesamten Website wiederverwendet werden können.
  • Verwenden von Drag-&-Drop-Bereichen, wo immer dies möglich ist, für zentrale Seiteninhalte, insbesondere auf internen Seiten. Mit Drag-&-Drop-Bereichen können Sie ein Standardlayout für die Module festlegen, aus denen eine Seite besteht, aber Marketern die Flexibilität geben, Layout und Stil unabhängig zu bearbeiten.
  • Verwenden von globalen Teilvorlagen für gemeinsame Inhalte wie Header und Footer, die auf der gesamten Website einheitlich aussehen sollen.

Vorlagen können entweder mit HTML + HubL oder mit einer Drag-&-Drop-Oberfläche im Design-Manager erstellt werden. Wenn Sie ein neues Projekt beginnen, empfehlen wir die Verwendung von Code-Vorlagen, da sie Ihnen als Entwickler mehr Workflow-Optionen und Unterstützung für Drag-&-Drop-Bereiche bieten.

VS-Code mit geöffneter HTML- und HubL-Vorlage

Module

Module sind wiederverwendbare Komponenten, die Sie in Vorlagen und auf Seiten in CMS Hub platzieren können. Sie enthalten Steuerelemente für Marketer und enthalten HubL/HTML-Markup, CSS und JavaScript, mit denen sich zusammen wiederverwendbare und editierbare Komponenten einer Website erstellen lassen.

Die Steuerelemente für ein Modul werden in Feldern definiert. Bei der Entwicklung eines guten Moduls muss daher sowohl das Erscheinungsbild auf einer Seite als auch die Bearbeitungsmöglichkeiten für Content-Editoren berücksichtigt werden.

CMS Hub enthält gängige Standardmodule wie Header, Rich-Text, Bilder, Schaltflächen und CTAs, die Sie als grundlegende Komponenten verwenden, mit denen Sie aber wahrscheinlich auch Elemente erstellen möchten, die interessantere Layouts haben können, die in Ihr Design und Ihre Vorlagen passen. Einige gängige Beispiele für Module, die Sie erstellen möchten, sind Accordions, Schieberegler und Registerkarten.

Modulformular im Editor

Sie können sich ein Modul als ein Objekt und Module auf Seiten als Instanzen dieses Objekts vorstellen. Das bedeutet, dass Updates am HubL, CSS oder JavaScript eines Moduls auf alle Instanzen dieses Moduls innerhalb von Seiten oder Vorlagen in einem bestimmten Portal angewendet werden. Module sind außerdem portalübergreifend übertragbar, unabhängig davon, ob Sie das in Design-Manager integrierte Kopiertool verwenden, sie im Marketplace verkaufen oder den Code direkt mit Tools für die lokale Entwicklung austauschen. Das bedeutet, dass Sie eine Designlösung einmal implementieren und auf allen Seiten und Portalen verwenden können. Wenn Sie sie dann aktualisieren müssen, können diese Änderungen auf allen Seiten übernommen werden, ohne dass Sie mehrere Seiten oder Vorlagen bearbeiten müssen.

Module können auch in Designs eingebunden werden. So können Sie mithilfe von Designfeldern das Erscheinungsbild von Modulen beeinflussen und sicherstellen, dass sie im Seiten-Editor prominent angezeigt werden, damit Content-Autoren einfachen Zugriff auf Module haben, die gut zu den von Ihnen erstellten Designs passen.

Weitere Informationen finden Sie im Überblick über das Modulsystem.

Felder

Felder sind die Steuerelemente, mit denen Content-Autoren die Parameter anpassen können, die an Ihre Designs und Module übergeben werden. Die Felder sind typisiert, einschließlich einfacher Typen wie boolesch, Text, URL, Auswahl und Datei, aber auch komplexere Felder wie Schriftart mit Styling sowie HubSpot-spezifische Felder wie Links zu anderen Inhalten oder Formularen im HubSpot-System.

Felder können auch innerhalb von Repeatern platziert werden, die ein Array an das Modul übergeben – ein Beispiel hierfür könnte ein Bildkarussell sein, bei dem Sie eine Reihe von Bildern mit zugehörigem ALT-Text übergeben möchten. Anstatt eine Reihe von Bild- und Textfeldern zu erstellen, können Sie jeweils ein Feld erstellen und in eine Wiederholungsgruppe einfügen.

Felder eines Moduls werden entweder im Design-Manager oder mit dieser Syntax in einer fields.json-Datei angegeben.  Die Felder für ein Thema müssen in der fields.json–Datei im Stammverzeichnis des Designs angegeben werden.

Wie bei den anderen Objekten in CMS Hub sollten Sie bei der Erstellung von Feldern in einem Modul oder Design auf die Bearbeitungsmöglichkeiten achten, die Sie schaffen, einschließlich der Verwendung von Feldgruppen, um eine klare Hierarchie zu schaffen.

Die HubL-Sprache

Das CMS von HubSpot verwendet die HubSpot Markup Language oder HubL („Hubble“ ausgesprochen). HubL ist die HubSpot-Erweiterung von Jinjava, einer auf Jinja basierenden Template-Engine. HubL verwendet eine ganze Reihe von Markups, die nur in HubSpot vorkommen, und unterstützt nicht alle Funktionen von Jinja. Es wird vollständig serverseitig ausgeführt, wenn eine Seite gerendert wird.

HubL verfügt über die Funktionen, die man von einer einfachen Vorlagensprache erwartet, wie Variablen, for-Schleifen und if-Anweisungen, unterstützt aber auch komplexere Rendering-Makros, Datenabrufe und das Zuordnen mit Tags, Funktionen und Filtern

Das heißt, HubL ist keine Programmiersprache. Bei CMS-Systemen wie Wordpress besteht eine nicht ganz eindeutige Grenze zwischen Templating und Backend-Logik. Diese Unklarheit öffnet die Tür für eine Vielzahl von Ansätzen zur Erstellung von Vorlagen. Diese Flexibilität hat Vor- und Nachteile, auf die wir hier nicht eingehen werden. In der Regel ist CMS Hub eher präskriptiv. Wenn Sie an die Grenzen dessen stoßen, was mit HubL möglich ist, bietet HubSpot APIs für die Erstellung individuellerer Lösungen. CMS Hub Enterprise-Accounts können serverlose Funktionen nutzen, die eine anspruchsvollere serverseitige Programmierung ermöglichen. 

Wenn Sie weiter auf der Grundlage von CMS Hub entwickeln, können Sie in der HubL-Sprachreferenz weitere Einzelheiten zu bestimmten Sprachfunktionen nachlesen.


War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.