> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.de/docs/llms.txt > Use this file to discover all available pages before exploring further. # Überblick über Design > Erstellung von CMS Hub-Designs, die es Entwicklern ermöglichen, Designsysteme für die Arbeit von Content-Autorenn zu erstellen. 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](/developer-tooling/local-development/hubspot-cli/install-the-cli). 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. Designauswahl innerhalb von HubSpot Das Vorschaubild des Designs sowie andere Konfigurationen für ein Design werden in der [theme.json](#theme-json)-Datei festgelegt. ### Designfelder Mithilfe von Designs können Entwickler eine Reihe von [Designfeldern](#fields-json) 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](#using-theme-field-values). 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. themes Designfelder werden durch die [fields.json-Datei eines Designs](#fields-json) festgelegt. Wenn Sie ein Design im [Testmodus](/cms/start-building/building-blocks/overview#test-mode) 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. copy-theme-settings-test-mode ### 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. Designmodule innerhalb eines Designs Wenn Sie ein Design ausarbeiten, können Sie [Module und Abschnitte im Seiten-Editor ausblenden](/cms/start-building/building-blocks/modules/hide-modules-and-sections), um eine optimierte Content-Erstellung zu ermöglichen. ## 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](https://github.com/HubSpot/cms-theme-boilerplate) an. Struktur der Designdatei Zurzeit können .json-Dateien nur über die [Tools für lokale Entwicklung](/developer-tooling/local-development/hubspot-cli/install-the-cli) erstellt und in einen HubSpot-Account hochgeladen werden. ### theme.json 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: ```json theme={null} // theme.json { "label": "Cool Theme", "preview_path": "./templates/home-page.html", "screenshot_path": "./images/templates/homepage.jpg", "enable_domain_stylesheets": false, "version": "1.0", "author": { "name": "Jon McLaren", "email": "noreply@hubspot.com", "url": "https://theme-provider.com/" }, "documentation_url": "https://theme-provider.com/cool-theme/documentation", "license": "./license.txt", "example_url": "https://theme-provider.com/cool-theme/demo", "is_available_for_new_content": true } ``` | 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](https://spdx.org/licenses/) 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 Die `fields.json`-Datei steuert die verfügbaren Felder und Feldgruppen im Design-Editor, einschließlich der [Stilfelder](https://developers.hubspot.de/docs/guides/cms/content/fields/overview#style-fields). 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](/cms/start-building/building-blocks/global-content) 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](/cms/reference/fields/module-theme-fields#boolean) * [Rahmen](/cms/reference/fields/module-theme-fields#border) * [Auswahl](/cms/reference/fields/module-theme-fields#choice) * [Farbe](/cms/reference/fields/module-theme-fields#color) * [Schriftart](/cms/reference/fields/module-theme-fields#font) * [Bild](/cms/reference/fields/module-theme-fields#image) * [Zahl](/cms/reference/fields/module-theme-fields#number) * [Abstand](/cms/reference/fields/module-theme-fields#spacing) Eine umfassende Dokumentation der möglichen Optionen für Designfelder finden Sie in der [Dokumentation zu Modulen und Designfeldern](/cms/reference/fields/module-theme-fields). #### Designfeldwerte verwenden 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: ```json theme={null} // fields.json [ { "type": "group", "name": "typography", "label": "Typography", "children": [ { "type": "font", "name": "h1_font", "label": "Heading 1", "load_external_fonts": true, "default": { "color": "#000", "font": "Merriweather", "font_set": "GOOGLE", "variant": "700", "size": "48" } } ] } ] ``` Würde in CSS referenziert folgendermaßen werden: ```css theme={null} h1 { font-size: {{ theme.typography.h1_font.size }}px; font-family: {{ theme.typography.h1_font.font }}; color: {{ theme.typography.h1_font.color }}; text-decoration: {{ theme.typography.h1_font.styles.text-decoration }}; font-style: {{ theme.typography.h1_font.styles.font-style }}; font-weight: {{ theme.typography.h1_font.styles.font-weight }}; } ``` ## 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
Der Testmodus bietet Ihnen eine sichere Umgebung, in der Sie mit den Feldern Ihres Designs experimentieren und sicherstellen können, dass sie so funktionieren, wie Sie es erwarten. Die Benutzeroberfläche sieht genauso aus wie [die Designvorschau/der Design-Editor, die bzw. den Content-Autoren sehen](https://knowledge.hubspot.com/website-pages/edit-your-global-theme-settings#edit-theme-settings). Sie können jedoch sicher sein, dass Sie die Einstellungen Ihrer eigentlichen Website nicht ändern. Zum Schutz vor versehentlichen Aktualisierungen der Designeinstellungen ist die Veröffentlichung im Testmodus blockiert. Sie können feststellen, ob Sie sich im Testmodus befinden, da `?testmode=true` in Ihrer Adressleiste angezeigt wird. Außerdem sehen Sie ein Testmodus-Symbol im Header des Design-Editors.
Design-Test-/Vorschaumodus 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**. copy-theme-settings-test-mode-design-manager (1) * 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**. page-editor-edit-theme * 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. ## Verwandte Ressourcen * [Erste Schritte mit Designs](/cms/start-building/building-blocks/themes/getting-started) * [Hinzufügen von Designfunktionen zu bestehenden Websites](/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites) * [HubSpot Theme Boilerplate](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)