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

# Standarddesigns

> HubSpot bietet eine Vielzahl von Designs, die Sie als Referenz für Ihr eigenes Website-Design verwenden, ändern oder verwenden können. Sie können diese Designs auch über unsere CLI-Tools in Ihre lokale Umgebung herunterladen.

export const SupportedProducts = ({marketing, sales, service, cms, marketingLevel, salesLevel, serviceLevel, cmsLevel}) => {
  const translations = {
    header: "Unterstützte Produkte",
    description: "Erfordert eines der folgenden Produkte oder höher.",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub"
    },
    tiers: {
      free: "Kostenlos",
      starter: "Starter",
      professional: "Professional",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="Unterstützte Produkte" defaultOpen="true" icon="cubes">
  <SupportedProducts cms={true} cmsLevel="starter" />
</Accordion>

HubSpot bietet eine Reihe von Standarddesigns, mit denen Content-Autoren Webseiten erstellen können, ohne das Basisdesign ändern zu müssen. Diese Designs eignen sich am besten für Content-Autoren mit eingeschränktem Zugriff auf Entwicklerressourcen.

Wenn Sie Ihr eigenes Design entwickeln möchten, empfiehlt es sich, mit der [CMS Hub Boilerplate](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate) zu beginnen. Sie können jedoch Standarddesigns über das [HubSpot-CLI](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli) herunterladen und ändern.

Nachfolgend erfahren Sie mehr über die derzeit verfügbaren Standarddesigns.

<Warning>
  ### Bitte beachten:

  ***CMS Hub*** *Starter*-Accounts haben nur Zugriff auf das Growth-Design.
</Warning>

## Ändern der Standarddesigns

Die Standarddesigns von HubSpot befinden sich in einem Ordner mit der Bezeichnung @hubspot im Entwickler-Dateisystem. Dieser Ordner ist schreibgeschützt und der Inhalt kann nur von HubSpot geändert werden. Wenn Sie ein Design ändern möchten, müssen Sie das gewünschte Design [abrufen](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#fetch) und es dann mit Ihren Änderungen in einen anderen Ordner als @hubspot [hochladen](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#upload).

## Standarddesign-Listing

Sie können mit den aufgeführten CLI-Befehlen unsere Standarddesigns herunterladen. [Erfahren Sie mehr über den fetch-Befehl](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli#fetch) im [CMS-CLI](https://developers.hubspot.de/docs/guides/cms/tools/local-development-cli).

### Growth-Design

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://www.hubspot.com/hubfs/5Cdocs/default-themes/growth-homepage.jpg" alt="Startseite des Growth-Designs" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Growth theme live demo](https://design-assets.hubspot.com/growth/home)
    </div>

    <div>
      #### Industry:

      Any

      #### Features:

      * 18 Modules
      * 12 Sections
      * 16 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/growth <destination-folder>
    ```
  </DndModule>
</DndSection>

## Standarddesigns im Wartungsmodus

Die folgenden Designs befinden sich momentan im Wartungsmodus. Sie werden nicht mehr mit neuen Funktionen aktualisiert und erhalten nur Updates in Bezug auf Sicherheit, Barrierefreiheit und Fehlerbehebungen.

### Barricade-Design

Ein Design, das sich an Bauunternehmen richtet.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-barricade-theme-thumb-4.jpg" alt="Screenshot des Barricade-Designs" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Barricade theme live demo](https://design-assets.hubspot.com/barricade/home)
    </div>

    <div>
      #### Industry:

      Construction

      #### Features:

      * 10 Modules
      * 19 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/barricade <destination-folder>
    ```
  </DndModule>
</DndSection>

### Education-Design

Ein Design, das für Schulen, Hochschulen oder andere Bildungseinrichtungen entwickelt wurde.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-education-theme-thumb-4.jpg" alt="Screenshot des Education-Designs" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Education theme live demo](https://design-assets.hubspot.com/education/home)
    </div>

    <div>
      #### Industry:

      Education

      #### Features:

      * 13 Modules
      * 18 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/education <destination-folder>
    ```
  </DndModule>
</DndSection>

### Martech-Design

Ein Website-Design, das sich an Marketing-Technologie-Unternehmen richtet.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-martech-theme-thumb-4.jpg" alt="Screenshot des Martech-Designs" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Martech theme live demo](https://design-assets.hubspot.com/martech/home)
    </div>

    <div>
      #### Industry:

      Business Services, Marketing Agency

      #### Features:

      * 9 Modules
      * 19 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/martech <destination-folder>
    ```
  </DndModule>
</DndSection>

### Rally-Design

Ein Design für Unternehmen und Agenturen.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-rally-theme-thumbnail-1-4.png" alt="Screenshot des Rally-Designs" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Rally theme live demo](https://design-assets.hubspot.com/rally/home)
    </div>

    <div>
      #### Industry:

      Business Services, Marketing Agency

      #### Features:

      * 14 Modules
      * 19 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/cms-rally <destination-folder>
    ```
  </DndModule>
</DndSection>

### Session-Design

Ein Design, das für Unternehmen entwickelt wurde.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-session-theme-thumb-4.jpg" alt="Screenshot des Session-Design" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Session theme live demo](https://design-assets.hubspot.com/session/home)
    </div>

    <div>
      #### Industry:

      Business Services, Consumer Services

      #### Features:

      * 9 Modules
      * 18 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/session <destination-folder>
    ```
  </DndModule>
</DndSection>

### Sprout-Design

Ein Design für Unternehmen und Agenturen.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-sprout-theme-thumb-4.jpg" alt="Screenshot des Sprout-Designs" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Sprout theme live demo](https://design-assets.hubspot.com/sprout/home)
    </div>

    <div>
      #### Industry:

      Business Services, Consumer Services

      #### Features:

      * 15 Modules
      * 21 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/sprout <destination-folder>
    ```
  </DndModule>
</DndSection>

### Vitality-Design

Ein Design für Unternehmen und Agenturen.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-vitality-theme-thumb-4.jpg" alt="Screenshot des Vitality-Designa" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Vitality theme live demo](https://design-assets.hubspot.com/vitality/home)
    </div>

    <div>
      #### Industry:

      Business Services, Healthcare, Consumer Services

      #### Features:

      * 8 Modules
      * 18 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/vitality <destination-folder>
    ```
  </DndModule>
</DndSection>