> ## 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. # Konfigurieren eines Moduls > Erfahren Sie, wie Sie ein benutzerdefiniertes Modul konfigurieren.
Beim Erstellen eines Moduls stehen eine Reihe von Optionen zur Verfügung, die sich darauf auswirken, wo ein Modul sichtbar ist, wie es identifiziert wird und wie es bearbeitet wird. Bei der [lokalen Entwicklung](/developer-tooling/local-development/hubspot-cli/install-the-cli) werden Module als Ordner mit dem `.module`-Suffix gespeichert. Diese Ordner enthalten die Dateien, aus denen die Einstellungen des Moduls bestehen, sowie der Code, der zum Rendern des Moduls verwendet wird. Die Konfiguration eines Moduls wird in der [meta.json](#meta-json)-Datei gespeichert, während die Felder separat in einer [fields.json](https://developers.hubspot.de/docs/guides/cms/content/modules/overview#fields-json)-Datei konfiguriert werden. Die meisten Konfigurationen können auch über den Modul-Editor im [Design-Manager](/cms/start-building/introduction/developer-environment/design-manager) geändert werden.
Lokal angezeigte Modulordnerstruktur Konfigurieren Sie auf einer übergeordneten Ebene die Moduloptionen lokal in der `meta.json`-Datei, die die folgenden Eigenschaften enthalten kann: | Parameter | Type | Description | Default | | ------------------------------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | | `icon` | Zeichenfolge | URL zu einem Bild, das als Symbol für ein Modul verwendet werden soll. | | | `label` | Zeichenfolge | Label, das verwendet wird, wenn Module in den Content Editoren angezeigt werden | | | `module_id` | Zahl | Eindeutige ID für das Modul, die unabhängig vom Pfad ist. | | | `is_available_for_new_content` | Boolesch | Der Wert für den Umschalter in der oberen rechten Ecke des Modul-Editors in HubSpot. Bestimmt, ob das Modul im Inhalt verwendet werden kann. | `true` | | `global` | Boolesch | Gibt an, ob das Modul global ist oder nicht | `false` | | `host_template_types` | Array | Ein `array` von [Inhaltstypen](https://developers.hubspot.de/docs/guides/cms/content/templates/overview), in denen das Modul verwendet werden kann. Eine oder mehrere von `[ "PAGE", "BLOG_POST", "BLOG_LISTING", "EMAIL" ]`. | | | `css_assets` | Array | Ein `array` von CSS-Dateien, von denen das Modul abhängt. Unterstützt relative Pfade.z. B. `"css_assets": [{ "path": "../path/to/file.css" }]` | `[]` | | `css_render_options` | Objekt | Legt mit `async` fest, ob das Modul CSS asynchron gerendert wird: `true`, `false` | `{"async": false}` | | `js_assets` | Array | Ein `array` von JavaScript-Dateien, von denen das Modul abhängt. Unterstützt relative Pfade.z. B. `"js_assets": [{ "path": "../path/to/file.js" }]` | `[]` | | `js_render_options` | Objekt | Ändert das JavaScript-Tag des Moduls, das der gerenderten Seite hinzugefügt wurde. Die Optionen umfassen: | `{"position":"footer"}` | | `inline_help_text` | Zeichenfolge | Hilfetext, der am oberen Rand des Moduls in einem blauen Infokasten angezeigt wird (maximal 300 Zeichen).Stellt die für die Verwendung des Moduls erforderlichen Informationen bereit. Wenn Sie feldspezifische Hilfetextinformationen übermitteln möchten, lesen Sie die [Hilfetextfelddokumentation](/cms/reference/fields/module-theme-fields#properties-used-by-all-fields). | `null` | | `master_language` | Zeichenfolge | Bei [aktivierten Übersetzung](https://knowledge.hubspot.com/design-manager/create-translations-of-your-modules#:~:text=To%20create%20translations%20of%20a,the%20right%2C%20click%20Add%20translations.) der Sprachcode der Sprache, in der die Felder des Moduls ursprünglich geschrieben wurden.z. B. `en` | | | `placeholder` | Objekt | Legt [Platzhalterinhalt](/cms/reference/hubl/tags/standard-tags#editor-placeholders) für das Modul fest. Umfasst die folgenden Eigenschaften: | | | `categories` | Array | Ein Array mit bis zu drei [Modulkategorien](#add-categories).Zum Beispiel: `"categories":["FORMS_AND_BUTTONS"]` | | | `content_tags` | Array | Ein Array von [Modul-Tag-Objekten](#adding-categories-and-tags), das den Tag-Namen und die `source` von `"USER"` enthält.Zum Beispiel: `"content_tags": [{` `"name" : "BUTTONS",` `"source" : "USER"``}]` | | Im Folgenden erfahren Sie mehr über die Konfigurationsoptionen der einzelnen Module. ## Hinzufügen eines Symbols Module können ein Symbol enthalten, das im [Design-Manager](/cms/start-building/introduction/developer-environment/design-manager) und in den Seiten- und E-Mail-Editoren angezeigt wird, um den Erstellern von Inhalten visuellen Kontext zu bieten. Es wird empfohlen, verschiedene Symbole für die verschiedenen Modultypen in Ihrem Design zu verwenden. Symbole [für Marketplace-Anbieter verpflichtend](/cms/marketplace/template-guidelines). Es gibt zwei Möglichkeiten, ein Symbol hinzuzufügen: über den [Design-Manager](#add-an-icon-using-the-design-manager) oder das [CMS CLI](#add-an-icon-using-the-cli). Modulsymbole müssen als `.svg`-Datei vorliegen und dürfen nicht größer als 10 KB sein. Um ein optimales Ergebnis zu erzielen, sollte Ihr Symbol einfach sein und nur eine Farbe verwenden. Symbole, die mehr als eine Farbe verwenden, werden automatisch für Sie konvertiert. Das standardmäßig angezeigte Modulsymbol ist ein Schraubenschlüssel- und Pinselsymbol. So fügen Sie ein Symbol mit dem Design-Manager hinzu:
1. In your HubSpot account, navigate to **Marketing** > **Files and Templates** > **Design Tools**. 2. Use the left sidebar to locate the **module** you want to edit, then click the **module name**. 3. In the right sidebar of the module editor, click the **icon** next to the module title. 4. Upload/select your icon. After publishing your changes, the icon will appear within the page editors and design manager.
edit-module-icon-crop Um bei der lokalen Entwicklung ein Symbol hinzuzufügen, öffnen Sie die `meta.json`-Datei des Moduls und fügen Sie den Wert des `icon`-Parameters hinzu oder bearbeiten Sie ihn so, dass er ein SVG vom Datei-Manager ist. ```json theme={null} // meta.json { "global": false, "host_template_types": ["PAGE"], "icon": "http://example.com/hubfs/code.svg", "label": "Code block", "smart_type": "NOT_SMART", "is_available_for_new_content": true, "inline_help_text": "This module is for code snippets." } ``` ## Ändern des Labels
Das Label, das bei der Anzeige von Modulen im Editor verwendet wird, kann unabhängig vom Namen des Moduls angepasst werden. Dies ist nützlich, wenn Sie lokal entwickeln, da Sie einen Namen verwenden können, der für Sie sinnvoll ist, während Sie einen anderen Namen haben, den die Autoren der Inhalte sehen. Der `label`-Parameter wird lokal geändert, um das Label festzulegen. Im Design-Manager gibt es ein Feld im Modul-Editor unterhalb des Modulnamens.
edit-module-label ## Ein Modul global machen Bei normalen Modulen ist der Inhalt jeder Instanz eines Moduls in einer Seite, E-Mail oder Vorlage unabhängig. In einigen Anwendungsfällen ist es sinnvoll, dass alle Instanzen eines Moduls den gleichen Inhalt haben. Bei der lokalen Entwicklung können Sie ein Modul global machen, indem Sie `global` auf `true` festlegen. Sie können mit dem Design-Manager auch [Module in einer Drag-&-Drop-Vorlage in eine globale Vorlage konvertieren](https://knowledge.hubspot.com/design-manager/use-global-content-across-multiple-templates#create-new-global-content-in-the-design-manager:~:text=To%20convert%20an%20existing%20local%20module%20or%20group). ## Steuern, wo ein Modul zur Verwendung verfügbar ist Bei der lokalen Entwicklung können Sie über die `hostTemplateTypes`-Eigenschaft steuern, in welchen Inhaltstypen ein Modul verwendet werden kann. Erfahren Sie mehr über die [verfügbaren Vorlagentypen](https://developers.hubspot.de/docs/guides/cms/content/templates/overview#template-types). Module können außerdem ausgeblendet werden, sodass sie nicht direkt zu Seiten hinzugefügt werden können, indem `is_available_for_new_content` auf `false` festgelegt wird. Dies kann beispielsweise für Module hilfreich sein, die für Navigationsmenüs und die Suche erstellt wurden. Sie können dies im Design-Manager aktualisieren, indem Sie auf die Option **Vorlagentyp** in der rechten Seitenleiste klicken. edit-module-template-type ## Hinzufügen von CSS- und JavaScript-Abhängigkeiten Zusätzlich zur Verwendung von `module.css` und `module.js` zum Hinzufügen von CSS und JavaScript, das zu allen Seiten hinzugefügt wird, die eine Modulinstanz enthalten, können Abhängigkeiten, die zwischen Modulen geteilt werden, mithilfe von `css_assets` und `js_assets` hinzugefügt werden. Die Pfade können absolut oder relativ zur `meta.json`-Datei sein. ```json theme={null} // meta.json { "css_assets": [{ "path": "../path/to/file.css" }], "js_assets": [{ "path": "../path/to/file.js" }] } ``` **Warnung:** Wenn relative Pfade verwendet werden, um auf Abhängigkeiten zu verweisen, überschreibt die Ausführung von `hs fetch --overwrite` zur Aktualisierung des Moduls für die lokale Entwicklung die relativen Pfade mit absoluten Pfaden. Mit dem Design-Manager können Sie CSS- und JavaScript-Dateien mit einem Modul verknüpfen, indem Sie den Abschnitt *Verlinkte Dateien* in der rechten Seitenleiste des Modul-Editors verwenden. edit-module-linked-files ## Hinzufügen von Kategorien und Tags Sie können Modulen Kategorien und Tags zuweisen, um sie in HubSpot-Tools zu organisieren: * [Kategorien](#categories): Weisen Sie einem Modul Kategorien zu, um sie in Gruppen innerhalb der Content-Editor-Benutzeroberfläche zu organisieren. Dies ermöglicht es Content-Autoren, Module einfacher zu finden, während sie Inhalte in HubSpot erstellen. Beachten Sie Folgendes zu den Kategorien: * Ein Modul kann bis zu drei Kategorien haben, die vordefiniert sind und nicht angepasst werden können. * Derzeit werden Kategorien nicht in der Content-Editor-Benutzeroberfläche angezeigt. Sie können jedoch Kategorien zuweisen, wenn die Kategorisierung in Editoren verfügbar ist. * Nicht kategorisierte Module sind unter der Kategorie *Alle* verfügbar sein. * [Tags](#tags): Weisen Sie Tags zu, um Module innerhalb des Design-Managers zu organisieren. Auf diese Weise können Sie Module beim Erstellen von Vorlagen leichter finden. Im Design-Manager können Sie Kategorien und Tags über den Abschnitt *Filter-Tags* der rechten Seitenleiste im Modul-Editor zuweisen. Erfahren Sie unten mehr über die verfügbaren Kategorien und Tags. edit-module-filter-tags Lokal können Sie Kategorien und Tags wie folgt zu der `meta.json`-Datei eines Moduls hinzufügen: ```json theme={null} // meta.json { "label": "Custom module", "categories": ["image_and_video", "commerce"], "content_tags": [ { "name": "BUTTONS", "source": "USER" }, { "name": "CTA", "source": "USER" } ], "is_available_for_new_content": true } ``` ### Kategorien Das `categories`-Array eines Moduls kann bis zu drei der folgenden Kategorien enthalten (ohne Berücksichtigung von Groß- und Kleinschreibung): | Kategorie | Beschreibung | | ------------------- | --------------------------------------------------------------------------------------------- | | `blog` | Blogspezifische Module, z. B. eine aktuelle Beitragsliste. | | `body_content` | Module, die formatiert sind, um Inhalte grafisch darzustellen, z. B. eine Bildergalerie. | | `commerce` | Handelsspezifische Module wie Preiskarten. | | `design` | Module, die die Inhaltsstruktur und das Layout beeinflussen, wie Accordions. | | `functionality` | Module, die dynamische Reaktionen oder Verhaltensweisen auf der Seite enthalten, z. B. Menüs. | | `forms_and_buttons` | Module, die es Website-Besuchern ermöglichen, Daten einzugeben und zu übermitteln. | | `media` | Module, die Elemente wie Bilder, Symbole, Videos und Banner enthalten. | | `social` | Social-Media-spezifische Module wie Social-Media-Sharing. | | `text` | Module, die nur Text enthalten. | ### Tags Das `content_tags`-Array eines Moduls kann eines der folgenden Modul-Tag-Objekte enthalten (Groß-/Kleinschreibung beachten): **Inhaltstypen:** * `ACCORDION` * `ANIMATION` * `BLOG_POST` * `BUTTONS` * `CODE` * `CTA` * `FEED` * `FORM` * `ICON` * `IMAGE` * `LISTS` * `LOGO` * `MENU` * `RICH_TEXT` * `SLIDER` * `TEXT` * `VIDEO` **Funktionen:** * `BANNER` * `BLOG` * `BRANDING` * `CALCULATOR` * `CONVERSION` * `EMAIL` * `GALLERY` * `HEADERS` * `INTERACTION` * `LAYOUT` * `MAP` * `MULTIMEDIA` * `NAVIGATION` * `PROGRESS_BAR` * `SEARCH` * `SETTINGS` * `SOCIAL` * `TRANSLATION`