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

# Vorlagen-Marketplace | Modulanforderungen

> Erfahren Sie mehr über die Anforderungen, die Module eines Designs erfüllen müssen, wenn sie beim HubSpot-Marketplace für Vorlagen eingereicht werden.

'Erfahren Sie mehr über die Anforderungen, die Module eines Designs erfüllen müssen, wenn sie beim HubSpot-Marketplace für Vorlagen eingereicht werden.';

Hier erfahren Sie mehr über die Anforderungen, die beim Einreichen eines Moduls für den HubSpot-Marketplace für Vorlagen erfüllt sein müssen. Diese Anforderungen gelten sowohl für Module in einem Design als auch für unabhängige Module.

## Modulbeschränkungen

Module dürfen Folgendes nicht enthalten: [HubDB](https://developers.hubspot.com/docs), Aufrufe von [serverlosen Funktionen](https://developers.hubspot.com/docs) oder das [CRM-Objektfeld](/cms/reference/fields/module-theme-fields#crm-object).

Die folgenden Modultypen sollten nicht als eigenständige Module gebaut werden

* HTML
* Module in voller Breite
* Formulare und Formulare mit mehreren Schritten
* Abstandshalter-Module oder Module, die eine Gliederung Ihrer Seite ohne UI erstellen
* Module, die die Standardmodulfunktionalität duplizieren
* Handelsspezifische Module
* E-Mail-spezifische Module

## Modul-Content

Erfahren Sie mehr über die Anforderungen für Modul-Label und Hilfetext, Felder und Standard-Content.

### Modul-Label und Hilfetext

* Die Module müssen aussagekräftige Label haben, die den Zweck des Moduls vermitteln. Das Label *Hero-Banner mit Parallax Scrolling* ist beschreibend, die Label *Hero-Banner* und *Galerie* dagegen nicht.
* Modul-Label dürfen keine Zahlen enthalten, z. B. *Hero-Banner 01*.
* Modul-Label dürfen keine Unterstriche enthalten.
* Modul-Label dürfen keine Abkürzungen enthalten, z. B. *Sp* anstelle von *„Spalte“*.
* Module müssen [Inline-Hilfetext](/cms/reference/modules/configuration#meta-json) enthalten (sofern zutreffend), um die Verwendung des Moduls weiterzuleiten.
* Module dürfen nicht nach einem [Standardmodul](/cms/reference/modules/default-modules) benannt werden.
* Bei unabhängigen Modulen sollte das Modul-Label mit dem Namen im Vorlagen-Listing übereinstimmen. Wenn Ihr Vorlagen-Listing beispielsweise *SuperAwesome Banner with Scrolling* ist, sollte Ihr Modul-Label identisch sein.

<DndSection>
  ![listing-name](https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/listing-name.png)

  ![module-label](https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/module-label.png)
</DndSection>

### Standard-Content

* Das Standardfeld darf keinen *Lorem ipsum*-Text enthalten.
* Der Standardinhalt für ein Feld sollte Auskunft über dessen Zweck geben:
  * Beim Einfügen von Menüfeldern müssen Module als Standardinhaltsoption *Menü auswählen* verwenden.
  * Beim Einfügen von Formularfeldern müssen Module als Standardinhaltsoption *Formular auswählen* verwenden.
  * Beim Einfügen von Blog-Auswahlfeldern müssen Module als Standardinhaltsoption *Blog auswählen* verwenden.
* Wenn das Hinzufügen von Standard-Content zu einem Modul keinen Sinn ergibt, verwenden Sie stattdessen einen [Modul-Platzhalter](/cms/reference/hubl/tags/standard-tags#editor-placeholders), um dem Content-Autor zu helfen, den Bereich zu visualisieren, den er mit Inhalten füllt.

### Modulsymbole

Module müssen ein benutzerdefiniertes Symbol enthalten, das dem Modul zugewiesen ist (und das Standardsymbol ersetzt). Verwenden Sie keine Unternehmenslogos als Symbole, z. B. Apple- oder Amazon-Logos. Für Module, die Teil eines Designs sind, sollte jedes Modul ein eindeutiges und relevantes Symbol haben.

Erfahren Sie mehr über [Modulsymbole](/cms/reference/modules/configuration#adding-an-icon).

### Module, die Drittanbieterkonten erfordern

Wenn für einzelne Module ein Drittanbieterkonto erforderlich ist, muss dies in der Vorlagenbeschreibung angegeben werden. Wenn Ihr Modul beispielsweise die Google Maps-Plattform verwendet, müssen Sie einen Hinweis hinzufügen: *„Die Verwendung dieses Moduls erfordert ein Google Cloud-Konto (Google Maps Platform).“*

## Modulfelder

Überprüfen Sie unten die spezifischen Anforderungen für Module in einem Design und unabhängige Module

* Module in einem Design:
  * Müssen Inline-Hilfetext und spezifische Standardinhalte für bestimmte Felder enthalten.
  * Mindestens ein [Logofeld](/cms/reference/fields/module-theme-fields#logo) muss von den [Markeneinstellungen](/cms/start-building/building-blocks/fields/brand-and-settings-inheritance) des Accounts etwas übernehmen. Wenn Sie ein Bildfeld zum Rendern eines Logos verwenden, muss das Bildfeld nicht die Markeneinstellungen übernehmen.
* Module in einem Design und unabhängige Module:
  * Modulfeldnamen sollten den Zweck des Feldes beschreiben. Wenn beispielsweise ein Textfeld die Jobbezeichnung einer Person enthalten soll, wäre *Jobbezeichnung* eine passende Beschreibung, *Bezeichnung* jedoch nicht.
  * Alle Standardmodule von HubSpot müssen formatiert sein und in allen eingereichten Vorlagen korrekt angezeigt werden.

### fields.json- und module.html-Konfiguration

Um eine kompatible Funktionalität zwischen Designs und unabhängigen Modulen zu gewährleisten, müssen Module die Farb- und Schriftfelder [erben](/cms/reference/fields/overview#inherited-fields), entweder durch die Definition von `default_value_path` oder `property_value_paths` oder durch die Definition beider Felder in der entsprechenden `fields.json`-Datei sowie durch Hinzufügen einer Referenz auf die Designfelder in der `module.html`-Datei. [Erfahren Sie mehr über diese Anforderungen.](https://developers.hubspot.com/docs#module-compatibility-with-themes)

## Modulcodequalität

### Module müssen eigenständig sein.

#### Designmodule

Alle für Ihr Designmodul erforderlichen Dateien, wie CSS oder JavaScript, müssen im Designordner und im Designverzeichnis enthalten sein. Sie können die Funktion „Verlinkte Dateien“ im Design-Manager verwenden. Oder Sie schließen die Dateien mit den Funktionen [require\_js()](/cms/reference/hubl/functions#require-js) oder [require\_css()](/cms/reference/hubl/functions#require-css) mit einem relativen Pfad zur Datei ein.

Für gängige Bibliotheken wie slick.js können Sie sie mit den Funktionen `require_js()` oder `require_css()` mit einer absoluten URL zum CDN hinzufügen, in dem sie gehostet werden.

<Alert type="warning" titleText="Hinweis:">
  Verwenden Sie keine absoluten URLs für Assets, die in Ihrem Entwicklungsportal enthalten sind, da portalübergreifende Verweise nicht aufgelöst werden.
</Alert>

#### Unabhängige Module

Für unabhängige Module sollten alle CSS- und Javascript-Dateien entweder in `module.css` oder in `module.js` enthalten sein. Wahlweise können Sie die Dateien mit den Funktionen `require_js()` oder `require_css()` mit einer absoluten URL zum CDN hinzufügen, in dem sie gehostet werden. Die Funktion „Verlinkte Dateien“ im Design-Manager kann nicht verwendet werden, da diese nur für Designmodule verfügbar ist.

Da `module.js` im DOM vor allen `require_js`- oder `require_css`-Dateien enthalten ist, sollte Javascript im Abschnitt `module.js` mit der folgenden Anmerkung zurückgestellt werden:

```js theme={null}
document.addEventListener("DOMContentLoaded", function () {
  // Put Javascript here
});
```

Alle Skripte und Dateien sollten im [HTML](/cms/reference/hubl/functions#require-js)-Head des Moduls gerendert werden.

### Code-Einschränkungen für unabhängige Module

Die folgenden Einschränkungen gelten nur für unabhängige Module:

* Es wird empfohlen, nach Möglichkeit [vanilla JS](http://vanilla-js.com/) zu verwenden. Das Hinzufügen einer jQuery-Bibliothek zu einer Website, die nicht jQuery verwendet, kann möglicherweise zu Konflikten führen und die Website-Seite verlangsamen.
* Wenn Sie eine jQuery-Bibliothek verwenden, nehmen Sie die Bibliothek über die [require\_js()](/cms/reference/hubl/functions#require-js)-Funktion auf, sofern jQuery mit dem Kontrollkästchen (Boolesch) in den Account-Einstellungen deaktiviert ist, um Konflikte aus mehreren jQuery-Bibliotheken zu vermeiden.

```js theme={null}
{% if not site_settings.include_jquery %}
{{ require_js("https://code.jquery.com/jquery-3.7.0.min.js", "footer") }}
{% endif %}
```

### Kategorien

* Alle unabhängigen Module müssen mindestens eine Kategorie haben. Module, die als Teil eines Designs übermittelt werden, müssen keine Kategorien haben. Es wird jedoch empfohlen, mindestens eine aufzunehmen. Erfahren Sie mehr über [das Hinzufügen von Kategorien zu Modulen](/cms/reference/modules/configuration).

### Selektoren für Klassennamen

* Jedem Klassennamen-Selektor muss der Modulname vorangestellt werden, wobei Leerzeichen durch Bindestriche ersetzt werden. Im Folgenden finden Sie beispielsweise die Datei `module.html` für eine Schaltfläche namens `example-button`, wobei jeder Klassenname und der CSS-Selektor seinen Namen widerspiegeln.

```hubl theme={null}
<style>
{% scope_css %}
{# Button wrapper #}
 {% if module.styles.group_alignment.alignment %}
  .example-button-wrapper {
   text-align: {{ module.styles.group_alignment.alignment.horizontal_align }};
   }
 {% endif %}

{# Button #}

.example-button {
 {% if module.styles.group_background.color.color %}
  background-color: rgba({{ module.styles.group_background.color.color|convert_rgb }}, {{ module.styles.group_background.color.opacity / 100 }});
 {% endif %}
 }
 {% end_scope_css %}
</style>
{% end_require_css %}

{##### Module HTML #####}

<div class="example-button-wrapper">
 <a href="{{ href }}" class="example-button"
 {% if module.button_link.open_in_new_tab %}target="_blank"{% endif %}
 {% if rel %}rel="{{ rel|join(" ") }}"{% endif %}
 >
  {{ module.button_text }}
 </a>
</div>
```

### Stile und JavaScript

* Stile:
  * Module dürfen keine leere Stilgruppe enthalten.
  * Das Hartcodieren von Inline-Stilen innerhalb von Modulen wird nicht empfohlen. Verwenden Sie stattdessen dynamische Inlineformatvorlagen, indem Sie Felder zur Steuerung von Stilen aktivieren.
* JavaScript:
  * JavaScript muss immer mehrere Instanzen eines Moduls darstellen können. JavaScript im JS-Fenster wird nur einmal pro Seite geladen, unabhängig davon, wie häufig ein Modul vorkommt.
  * JavaScript sollte DOM-Elemente anhand von modulspezifischen Klassennamen referenzieren, um sicherzustellen, dass Elemente außerhalb des Moduls nicht unbeabsichtigt betroffen sind.

Beim Erstellen von Modulen können Sie die integrierte Variable `{{name}}` verwenden. Diese Variable ruft die Instanz-ID des Moduls ab (kann nur im Fenster „HTML+HubL“ verwendet werden), um beim CSS- und JS-Markup für komplexe Module zu helfen. [Erfahren Sie mehr darüber in der Entwicklerdokumentation.](/cms/reference/modules/files#require-css-block)

## Feldstruktur

Es müssen die folgenden Anforderungen an die Feldstruktur und -gruppierung erfüllt sein.

### Registerkarte „Content“

* Wenn es innerhalb einer Feldgruppe mindestens ein Steuerelement gibt, müssen alle Steuerelemente in nach ihrer Funktion gekennzeichneten Kategorien gruppiert werden.
* Modulfelder, die der Registerkarte *Content* hinzugefügt wurden, müssen es ermöglichen, den Content eines Moduls anzupassen. Zum Beispiel Steuerelemente für Bilder, Symbole, ALT-Text und Links.

### Registerkarte „Stile“

Die Modulstil-Feldgruppen müssen konsistent sein und einem Muster folgen. Nachfolgend finden Sie eine empfohlene Reihenfolge für Ihre Stilfeldgruppen. Diese Gruppen können sich auf der obersten Ebene befinden oder dürfen nur [mit einer direkt darunterliegenden Gruppe verschachtelt sein](#multi-level-grouping). Leere Gruppen können auch entfernt werden:

* [Voreinstellungen](#presets)
* Text
* Hintergrund
* Rahmen
* Hover
* Ecke
* Abstand
* Ausrichtung
* Benutzerdefinierte Stilgruppen, die nicht zu den oben genannten passen
* Erweitert

Die folgenden Feldtypen müssen auf der *Stile*-Registerkarte enthalten sein, falls vorhanden:

* [Ausrichtung](/cms/reference/fields/module-theme-fields#alignment)
* [Hintergrundbild](/cms/reference/fields/module-theme-fields#background-image)
* [Rahmen](/cms/reference/fields/module-theme-fields#border)
* [Farbe](/cms/reference/fields/module-theme-fields#color)
* [Schriftart](/cms/reference/fields/module-theme-fields#font)
* [Farbverlauf](/cms/reference/fields/module-theme-fields#gradient)
* [Abstand](/cms/reference/fields/module-theme-fields#spacing)
* [Textausrichtung](/cms/reference/fields/module-theme-fields#text-alignment)

<Alert type="info">
  Wenn Sie Felder von der Registerkarte *Content* zur Registerkarte *Stile* verschieben, erfahren Sie, wie Sie die [Aliaszuordnung verwenden](/cms/start-building/building-blocks/fields/alias-mapping), um die Formatierung für Module beibehalten, die bereits auf Live-Seiten verwendet werden.
</Alert>

* Die Animationsoptionen sollten immer am unteren Rand der Feldgruppenliste positioniert werden.

* Optionen, die es Content-Autoren ermöglichen, Code-Snippets oder CSS hinzuzufügen, sollten am Ende der Feldgruppenliste unter einem Feld *Erweitert* gruppiert werden.

* Die Steuerelemente sollten über alle Module hinweg standardisiert werden. Zum Beispiel sollten alle Elemente, die ein Steuerelement für den Rahmenradius haben können, dieses Steuerelement anbieten. Es ist nicht ratsam, Steuerelemente für einige Module anzubieten und für andere nicht.

* Modulfelder, die der Registerkarte *Stil* hinzugefügt werden, müssen Möglichkeiten zum Bearbeiten des Modulstiels bieten. Zum Beispiel:
  * Stiloptionen wie Farbe, Textstil, Ausrichtung, Abstand, Rahmen und Eckenradius.
  * Animationen wie Hover- und Slide-In-Effekte.
  * Voreinstellungen wie dunkle und helle Designs, bei denen viele Stile gleichzeitig geändert werden.

### Beispiele für Feldorganisation

#### Voreinstellungen

Voreinstellungen können verwendet werden, um die Optionen für Content-Autoren zu begrenzen, da einige Optionen an die Designeinstellungen gebunden sind. Zum Beispiel enthält das im Growth-Design enthaltene Modul *Symbol* Voreinstellungen für *Dunkel* und *Hell*, um der Website ein konsistentes Erscheinungsbild zu geben, sofern es auf die gesamte Website angewendet wird.

#### Multi-Level-Gruppierung

Wenn Sie noch nicht wissen, ob Sie Stilfelder auf der obersten Ebene halten oder verschachteln möchten, sollten Sie sich das folgende Beispiel ansehen.

<DndSection>
  <DndModule numCols={6}>
    <div>
      Das im Growth-Design enthaltene Modul *Symbol* führt alle Stile auf der obersten Ebene auf, da es sich um eine Komponente handelt. Daher wirken sich alle Stiloptionen auf diese eine Komponente aus.
    </div>
  </DndModule>

  <DndModule numCols={6}>
    ![growth-theme-icon-module](https://www.hubspot.de/hubfs/Knowledge_Base_2021/Developer/growth-theme-icon-module.png)
  </DndModule>
</DndSection>

<DndSection>
  <DndModule numCols={6}>
    <div>
      Das im Growth-Design enthaltene Modul *Sprecherkarte* enthält mehrere Komponenten: das Bild der Karte und den Textinhalt. Modulstile werden daher nach Komponente gruppiert, damit der Styling-Prozess jeder Komponente für den Content-Autor verständlicher ist.
    </div>
  </DndModule>

  <DndModule numCols={6}>
    ![growth-theme-speaker-card](https://www.hubspot.de/hubfs/Knowledge_Base_2021/Developer/growth-theme-speaker-card.png)
  </DndModule>
</DndSection>

#### Gruppieren von einzelnen Feldern

Das Schaltflächenmodul unten enthält Gruppierungen für *Voreinstellungen*, *Text*, *Hintergrund* und mehr. Obwohl die Feldgruppe *Ecke* nur das Steuerelement „Eckenradius“ enthält, ist sie dennoch gruppiert, um eine einheitliche Erfahrung bei der Content-Erstellung zu schaffen.

![module-requirements-2\_1](https://www.hubspot.de/hubfs/Knowledge_Base_2021/Developer/module-requirements-2_1.png)![button-styles](https://www.hubspot.de/hubfs/Knowledge_Base_2023/button-styles.png)