Überblick über CMS Hub

Dieser Abschnitt soll Ihnen helfen, die wichtigsten Aspekte von HubSpots CMS 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 beim Entwickeln im CMS sind, sehen Sie sich zuerst das Schnellstart-Tutorial an und konsultieren Sie dann bei Bedarf diese Übersicht.

Content Enablement

CMS Hub wurde entwickelt, um Unternehmen dabei zu helfen, ihre Web-Präsenz zu erweitern. Dabei soll vor allem Marketern das Erstellen und Verwalten von Inhalten ermöglicht und erleichtert werden. Die Inhalte, Lead-Erfassung und Analytics der Website sind 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.

Als HubSpot-CMS-Entwickler erstellen Sie nicht nur Inhaltselemente wie Designs, Vorlagen und Module, Sie erstellen sie auch so, dass Content-Autoren sie nach Bedarf mit Inhalten anpassen können. Dementsprechend müssen Sie die Bedürfnisse von Entwicklern über ein System von Designs und Modulen sowie Drag-&-Drop-Bereichen mit den Anforderungen von Content-Autoren in Einklang bringt.

Vorlage und Module sind die Schnittstelle zwischen Entwicklern und Marketern

Eine gut konzipierte 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. Zu diesem Zweck wird empfohlen, sich beim Erstellen in einer Vorschau anzusehen, wie das Seitenerstellungserlebnis für Content-Autoren aussieht. 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

HubSpot übernimmt das Hosting und die Wartung Ihrer Seiten, damit sie sich nicht um Plug-in-Verwaltung, Updates, Hosting, Skalierung oder Sicherheit kümmern müssen. Der Nachteil dabei ist, dass das System im Vergleich zu selbst gehosteten CMS-Systemen die Möglichkeiten ein wenig mehr einschränkt. 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.

Arten von Inhalten

Es gibt viele Typen von Inhalten, die Sie mit dem CMS von HubSpot erstellen. Die Benutzeroberfläche für Content-Autoren unterscheidet sich je nach Inhaltstyp geringfügig. Dies hat Auswirkungen, die Sie als Entwickler kennen müssen.

Website-Seiten und Landingpages

Website-Seiten und Landingpages werden unabhängig voneinander erstellt, aber alle Seiten basieren auf Vorlagen. Für Content-Autoren ist der Prozess des Erstellens einer Landingpage oder einer Website-Seite nahezu identisch. 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 Landingpage 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 Landingpages oft spezifische Konversionsziele haben.

Blogs

HubSpot-Blogs haben 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. Sie können für einen Blog festlegen, dass er die gleiche Vorlage für Blog-Beiträge und Listing-Seiten teilt, oder über separate Vorlagen für die Listing-Seite und für Blog-Beiträge verfügen. Blog-Beiträge müssen die gleiche Vorlage teilen. Erfahren Sie mehr über Blog-Vorlagen-Markup und wie Sie Blogs in HubSpot erstellen und verwalten.

E-Mails

E-Mails können in HubSpot auf unterschiedliche Art und Weise erstellt werden:

  • Klassische E-Mail: Erstellen Sie E-Mail-Vorlagen und -Module ähnlich wie Websites und Landingpages. Sie können auch kodierte E-Mail-Vorlagen erstellen, um die vollständige Kontrolle über das Markup zu haben.
  • Drag-&-Drop-E-Mails: Erstellen Sie anpassbare Drag-&-Drop-E-Mail-Vorlagen, mit denen Content-Autoren mithilfe der Drag-&-Drop-Oberfläche von HubSpot E-Mail-Layouts und -Inhalte erstellen können.

Strukturierte Inhalte

Neben dem Erstellen von Seiteninhalten über die In-App-Editoren oder der Hartcodierung in Vorlagen können Sie auch strukturierte Datenquellen verwenden, um dynamische Seiteninhalte mit HubL zu füllen. Sie können die folgenden Datenquellen verwenden, um Seiten zu füllen:

  • HubDB: Speichern Sie Daten in Zellen von HubDB-Tabellen.
  • CRM-Datensätze: Speichern Sie Daten in CRM-Datensätzen, z. B. Kontakte, Unternehmen oder benutzerdefinierte Objekte.

