Hinzufügen von Designfunktionen zu einer bestehenden CMS Hub-Website

Einer der Vorteile von HubSpot ist, dass Sie es nicht ständig aktualisieren müssen. CMS Hub ist immer auf dem neuesten Stand. Die mit CMS Hub eingeführten neuen Funktionen sind additiv. Die Vorlagen, Module usw. für bestehende CMS Hub-Websites funktionieren also genauso, wie Sie sie erstellt haben. Sie sind sogar noch besser, denn hinter den Kulissen wird das CMS-System immer besser, schneller und einfacher zu bearbeiten. 

Es gibt einige spezifische Funktionen von CMS Hub, die ein Entwickler hinzufügen muss. Sie können einige dieser Funktionen anders implementieren, als Sie es bei einer brandneuen Website tun würden. Dieses Tutorial wird Sie dabei unterstützen, diese Funktionen in Ihre bestehende(n) Website(s) einzubauen. 

Bevor Sie fortfahren:

• Lesen Sie sich die Schlüsselkonzepte von CMS Hub durch, auch wenn Sie schon lange auf Grundlage von HubSpot entwickeln. Sie bekommen dadurch ein besseres Verständnis dafür, wie alle Teile zusammenpassen.
• Sie müssen auch das CMS-CLI verwenden. Wenn Sie es also noch nicht installiert haben, sollten Sie es einrichten.

Sie können diese Funktionen unabhängig voneinander hinzufügen und nutzen. Beginnen Sie bei der Überschrift für bestimmte Funktionen, die Sie benötigen. Sie müssen diesem Tutorial nicht durchgehend linear folgen.

CMS Hub-Designs sind ein Paket von Vorlagen, Modulen, CSS-, JSON- und JS-Dateien. Dass Designs als Paket bereitgestellt werden, ist für das gesamte Content-Editor-Erlebnis von Bedeutung. 

Bei der Erstellung einer neuen Website-Seite oder Landingpage wird dem Content-Autor ein Raster mit den Design in seinem Account angezeigt. Sie wählen das Design aus, das sie verwenden, und sehen dann ein Raster mit nur den Vorlagen in diesem Design.

Wenn Sie eine Seite mit einer Vorlage aus einem Design bearbeiten, werden die Module in diesem Design besonders behandelt, sodass sie im Bereich „Modul hinzufügen“ hervorgehoben werden.

Sie machen Ihre Vorlagen, Module, CSS- und JS-Dateien zu einem Design, wenn sie sich im selben enthaltenden Ordner befinden. Es spielt keine Rolle, ob sie in Unterordnern organisiert sind, wichtig ist nur, dass diese Elemente in einem Ordner enthalten sind. Wenn sie bereits auf diese Weise gespeichert sind, umso besser. Wenn nicht, erstellen Sie diesen Ordner und verschieben Sie Ihre Elemente dorthin. Benennen Sie den Ordner so, wie Sie Ihr Design benennen möchten. Der Name ist völlig frei wählbar. Benennen Sie ihn etwa nach der Marke des Unternehmens, das die Website widerspiegelt, und dem Jahr der Neugestaltung oder Aktualisierung.

Für Designs sind zwei JSON-Dateien erforderlich, von denen zunächst nur eine den tatsächlichen Inhalt benötigt.

• theme.json – enthält die Einstellungen Ihres Designs.
• fields.json – enthält Felder, die verwendet werden können, um Änderungen am Design einer gesamten Website vorzunehmen.

JSON-Dateien sind speziell und können derzeit nicht mit dem Design-Manager erstellt werden. Diese Dateien können über das CMS-CLI hochgeladen werden. 

1. Holen Sie den im Schritt „Vorhandene Dateien in einem enthaltenden Ordner ablegen“ erstellten Ordner auf Ihren Computer. 
2. Erstellen Sie innerhalb des Ordners auf Ihrem Computer eine neue Datei und nennen Sie sie theme.json.
3. Kopieren Sie die Beispiel-theme.json-Datei aus dem „Designs“-Dokument.
4. Fügen Sie den Beispielcode in Ihre theme.json-Datei ein.
5. Ändern Sie den Wert von "label" in den Namen des Designs, der Content-Autoren angezeigt werden soll.
6. Ändern Sie "preview_path" in den Pfad entweder Ihrer Startseitenvorlage oder Ihrer am häufigsten verwendeten Vorlage.
7. Machen Sie einen Screenshot von der Startseite der Website. Benennen Sie das Bild thumb.jpg. Legen Sie das Bild im selben Ordner wie Ihre theme.json-Datei ab.
8. Ändern Sie "screenshot_path" in theme.json in den Pfad Ihres thumb.png-Bildes.
9. Speichern Sie die Datei.
10. Erstellen Sie im selben Ordner wie Ihre theme.json eine neue Datei, nennen Sie sie „fields.json“. Geben Sie in dieser Datei einfach [] ein und speichern Sie die Datei.

