Überblick über Design

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.

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

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.

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.

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.

Wenn Sie ein Design ausarbeiten, können Sie Module und Abschnitte im Seiten-Editor ausblenden, 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 an.

Zurzeit können .json-Dateien nur über die Tools für lokale Entwicklung 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:

// 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 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. 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 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:

// 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:

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

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.

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 als Paket

​Seitenerstellung

​Designfelder

​Designmodule

​Struktur der Designdatei

​theme.json

​fields.json

​Designfeldwerte verwenden

​Designs in einer Vorschau anzeigen

​Testmodus

​Verwandte Ressourcen

Designs als Paket

Seitenerstellung

Designfelder

Designmodule

Struktur der Designdatei

theme.json

fields.json

Designfeldwerte verwenden

Designs in einer Vorschau anzeigen

Testmodus

Verwandte Ressourcen