Letzte Änderung: 28. August 2025
Ein Design ist eine übertragbare und geschlossene Sammlung von Entwicklerelementen, die eine flexible Bearbeitung von Inhalten ermöglichen. Sie können Designs lokal mit dem HubSpot-CLI unter Verwendung der von Ihnen bevorzugten Tools, Verfahren und Arbeitsabläufe erstellen. Designs und alle ihre Dateien sind auch zwischen Umgebungen und Accounts übertragbar. Eine Videoanleitung für den Einstieg in die Entwicklung von Designs finden Sie im folgenden HubSpot Academy-Video:
Designs als Paket
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.Seitenerstellung
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.
Designfelder
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.
fields.json
-Datei des Designs einfügen.

Designmodule
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.
Struktur der Designdatei
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 CMS Hub-Boilerplate an.

Zurzeit können .json-Dateien nur über die Tools für lokale Entwicklung erstellt und in einen HubSpot-Account hochgeladen werden.
theme.json
Dietheme.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:
Parameter | Typ | Beschreibung |
---|---|---|
label | Zeichenfolge | Das lesbare Label des Designs, das an verschiedenen Stellen in der HubSpot-App verwendet wird, z. B. im Bildschirm zur Vorlagenauswahl und im Design-Editor. |
preview_path | Zeichenfolge | Ein relativer Pfad zu einer Vorlagendatei im Design, die die Standardvorlage sein soll, die bei der Vorschau eines Designs im Design-Editor verwendet wird. |
screenshot_path | Zeichenfolge | Ein relativer Pfad zu einer Bilddatei, die verwendet wird, um eine Momentaufnahme davon zu erstellen, wie das Design an verschiedenen Stellen der Designauswahl aussieht, z. B. im Bildschirm für die Vorlagenauswahl. |
enable_domain_stylesheets | Boolesch | Aktivieren oder Deaktivieren von Stylesheets, die an Domains in den Website-Einstellungen angehängt sind und in Vorlagen innerhalb des Designs berücksichtigt werden. Der Standardwert ist false . |
version | Zeichenfolge | Ganzzahlige Versionsnummer, die . -Versionen unterstützt. |
Author | Objekt | Objekt, mit dem Informationen über sich selbst als Designanbieter bereitgestellt werden.name Der Name des Anbieters. email Die Support-E-Mail-Adresse des Anbieters. url Die Website des Anbieters. |
documentation_url | Zeichenfolge | Der Link zur Designdokumentation. |
example_url | Zeichenfolge | Der Live-Beispiel-Link des Designs. |
license | Zeichenfolge | Ein gültiger SPDX-Identifikator oder der relative Pfad zur Lizenz innerhalb Ihres Designs. Diese Lizenz legt fest, welche Nutzung und Änderungen durch den Ersteller des Designs erlaubt sind. Nützlich bei der Einreichung beim Marketplace. |
is_available_for_new_content | Boolesch | Boolescher Wert, der festlegt, ob ein Design auf der Seite des Content-Autors zur Auswahl angezeigt wird. Der Standardwert ist true . |
fields.json
Diefields.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 Formatierungsoptionen 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:
Eine umfassende Dokumentation der möglichen Optionen für Designfelder finden Sie in der Dokumentation zu Modulen und Designfeldern.
Designfeldwerte verwenden
Um auf Feldwerte zuzugreifen, verwenden Sie die Punktnotation und stellen dem Pfad zu dem Wert infields.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:
Designs in einer Vorschau anzeigen
Entwickler müssen manchmal testen können, ob ihre Designfelder ordnungsgemäß funktionieren, ohne dass dies Auswirkungen auf eine echte Seite hat. Hier kommt der Design-Testmodus ins Spiel.Testmodus
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.
.png)
-
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.
?testmode=true
zur URL in Ihrer Adressleiste hinzu.