Um Ihre Änderungen im Design-Manager zu sehen, führen Sie den hs upload command aus. Sie haben jetzt ein grundlegendes Design. Module und Vorlagen innerhalb dieses Designs werden in Verbindung mit dem Design angezeigt.

Designfelder sind Steuerelemente, die Sie einem Content-Autor zur Verfügung stellen können, damit dieser designübergreifende Stiländerungen vornehmen kann.

Während der ersten Erstellung einer Website können Content-Autoren mithilfe dieser Designsteuerelemente beim website-übergreifenden Branding einbezogen werden. Viele Teams schätzen diese, da sich der Entwickler dadurch auf die eher technischen Aspekte der Website-Entwicklung konzentrieren kann.

Bei bestehenden Websites können Designfelder überflüssig sein. Wenn die Website bereits benutzerdefiniert erstellt wurde, gibt es wahrscheinlich keinen Grund, Farb- und Typografiesteuerelemente für die gesamte Website hinzuzufügen. Wenn sich das Branding einer Website erheblich ändert, kann es sinnvoller sein, eine Neugestaltung vorzunehmen, als nachträglich Felder hinzuzufügen. Letztlich ist dies jedoch eine Entscheidung, die Sie gemeinsam mit den anderen an der Website Beteiligten treffen sollten.

Um dem Design Felder hinzuzufügen, fügen Sie deren JSON in Ihre fields.json-Datei ein. Die Felder folgen der gleichen Struktur wie die Modulfelder.

Stellen Sie sicher, dass die Benutzer, die Zugriff auf das Ändern der Werte von Designfeldern haben sollen, über die Berechtigung „Globalen Content und Designs bearbeiten“ verfügen. Bei Benutzern, die diese Einstellungen nicht bearbeiten dürfen, sollte sichergestellt sein, dass sie diese Funktion NICHT aktiviert haben.

Drag-&-Drop-Bereiche und globale Teilverlagen erfordern die Verwendung von HTML- und HubL-Code-Dateien. Wenn Ihre bestehende Website mit dem alten Drag-&-Drop-Design-Manager-System erstellt wurde und Sie die neuen Funktionen nutzen möchten, müssen diese Vorlagen möglicherweise als HTML geklont werden.

So klonen Sie diese Vorlagen als HTML + HubL-Vorlage:

1. Öffnen Sie den Design-Manager und suchen Sie die Vorlage im Finder.
2. Klicken Sie mit der rechten Maustaste auf die Vorlage.
3. Wählen Sie im daraufhin angezeigten Kontextmenü die Option „Als HTML klonen“ aus.

Jetzt können Sie mit dem Hinzufügen der Drag-&-Drop-Bereiche sowie globalen Teilverlagen beginnen.

Durch das Hinzufügen vonDrag-&-Drop-Bereichen zu Vorlagen können Content-Autoren die Module sowohl horizontal als auch vertikal auf einer Seite platzieren. Durch Drag-&-Drop-Bereiche erhält ein Content-Autor außerdem zusätzliche stilistische Möglichkeiten. Da sich mithilfe einer Vorlage mit einem Drag-&-Drop-Bereich viele verschiedene Layouts erstellen lassen, kann sich der Entwickler auf die technischen Aspekte der Website-Erstellung und -Aktualisierung konzentrieren.

Das hängt ganz davon ab, ob die Seite Ihre Unternehmensziele erfüllt. Mit anderen Worten: Es gilt das alte Sprichwort „Repariere nichts, was nicht kaputt ist“.  Wenn das Layout der Seite geändert werden muss, ist es wahrscheinlich ratsam, die Seite auf die Verwendung von Drag-&-Drop-Bereichen umzustellen. Wenn die Seite ihren Zweck erfüllt und das Layout nicht geändert werden muss, ist sie wahrscheinlich gut, sie so zu belassen.

