Übersicht über Designs

Da Designs ein Paket sind, werden sie in der HubSpot-App an verschiedenen Stellen kaskadiert, um eine effiziente Content-Erstellung zu ermöglichen. Entwickler können mithilfe von Designs ein System erstellen, in dem die Content-Autoren arbeiten können. Ein Design kann mit einem beliebigen Maß an Flexibilität ausgestattet werden, ebenso mit Leitlinien, um den Anforderungen Ihres Unternehmens gerecht zu werden. 

Wenn Content-Autoren mit der Erstellung neuer Seiten beginnen, werden sie aufgefordert, zunächst das Design auszuwählen, mit dem sie eine Seite erstellen möchten, und dann die Vorlage auszuwählen, die sie innerhalb des Designs verwenden möchten.

Das Vorschaubild des Designs sowie andere Konfigurationen für ein Design werden in der theme.json-Datei festgelegt. 

Mithilfe von Designs können Entwickler eine Reihe von Designfeldern erstellen, ähnlich wie Modulfelder, die es Content-Autoren ermöglichen, anhand verschiedener von einem Entwickler entworfenen Steuerelemente und Einstellungen eine globale stilistische Kontrolle über eine Website zu erlangen, ohne CSS bearbeiten zu müssen. Entwickler verwenden HubL, um in ihrem CSS auf die Werte von Designfeldern zuzugreifen. Content-Autoren nutzen 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.

Designfelder werden durch die fields.json-Datei eines Designs festgelegt. 

Wenn Sie ein Design im Testmodus bearbeiten, können Sie auch die JSON-Einstellungen des Designs kopieren. Dadurch können Sie alle Aktualisierungen in die lokale fields.json-Datei des Designs einfügen.

Die Module eines Designs sollten speziell für die Verwendung in den Vorlagen dieses Designs konzipiert sein. Der Content-Editor hebt diese Designmodule hervor, sodass Content-Autoren schnell und einfach Module zu den von ihnen erstellten Seiten hinzufügen können, die für den Kontext der jeweiligen Seite geeignet sind. Die Standardmodule und die übrigen Module in Ihrem HubSpot-Account sind weiterhin verfügbar.

Wenn Sie ein Design ausarbeiten, können Sie Module und Abschnitte im Seiten-Editor ausblenden, um eine optimierte Content-Erstellung zu ermöglichen.

Ein Design ist ein einzelnes Verzeichnis mit Dateien. Sie können HTML-, CSS- und JavaScript-Dateien, Module und zusätzliche Dateien einbinden, die in Unterverzeichnissen des übergeordneten Designordners auf beliebige Weise organisiert werden können. Zur Erstellung eines Designs sind zwei JSON-Dateien erforderlich: theme.json und fields.json. Diese Dateien sollten in den Stammordner des Designs aufgenommen werden.

Um mit einem Beispiel zu beginnen, sehen Sie sich die HubSpot CMS Boilerplate an.

Die theme.json-Datei enthält die Meta-Informationen für Ihr Designverzeichnis, z. B. das lesbare Label des Designs, seinen Vorschau-Screenshot und verschiedene Konfigurationen, wie sich das Design verhalten soll. Ihre theme.json-Datei sieht dann etwa so aus wie die folgende:

Die fields.json-Datei steuert die verfügbaren Felder und Feldgruppen im Design-Editor, einschließlich der Stilfelder. Welche Felder Sie berücksichtigen, hängt davon ab, wie viel Kontrolle die Content-Autoren über den Seiten-Editor haben sollen. Die Anzahl der Felder, die für Designs zur Verfügung stehen, ist begrenzter als bei Modulen, da sich Designfelder am besten für Styling-Optionen eignen, während globale Inhalte besser für Designinhalte geeignet sind.

Anstatt beispielsweise ein Textfeld für den Slogan Ihrer Website zum field.json des Designs hinzuzufügen, sollte es als globales Modul hinzugefügt werden, damit die Content-Autoren den Slogan über den Seiten-Editor und nicht über den Design-Editor aktualisieren können.

Diese Felder können in Designs verwendet werden:

• Boolesch
• Rahmen
• Auswahl
• Farbe
• Schriftart
• Bild
• Zahl
• Abstand

Eine umfassende Dokumentation der möglichen Optionen für Designfelder finden Sie in der Dokumentation zu Modulen und Designfeldern. 

Um auf Feldwerte zuzugreifen, verwenden Sie die Punktnotation und stellen dem Pfad zu dem Wert in fields.json das Präfix theme voran. Sie können einen Designfeldwert in Ihren Stylesheets mit einer Syntax wie {{ theme.path.to.value }} verwenden. Zum Beispiel das unten dargestellte Schriftartfeld:

Würde in CSS referenziert folgendermaßen werden:

Es gibt zwei Möglichkeiten, den Testmodus zu aktivieren:

• So aktivieren Sie den Testmodus über den Design-Manager:
  • Wählen Sie im Design-Manager Ihr Design im Finder aus.
  • Klicken Sie oben in der linken Seitenleiste auf die Schaltfläche „Vorschau“.
    

• So aktivieren Sie den Testmodus über den Seiten-Editor:
  • Klicken Sie im Seiten-Editor in der linken Seitenleiste auf die Registerkarte „Design“ und klicken Sie dann auf „Designeinstellungen bearbeiten“.
    
  • Fügen Sie der URL ?testmode=true hinzu und drücken Sie dann die Eingabetaste. Sie befinden sich dann im Testmodus.

 Eine andere Methode besteht darin, die Designeinstellungen im Seiten-Editor zu öffnen. Fügen Sie dann den Abfrageparameter ?testmode=true zur URL in Ihrer Adressleiste hinzu.

• Designs
• Hinzufügen von Designfunktionen zu bestehenden Websites
• HubSpot Theme Boilerplate