Erste Schritte mit Designs

Last updated:

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:

Quick start to CMS Hub development

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“
  • Wählen Sie unter „Ihre Designs“ das CMS-Design-Boilerplate-Design aus und wählen Sie dann eine Vorlage aus. 
Bildschirmfoto der Seitenerstellung für eine Vorlage in einem Design

4. Designfelder bearbeiten

  • Klicken Sie in der linken Seitenleiste des Seiten-Editors auf die Registerkarte „Design“.
  • Wählen Sie „Designeinstellungen bearbeiten“ aus. 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. 
Designeinstellungen über den Seiten-Editor öffnen

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 Designvorschau in HubSpot. Ihr neues Feld sollte in der linken Seitenleiste angezeigt werden.

7. In Ihrem CSS auf das Feld verweisen

  • Öffnen Sie in Ihrem Code-Editor die theme-overrides.css-Datei. Suchen Sie dann den CSS-Selektor für .footer. Jetzt fügen wir diesem Selektor eine min-height hinzu.
  • Um einen Wert in einem Design aufzurufen, 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.


War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.