Es ist relativ einfach, einen Klon einer alten Vorlage zu erstellen und die flexible Spalte in einen Drag-&-Drop-Bereich zu ändern. Das ist eine gute Idee, denn damit eröffnen sich Content-Autoren viele Möglichkeiten. Auf diese Weise erhalten sie einen großen Gestaltungsspielraum für neue Seiten. Wenn es sich bei Ihrer Vorlage um eine Design-Manager-Drag-&-Drop-Vorlage handelt, siehe Design-Manager-Drag-&-Drop als HTML klonen.

1. Die einfachste Lösung besteht darin, die Instanzen der flexiblen Spalten zu finden, die das HubL-Tag {% widget_container "my_unique_column_name" %} verwenden.
2. Ersetzen Sie jede Instanz bei Bedarf durch {% dnd_area "my_unique_area_name" %}.
3. Wenn Sie die Standardmodule nicht festlegen möchten, lassen Sie den dnd_area leer. Wenn Sie die Standardmodule für die Region übernehmen oder neue hilfreiche Standardwerte festlegen möchten, fügen Sie innerhalb des dnd_area einen dnd_section und innerhalb von diesem eine dnd_columnhinzu.
4. Für jedes Modul-Tag innerhalb des alten widget_container müssen Sie eine dnd_row erstellen, die ein dnd_module mit einem passenden Pfad zu den Modulen enthält, die Sie standardmäßig anzeigen möchten. Dadurch entsteht das gleiche vertikale Layout wie bei der flexiblen Spalte.

Wenn Sie eine Seite in einen Drag-&-Drop-Bereich umwandeln wollen, ist die sicherste Methode, dies mit Hilfe von Content-Staging zu tun.

1. Öffnen Sie das Content-Staging-Tool, suchen Sie die vorhandene Seite und stellen Sie sie bereit. Wählen Sie „Leere Seite in Staging-Umgebung bereitstellen“ aus.
2. Wählen Sie Ihre neue Vorlage aus, die den Drag-&-Drop-Bereich verwendet.
3. Kopieren Sie die Informationen aus der Originalversion der Seite und fügen Sie sie in das gewünschte Layout ein.
4. Wenn Sie fertig sind, veröffentlichen Sie sie in der Staging-Umgebung.
5. Gehen Sie im Content-Staging-Tool zur Registerkarte „Veröffentlichen“. Wählen Sie Ihre Seite aus und veröffentlichen Sie sie von der Staging-Umgebung aus.

Globale Teilvorlagen sind Teile von HTML & HubL-Inhalt, die auf Ihrer gesamten Website wiederverwendet werden können. Die gebräuchlichsten Typen von globalen Teilverlagen sind Header, Seitenleisten- und Footer von Websites. Für Content-Autoren manifestieren sich globale Teilverlagen im Content-Editor als Regionen, die sie zur Bereiche, die im Editor für globalen Content zum Bearbeiten auswählen können. Der Editor für globalen Content sieht genauso aus wie der Seiten-Editor, dient aber der Bearbeitung von globalem Content und Designs bearbeiten“ verfügen.. 

Zur Veranschaulichung könnten Sie den Header als eine globale Teilverlage mit Modulen für die Navigation und andere Inhalte implementieren. Wenn der Content-Autor einen Link zur Navigation hinzufügen möchte, kann er im Seiten-Editor auf den Header klicken, dann auf das Menümodul und das Menü aktualisieren.

Stellen Sie sicher, dass die Benutzer, die Zugriff auf das Bearbeiten von globalem Content haben sollen, über die Berechtigung „Globalen Content und Designs bearbeiten“ verfügen.

Für Accounts in CMS Hub Enterprise bieten Code-Warnungen einen zentralen Ort für Entwickler und IT-Manager, um einen Überblick über Probleme zu erhalten, die die Performance und das Rendering von Seiten und Inhaltselementen im Account beeinträchtigen.

Da Sie die Website aktiv optimieren, sollten Sie die Vorteile der neuen Funktionen nutzen. Es empfiehlt sich, die Code-Warnungen für Ihren Account zu überprüfen und eventuelle Probleme zu lösen.