Erste Schritte mit Designs

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.

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.

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.

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.

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“.

• 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 CMS theme 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 CMS theme boilerplate und klicken Sie auf „Als aktives Design festlegen“. Wählen Sie im nächsten Bildschirm eine Vorlage aus.

Sie werden dann zum Seiten-Editor weitergeleitet, in dem Sie die Felder des Designs bearbeiten können.

• 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. 

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.

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. 

•  Speichern Sie fields.json und aktualisieren Sie die Designvorschau in HubSpot. Ihr neues Feld sollte in der linken Seitenleiste angezeigt werden.

• Ö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:

• Speichern Sie theme-overrides.css, um sie in Ihren HubSpot-Account hochzuladen.

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.

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.