Dynamische Seiten mit strukturierten Inhalten zu erstellen bedeutet, dass Sie Webseiten und Seiteninhalte erstellen, bearbeiten und entfernen können, indem Sie die Datenquellen direkt aktualisieren. Ähnlich wie bei einem HubSpot-Blog umfasst ein Satz dynamischer Seiten eine einzelne Listing-Seite, um die Instanzen Ihrer Datenquelle anzuzeigen, und dann eine separate Seite für jede einzelne Instanz. Mit HubL können Sie die Daten, die die Seiten anzeigen, vollständig konfigurieren.

Beispielsweise können Sie eine HubDB-Tabelle erstellen, in der eine Reihe mit Informationen für jedes Mitglied eines Vertriebsteams gespeichert ist. Mithilfe dieser HubDB-Tabelle kann HubSpot dann eine Listing-Seite generieren, um wichtige Details aus jeder Tabellenzeile anzuzeigen (z. B. einen Namen und ein Bild für die einzelnen Vertriebsmitarbeiter), zusammen mit einer separaten Seite pro Vertriebsmitarbeiter, um weitere Informationen anzuzeigen (z. B. Biografie und Telefonnummer). Sollte ein Vertriebsmitarbeiter später zu einem anderen Team befördert werden, können Sie seine Zeile aus der HubDB-Tabelle löschen. HubSpot löscht daraufhin automatisch seine Detailseite und entfernt sie von der Listing-Seite. 

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. Sie können dieses Dateisystem entweder im linken Fenster des Design-Managers oder in Ordnern anzeigen, 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.

Hinter den Kulissen werden diese Dateien 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.erechtigungen und Symlinks, werden im Dateisystem für Entwickler nicht angeboten.

Dies unterscheidet sich von der Vorgehensweise eines herkömmlichen CMS-Systems, 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.

Vorlagen im Dateisystem werden automatisch erkannt und Content-Autoren präsentiert, 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. Es wird jedoch empfohlen, Ihre Inhaltselemente in ähnlicher Weise zu organisieren, wie wir es im Boilerplate-Beispielcode für das CMS getan haben. 

Bitte beachten: In der Standardeinstellung minifiziert 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 das CLI in den Design-Manager hochgeladen werden. Dies bedeutet, dass Sie nicht bereits minimierten Code direkt zum Design-Manager hinzufügen sollten.

Erfahren Sie mehr über JavaScript und CSS-Minifizierung.

Designs, Vorlagen, Module und Felder

Designs, Vorlagen, Module und Felder sind die Objekte, mit denen Sie 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 und Bilder. Sie 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

Designs sind die Top-Level-Objekte, die das Erscheinungsbild einer Website definieren und eine benutzerfreundliche Umgebung zum Bearbeiten von Inhalten schaffen. Zu diesen Elementen können Vorlagen, Module, CSS-Dateien, JavaScript-Dateien, Bilder und vieles mehr gehören.

Mithilfe von Designs können Sie eine Reihe von Felder 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. 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 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 von Content Hub nutzen, um sicherzustellen, dass die Marketer die Seiten einfach bearbeiten können. Einige Best Practices umfassen:

  • 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 für die meisten Komponenten auf Ihrer Seite, wodurch sie neu angeordnet und auf der gesamten Website wiederverwendet werden können. Im Folgenden finden Sie weitere Informationen zu Modulen.
  • 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. Es wird jedoch empfohlen, kodierte Vorlagen zu verwenden, da sie mehr Kontrolle und Funktionalität bieten als Drag-&-Drop-Vorlagen, z. B. die Unterstützung von Drag-&-Drop-Bereichen.

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

Module

Module sind wiederverwendbare Komponenten, die Sie in Vorlagen und auf Seiten 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.

HubSpot bietet einen Satz von Standardmodulen wie Header, Rich-Text, Bilder, Schaltflächen und CTAs, die Sie als grundlegende Komponenten verwenden. Sie werden wahrscheinlich auch Elemente entwickeln wollen, 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.

Erfahren Sie mehr in der Modulübersicht.

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.

Die HubL-Sprache

Die Hauptsprache, mit der Sie Website-Elemente im CMS von HubSpot erstellen, ist die HubSpot Markup Language oder HubL (ausgesprochen „Hubble“). 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

Wenn Sie an die Grenzen dessen stoßen, was mit HubL möglich ist, bietet HubSpot APIs für die Erstellung individuellerer Lösungen. Content Hub Enterprise-Accounts können serverlose Funktionen nutzen, die eine anspruchsvollere serverseitige Programmierung ermöglichen. 

Sie können 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.