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

# Erste Schritte mit Designs

> Erste Schritte mit Designs in CMS Hub. 

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.

<Frame>
  <img src="https://www.hubspot.com/hubfs/cms-themes-animation.gif" alt="UI-Animation zum Bearbeiten von Designeinstellungen, die die Auswahl einer Farbe für Elemente eines Designs zeigt." />
</Frame>

Dieses Dokument führt Sie durch die Erstellung Ihres ersten Designs auf Grundlage der [HubSpot CMS Boilerplate](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate). Weitere Informationen zu Designs finden Sie in der[ Referenzdokumentation für Designs](/cms/start-building/building-blocks/overview).

<Tip>
  Wenn Sie zum ersten Mal mit CMS Hub entwickeln, sollten Sie sich diese Ressource ansehen:

  [Schneller Einstieg in die CMS Hub-Entwicklung](https://developers.hubspot.de/docs/guides/cms/quickstart)
</Tip>

<Warning>
  ### Bitte beachten:

  Bevor Sie beginnen, müssen Sie das [HubSpot CLI](/developer-tooling/local-development/hubspot-cli/install-the-cli) installieren.
</Warning>

<Steps>
  <Step title="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](https://github.com/HubSpot/cms-theme-boilerplate) gefüllt wird.
  </Step>

  <Step title="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*.
  </Step>

  <Step title="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**.

    <Frame>
      <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023/create-page-from-dashboard.gif" alt="create-page-from-dashboard" />
    </Frame>

    * Im Bildschirm für die Vorlagenauswahl werden Vorlagen von Ihrem [aktiven Design](https://knowledge.hubspot.com/website-pages/use-themes#use-an-active-theme) 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.

    <Frame>
      <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023/theme-selector.gif" alt="theme-selector" />
    </Frame>

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

  <Step title="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.

    <Frame>
      <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023/edit-theme-settings.gif" alt="edit-theme-settings" />
    </Frame>
  </Step>

  <Step title="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](/developer-tooling/local-development/hubspot-cli/install-the-cli) überwacht Ihr lokales Verzeichnis und lädt die folgenden Änderungen automatisch in Ihren HubSpot-Account hoch, wenn die Datei gespeichert wird.
  </Step>

  <Step title="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](/cms/start-building/building-blocks/overview#fields-json) 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.

    ```json theme={null}
    // 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.
  </Step>

  <Step title="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:

      ```css theme={null}
      .footer {
        background-color: {{ footer_bg_color }};
        min-height: {{theme.footer.height}}px;
      }
      ```

      * Speichern Sie `theme-overrides.css`, um sie in Ihren HubSpot-Account hochzuladen.
  </Step>

  <Step title="Ä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.
  </Step>
</Steps>

## 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](/cms/start-building/building-blocks/overview). Während der Erstellung Ihres Designs kann es hilfreich sein, sich die Best Practices für das [Optimieren von Websites in CMS Hub](/cms/best-practices/testing-staging-performance/speed) anzusehen.

HubSpot hat mehrere [Standarddesigns](/cms/start-building/building-blocks/themes/default-themes), 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](/cms/start-building/building-blocks/modules/overview).