Letzte Änderung: 28. August 2025
Ein Design ist ein übertragbares und eigenständiges Paket von Entwicklerelementen, die zusammen eine flexible Bearbeitung von Inhalten ermöglichen. Zu diesen Elementen können Vorlagen, Module, CSS-Dateien, JavaScript-Dateien, Bilder und vieles mehr gehören. Mithilfe von Designs können Entwickler eine Reihe von Designfeldern erstellen, ähnlich wie Modulfelder, die es Content-Autoren ermöglichen, globale Website-Stile zu steuern, ohne CSS bearbeiten zu müssen. Sie können HubL verwenden, um im gesamten CSS des Designs auf die Werte von Designfeldern zuzugreifen. Content-Autoren können dann mithilfe des Design-Editors Designfelder bearbeiten, eine Vorschau dieser Änderungen im Vergleich zu den vorhandenen Vorlagen innerhalb eines Designs anzeigen und ihre Änderungen veröffentlichen.
UI-Animation zum Bearbeiten von Designeinstellungen, die die Auswahl einer Farbe für Elemente eines Designs zeigt.
Dieses Dokument führt Sie durch die Erstellung Ihres ersten Designs auf Grundlage der HubSpot CMS Boilerplate. Weitere Informationen zu Designs finden Sie in der Referenzdokumentation für Designs.
Wenn Sie zum ersten Mal mit CMS Hub entwickeln, sollten Sie sich diese Ressource ansehen:Schneller Einstieg in die CMS Hub-Entwicklung

​
Bitte beachten:

Bevor Sie beginnen, müssen Sie das HubSpot CLI installieren.
1

Ein Boilerplate-Designprojekt starten

Führen Sie hs create website-theme my-website-theme aus, um ein my-website-theme-Verzeichnis zu erstellen, das mit Dateien von der CMS-Design-Boilerplate gefüllt wird.
2

Die CMS Boilerplate auf Ihren HubSpot-Account hochladen

Führen Sie hs upload my-website-theme my-website-theme aus. Dadurch wird die Vorlage in den Design-Manager Ihres Accounts hochgeladen, und zwar in einen Ordner mit dem Namen my-website-theme.
3

Eine Seite erstellen

So erstellen Sie eine Seite mit dem hochgeladenen Design:
  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Website-Seiten.
  • Klicken Sie oben rechts auf Erstellen und wählen Sie dann Website-Seite aus.
  • Wählen Sie im Dialogfeld die Domain aus, auf der die Seite veröffentlicht werden soll, und geben Sie einen Seitennamen ein. Klicken Sie anschließend auf Seite erstellen.
create-page-from-dashboard
  • Im Bildschirm für die Vorlagenauswahl werden Vorlagen von Ihrem aktiven Design oben auf der Seite angezeigt.
    • Wenn Sie kein aktives Design ausgewählt haben, bewegen Sie den Mauszeiger über die CMS-Design-Boilerplate und klicken Sie auf Als aktives Design festlegen.
    • Wenn Sie bereits ein aktives Design festgelegt haben, wählen Sie Ihr neues Design aus, indem Sie auf das Dropdown-Menü für die Designauswahl klicken und dann Design ändern auswählen. Bewegen Sie den Mauszeiger über die CMS-Design-Boilerplate und klicken Sie auf Als aktives Design festlegen. Wählen Sie im nächsten Bildschirm eine Vorlage aus.
theme-selector
Sie werden dann zum Seiten-Editor weitergeleitet, in dem Sie die Felder des Designs bearbeiten können.
4

Designfelder bearbeiten

  • Klicken Sie in der linken Seitenleiste des Seiten-Editors auf die Registerkarte Designs.
    • Klicken Sie auf der Registerkarte Designs auf Designeinstellungen bearbeiten. Hier können Sie Ihre bestehenden Designeinstellungen ändern. Wenn Sie Änderungen an den Designeinstellungen veröffentlichen, werden die Stile auf allen Seiten aktualisiert, die das aktualisierte Design verwenden.
edit-theme-settings
5

Für lokale Änderungen vorbereiten

Kehren Sie zu Ihrem Terminal zurück und führen Sie dann hs watch my-website-theme my-website-theme aus. Dieser Befehl überwacht Ihr lokales Verzeichnis und lädt die folgenden Änderungen automatisch in Ihren HubSpot-Account hoch, wenn die Datei gespeichert wird.
6

Ein Designfeld hinzufügen

Da wir nun auf lokale Änderungen überwachen, fügen Sie ein neues Designfeld hinzu:
  • Öffnen Sie die fields.json-Datei in Ihrem Editor. Diese Datei steuert die verfügbaren Felder in der Seitenleiste des Design-Editors. Wir fügen ein neues Feld hinzu, um die Footer-Höhe anzugeben.
  • Suchen Sie am unteren Ende der Datei die footer-Gruppe.
  • Kopieren Sie den nachstehenden Code und fügen Sie den JSON in die Datei über dem ersten Element im untergeordneten Array für die footer-Gruppe ein.
// fields.json
      {
      "id" : "",
      "name" : "height",
      "label" : "Footer height",
      "required" : false,
      "locked" : false,
      "display" : "text",
      "step" : 1,
      "type" : "number",
      "min" : 10,
      "max" : 900,
      "help_text":"This footer will expand in height to accomodate any content added to the footer. You are setting the minimum height in px",
      "default" : 100
      },
  • Speichern Sie fields.json und aktualisieren Sie die Design-Vorschau in HubSpot. Ihr neues Feld sollte in der linken Seitenleiste angezeigt werden.
7

In Ihrem CSS auf das Feld verweisen

  • Öffnen Sie die theme-overrides.css-Datei in Ihrem Editor. Suchen Sie dann den CSS-Selektor für .footer. Jetzt fügen wir diesem Selektor ein min-height-Element hinzu.
    • Um auf einen Wert in einem Design zuzugreifen, verwenden Sie das theme-Objekt. Sie müssen zum Beispiel {{ theme.footer.height }} verwenden, um auf den in unserem Feld für die Höhe festgelegten Wert zuzugreifen.
    • Ersetzen Sie die .footer-Deklaration in theme-overrides.css durch Folgendes:
    .footer {
  background-color: {{ footer_bg_color }};
  min-height: {{theme.footer.height}}px;
}
    • Speichern Sie theme-overrides.css, um sie in Ihren HubSpot-Account hochzuladen.
8

Änderungen testen

Kehren Sie zum Design-Editor zurück und aktualisieren Sie die Seite, damit das neue Feld im Footer erscheint. Aktualisieren Sie den Wert für die Höhe, damit er sofort in der Vorschau angezeigt wird. Es könnte hilfreich sein, eine Hintergrundfarbe für den Footer festzulegen, damit Sie die Änderung leichter erkennen können.

​
Nächste Schritte

Nachdem Sie Ihr Design erstellt und aktualisiert haben, können Sie nun weitere Designfelder erstellen und diese für Ihre Projekte anpassen. Weitere Anpassungsmöglichkeiten finden Sie in der Übersicht über Designs. Während der Erstellung Ihres Designs kann es hilfreich sein, sich die Best Practices für das Optimieren von Websites in CMS Hub anzusehen. HubSpot hat mehrere Standarddesigns, die automatisch in CMS Hub enthalten sind. Diese Designs können Sie anzeigen, klonen und aktualisieren, um zu lernen, wie Sie ein Design in einem realen Szenario verwenden können. Sobald Sie sich mit Designs vertraut gemacht haben, erfahren Sie hier, wie Sie Ihr erstes benutzerdefiniertes Modul erstellen.