- Wissensdatenbank
- Content
- Design-Manager
- Module im Design-Manager erstellen und bearbeiten
Module im Design-Manager erstellen und bearbeiten
Zuletzt aktualisiert am: 4 Februar 2026
Mit einem der folgenden Abonnements verfügbar (außer in den angegebenen Fällen):
Erstellen Sie benutzerdefinierte Module im Design-Manager, um Ihrem Blog, Ihren Seiten oder E-Mails erweiterte Funktionen hinzuzufügen. Benutzerdefinierte Module bieten ein breites Spektrum an Funktionen, damit Inhalte umfassend im Seiten-, E-Mail- oder Blog-Editor angepasst werden können.
Bevor Sie loslegen
Bevor Sie mit dem Erstellen oder Bearbeiten benutzerdefinierter Module im Design-Manager beginnen, lesen Sie sich die Anforderungen und Überlegungen durch.
Berechtigungen erforderlich Um Module im Design-Manager zu erstellen und zu bearbeiten, ist eine Berechtigung für Design-Tools erforderlich.
Einschränkungen und Wissenswertes
-
Wenn Sie mit HTML, HubL und CSS nicht vertraut sind, wird empfohlen, mit einem Entwickler zusammenzuarbeiten , um Module im Design-Manager zu erstellen.
Ein Modul erstellen
Abonnement erforderlich Ein Marketing Hub Professional - oder Enterprise-Abonnement ist erforderlich, um ein Modul für E-Mails zu erstellen.
- Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
- Klicken Sie oben im Finder auf das Dropdown-Menü Datei und wählen Sie Neue Datei aus.

- Klicken Sie im Dialogfeld auf das Dropdown-Menü Was möchten Sie erstellen? und wählen Sie Modul aus.
- Klicken Sie auf „Weiter“.
- Aktivieren Sie im Feld Wo möchten Sie dieses Modul verwenden? das Kontrollkästchen neben jedem Content-Typ, in dem Ihr Modul verwendet wird (z. B. Blogbeiträge, E-Mails oder Landingpages).
- Wählen Sie im Feld Modul-Content-Bereich eine Option aus (z. B. Lokales Modul oder Globales Modul). Wenn Sie ein globales Modul erstellen, wird durch Bearbeiten des Inhalts dieses Moduls jeder Ort aktualisiert, an dem das Modul verwendet wird.
- Geben Sie einen Dateinamen für das Modul ein.
- Um den Dateispeicherort des Moduls zu ändern, klicken Sie im Abschnitt Dateispeicherort auf Ändern. Wählen Sie im Pop-up-Feld einen neuen Speicherort aus und klicken Sie dann auf Auswählen.
- Wenn Sie fertig sind, klicken Sie auf Erstellen.
- Fahren Sie mit der Bearbeitung des Moduls fort.
Bitte beachten: In E-Mails verwendete Module enthalten kein CSS oder JavaScript.
Ein Modul bearbeiten
Nachdem Sie ein Modul im Design-Manager erstellt haben, können Sie seine Funktionalität und sein Erscheinungsbild anpassen. Kennzeichnen Sie das Modul für bessere Übersichtlichkeit, fügen Sie Felder hinzu und konfigurieren Sie diese und passen Sie die Optionen des Feld-Editors an, z. B. den Standard-Content. Legen Sie Anzeigebedingungen und Repeater-Optionen fest und gruppieren Sie die zugehörigen Felder zur besseren Organisation. Sie können auch Feld-Snippets kopieren und einfügen, eine benutzerdefinierte Modulsyntax schreiben, nützliche Anweisungen hinzufügen und bearbeiten, mit welchen Vorlagentypen Ihr Modul verwendet werden kann.
Ein Label zu einem Modul hinzufügen
Fügen Sie im Design-Manager ein Label für ein Modul hinzu oder aktualisieren Sie es, damit Benutzer es im Content-Editor leichter finden können. Wenn das Label leer ist, wird standardmäßig der Name des Moduls angezeigt.
- Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
- Klicken Sie im Finder auf ein Modul , dessen Label Sie bearbeiten möchten.
- Geben Sie im Inspektor ein Label ein.
Felder zu einem Modul hinzufügen
Fügen Sie Felder zu einem Modul hinzu, um den Inhalt oder Stile des Moduls festzulegen und es im Content-Editor bearbeitbar zu machen. Erfahren Sie hier über verfügbare Feldtypen.
- Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
- Klicken Sie im Finder auf ein Modul, um es zu öffnen.
- Klicken Sie im Inspektor im Abschnitt Felder auf das Dropdown-Menü Feld hinzufügen. Wählen Sie dann ein Feld aus, das dem Modul hinzugefügt werden soll.

- Um den Namen der Liste zu bearbeiten, klicken Sie auf das edit Bleistift-Symbol und geben Sie einen neuen Namen ein. Um den HubL-Variablennamen zu bearbeiten, geben Sie im Feld HubL-Variablenname einen neuen Namen ein.

Standard-Content des Feldes anpassen
Fügen Sie im Abschnitt "Content-Optionen" Standardinhalte hinzu, die angezeigt werden, wenn das Modul in Vorlagen und Content-Editoren verwendet wird. Die Optionen für Standardinhalte variieren je nach Feldtyp.
- Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
- Klicken Sie im Finder auf ein Modul, um es zu öffnen.
- Bewegen Sie im Inspektor im Abschnitt Felder den Mauszeiger über ein Feld und klicken Sie auf Bearbeiten.
- Im Abschnitt Content-Optionen können Sie Standard-Content-Optionen hinzufügen oder bearbeiten. Die verfügbaren Standard-Content-Optionen hängen vom ausgewählten Feldtyp ab.
Wenn Sie beispielsweise einen Feldtyp Datum und Uhrzeit zu einem Modul hinzufügen, können Sie ein Standarddatum und eine Standarduhrzeit auswählen. Sie können auch ein Standardzeitintervall eingeben.

Feld-Editor-Optionen festlegen
Im Abschnitt Editor-Optionen können Sie ein Feld als Pflichtfeld festlegen und das Bearbeiten im Content-Editor verhindern. Sie können auch den Hilfetext anpassen.
- Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
- Klicken Sie im Finder auf ein Modul, um es zu öffnen.
- Bewegen Sie im Inspektor im Abschnitt Felder den Mauszeiger über ein Feld und klicken Sie auf Bearbeiten.
- Um das Feld als Pflichtfeld festzulegen, aktivieren Sie im Abschnitt Editor-Optionen den Schalter Dieses Feld als Pflichtfeld festlegen. Dadurch wird verhindert, dass Benutzer das Feld im Content-Editor leer lassen.
- Um zu verhindern, dass der Inhalt eines Feldes bearbeitet wird, aktivieren Sie den Schalter Bearbeiten in Content-Editoren verhindern. Der Inhalt des Feldes kann weiterhin im Design-Manager auf Vorlagenebene angepasst werden. Diese Option ist für globale Module nicht verfügbar.
- Um Kontext oder Anweisungen zur Verwendung des Feldes hinzuzufügen, geben Sie den Text in das Feld Tooltip-Hilfetext oder in das Feld Inline-Hilfetext ein.
- Tooltip-Hilfetext: Dieser Text wird in einem Tooltip angezeigt, wenn ein Benutzer im Content-Editor den Mauszeiger über das infoCircleIcon Info-Symbol bewegt.
- Inline-Hilfetext: Dieser Text wird unterhalb des Feldes angezeigt, wenn ein Benutzer das Modul im Content-Editor bearbeitet.

Anzeigebedingungen für Feld festlegen
Verwenden Sie im Abschnitt Anzeigebedingungen die Feldanzeigebedingungen , um festzulegen, dass ein Modulfeld nur angezeigt wird, wenn ein anderes Feld bestimmte Kriterien erfüllt.
- Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
- Klicken Sie im Finder auf ein Modul, um es zu öffnen.
- Bewegen Sie im Inspektor im Abschnitt Felder den Mauszeiger über ein Feld und klicken Sie auf Bearbeiten.
- Klicken Sie im Abschnitt Anzeigebedingungen auf das Dropdown-Menü HubL-Variable und wählen Sie eine Variable aus.
- Klicken Sie auf das zweite Dropdown-Menü und wählen Sie eine Option aus (z. B. Ist gleich oder Ist nicht leer). Je nach ausgewählter Option können weitere Bedingungsfelder erforderlich sein. Wenn Sie z. B. Ist gleich auswählen, ist ein zusätzliches Wertfeld erforderlich.
- Standardmäßig werden die Anzeigebedingungen automatisch aktiviert, sobald eine Bedingung konfiguriert ist. Um die Anzeigebedingungen zu deaktivieren, deaktivieren Sie den Schalter Anzeigebedingungen.

Repeater-Optionen festlegen
Sehen Sie im Abschnitt Repeater-Optionen die Sey-Repeater-Optionen für Felder und Gruppen. Wenn die Repeater-Optionen aktiviert sind, werden mehrere Objekte erstellt und mithilfe einer for-Schleife angezeigt.
- Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
- Klicken Sie im Finder auf ein Modul, um es zu öffnen.
- Bewegen Sie im Inspektor im Abschnitt Felder den Mauszeiger über ein Feld und klicken Sie auf Bearbeiten.
- Geben Sie im Abschnitt Repeater-Optionen in den Feldern Minimum und Maximum (optional) eine Zahl ein. Dadurch wird festgelegt, wie häufig (Minimal- und Maximalwert) das Feld im Modul angezeigt wird.
- Um festzulegen, wie oft ein Feld standardmäßig angezeigt werden soll, geben Sie im Feld Standardobjektanzahl eine Zahl ein.
- Standardmäßig werden die Repeater-Optionen nach der Konfiguration automatisch eingeschaltet. Um die Repeater-Optionen zu deaktivieren, schalten Sie den Schalter Repeater-Optionen aus.
Beispielsweise werden die Repeater-Optionen eines Bildfelds geändert, um mindestens drei und bis zu fünf Bildfelder anzuzeigen. Standardmäßig ist ein Wert von vier Bildfeldern konfiguriert. Im Content-Editor sieht ein Benutzer standardmäßig vier Bildfelder und kann ein weiteres Bildfeld hinzufügen oder ein vorhandenes Bildfeld entfernen.

Modulfelder gruppieren
Nachdem Sie Felder erstellt haben, gruppieren Sie diese, um sie nach Relevanz zu organisieren. Feldgruppen können verwendet werden, um benutzerdefinierte Feldlogik zu erstellen. Gruppieren Sie bis zu vier Felder. Erfahren Sie mehr über Modulfeldgruppen.
- Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
- Klicken Sie im Finder auf ein Modul, um es zu öffnen.
- Klicken Sie im Inspektor im Abschnitt Felder auf das Dropdown-Menü Aktionen und wählen Sie Gruppieren aus.
- Wählen Sie ein oder mehrere Felder aus, die gruppiert werden sollen, und klicken Sie dann auf Gruppe erstellen.

Hilfetext zu Ihrem Modul hinzufügen
Fügen Sie im Abschnitt „Editor-Optionen“ Hilfetext hinzu, um Benutzern beim Bearbeiten des Moduls Kontext zu bereitzustellen. Dieser Text wird über den Feldern in Ihrem Modul angezeigt.
- Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
- Klicken Sie im Finder auf ein Modul, um es zu öffnen.
- Geben Sie im Inspektor im Abschnitt Editor-Optionen den Text in das Feld Inline-Hilfetext ein.

Content-Typen und Verfügbarkeit für ein Modul verwalten
Fügen Sie die Content-Typen hinzu, die Benutzer für ein Modul verwenden können, oder entfernen Sie sie, z. B. Blogbeiträge oder Landingpages. Sie können auch die Verfügbarkeit eines Moduls in Vorlagen und Seiten aktivieren oder deaktivieren.
- Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
- Klicken Sie im Finder auf ein Modul, um es zu öffnen.
- Um Content-Typen für ein Modul zu bearbeiten, klicken Sie im Inspektor oben rechts auf Content-Typen unterhalb des Modulnamens.
-
- Aktivieren oder deaktivieren Sie im Dialogfeld das Kontrollkästchen neben jedem Content-Typ, bei dem Ihr Modul verwendet wird oder nicht (z. B. Blogbeiträge, E-Mails oder Landingpages).
- Wenn Sie fertig sind, klicken Sie auf Kategorie aktualisieren.
- Um die Verfügbarkeit eines Moduls in Vorlagen oder Seiten zu verwalten, aktivieren Sie oben rechts den Schalter In Vorlagen und Seiten zur Verfügung stellen. Um die Funktionalität des Moduls zu testen oder die Verfügbarkeit in Vorlagen und Seiten zu deaktivieren, deaktivieren Sie den Schalter In Vorlagen und Seiten zur Verfügung stellen.
Bitte beachten: Wenn Sie den Schalter In Vorlagen und Seiten zur Verfügung stellen deaktivieren, wird das Modul nicht aus vorhandenen Vorlagen oder Seiten entfernt.
Feld-Snippets kopieren und einfügen
Wenn Sie ein Feld in ein Modul einbinden, kopieren Sie das Feld Snippet und fügen Sie es in den Abschnitt module.html (HTML + HubL) innerhalb des Modul-Editors ein.
- Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
- Klicken Sie im Finder auf ein Modul, um es zu öffnen.
- Bewegen Sie im Inspektor den Mauszeiger über ein Modulfeld und klicken Sie im Abschnitt Felder auf das Dropdown-Menü Aktionen. Wählen Sie dann Snippet kopieren aus.
- Fügen Sie im Modul-Editor das Feld Snippet an der gewünschten Stelle im Abschnitt module.html (HTML + HubL) ein. Sie können die Tastenkombination Cmd+V oder Strg+V verwenden.
Modulsyntax schreiben
Während Sie Ihr Modul bearbeiten, schreiben Sie die Syntax im Modul-Editor für die Abschnitte module.html (HTML + HubL), module.css und module.js. Erfahren Sie mehr über den Modul-Editor und die Modulübersicht.
Ein Modul in der Vorschau anzeigen und veröffentlichen
Wenn Sie mit der Bearbeitung eines Moduls fertig sind, einschließlich des Hinzufügens von Feldern und des Schreibens der Modulsyntax, zeigen Sie eine Vorschau des Moduls an und veröffentlichen Sie es.
- Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
- Klicken Sie im Finder auf ein Modul, um es zu öffnen.
- Um ein Modul in der Vorschau anzuzeigen, klicken Sie oben rechts auf Vorschau. Sie werden zu einem neuen Browser-Tab weitergeleitet, um eine Vorschau des Moduls anzuzeigen. Diese Vorschau wird mit dem Modul-Editor synchronisiert und automatisch aktualisiert, wenn Änderungen vorgenommen werden.
- Um ein Modul zu veröffentlichen, klicken Sie auf Änderungen veröffentlichen.
Ein Modul zu einer Vorlage hinzufügen
Nachdem Sie ein Modul veröffentlicht haben, können Sie es Vorlagen überall verwenden, indem Sie es zu einem Drag-&-Drop-Vorlage oder einem benutzerdefinierten Vorlage im Design-Manager hinzufügen. Wenn Sie Module im Content-Editor hinzufügen möchten, erfahren Sie in diesem Artikel mehr über das Hinzufügen und Bearbeiten von Modulen im Content-Editor.
- Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
- Klicken Sie im Finder auf eine Vorlage, um sie zu öffnen.
- Um ein Modul zu einer Drag-and-Drop-Vorlage im Layout-Editor hinzuzufügen, klicken Sie oben im Inspektor auf den Tab + Hinzufügen.
- Geben Sie im Suchfeld den Namen des Moduls ein. Um Ihre Suche auf benutzerdefinierte Module einzugrenzen, klicken Sie auf das Dropdown-Menü Nach Kategorie oder Tags filtern und wählen Sie Benutzerdefinierte Module aus.
- Klicken Sie auf das dragHandleIcon Drag-and-Drop-Symbol und verschieben Sie das Modul an die gewünschte Position im Layout-Editor.
- So fügen Sie ein Modul zu einer benutzerdefinierten Vorlage hinzu:
- Klicken Sie mit der rechten Maustaste oder mithilfe von Strg+Klicken auf das Modul im Finder und wählen Sie Snippet kopieren aus. Alternativ können Sie auf das Modul klicken, um es zu öffnen, und dann im Abschnitt Vorlagennutzung des Inspektors auf Snippet kopieren klicken.
- Fügen Sie in der benutzerdefinierten Code-Vorlage das Modul Snippet im Code-Editor ein.
- Wenn Sie fertig sind, klicken Sie oben rechts auf Änderungen veröffentlichen.
Beispiel: Erstellen eines Countdown-Moduls
- Erstellen Sie ein Modul im Design-Manager und nennen Sie es Countdown-Timer.
- Klicken Sie im Inspektor im Abschnitt Feld auf das Dropdown-Menü Feld hinzufügen.
-
- Wählen Sie das Feld Datum und Uhrzeit aus. Geben Sie den Namen „Datum und Uhrzeit des Events“ ein. Dadurch wird das Feld für den HubL-Variablennamen in
event_date_and_timeaktualisiert.
- Wählen Sie das Feld Datum und Uhrzeit aus. Geben Sie den Namen „Datum und Uhrzeit des Events“ ein. Dadurch wird das Feld für den HubL-Variablennamen in
-
- Wählen Sie das Feld Farbe aus. Geben Sie den Namen „Timer-Schriftfarbe“ ein. Dadurch wird das Feld für den HubL-Variablennamen in
timer_font_coloraktualisiert.
- Wählen Sie das Feld Farbe aus. Geben Sie den Namen „Timer-Schriftfarbe“ ein. Dadurch wird das Feld für den HubL-Variablennamen in
Bitte beachten: Die HubL-Variablennamen müssen mit den Variablennamen übereinstimmen, die im folgenden Codeabschnitt „module.html (HTML + HubL)“ enthalten sind.
- Kopieren Sie im Modul-Editor den folgenden Code und fügen ihn in den entsprechenden Abschnitt ein:
<span id="target-date" style="display: none;"></span>
<!-- Display countdown timer -->
<div style="float: left; width: 100%; color: ;">
<div class="time_container" style="margin-left: 30%;">
<span id="days"></span><br>
Tage
</div>
<span id="hours"></span><div class="time_container">
<br>
Stunden
</div>
<div class="time_container"><br>
Minuten Sekunden
</div>
<div class="time_container">
<br>
</div>
<span id="seconds"></span> </div>
<span id="minutes"></span>
float: left;
Breite: 10%;
text-align: center;
}
.time_container span {
font-weight: bold;
Schriftgröße: 200%;
}
function updateCountdown() {
Das Zieldatum aus der ausgeblendeten span
abrufen const targetDate = new Date(document.getElementById('target-date').textContent);
Das aktuelle Datum
abrufenconst currentDate = neues Date();
Berechnen Sie die verbleibende Zeit (in Millisekunden)
const timeRemaining = targetDate - currentDate;
Überprüfen Sie, ob das Zieldatum überschritten
istif (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Countdown abgelaufen';
Rückgabe;
}
Berechnen Sie die verbleibenden Tage, Stunden, Minuten und Sekunden
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
Zeigen Sie den Countdown
andocument.getElementById('days').innerText = '${days}';
document.getElementById('hours').innerText = '${hours}';
document.getElementById('minutes').innerText = '${minutes}';
document.getElementById('seconds').innerText = '${seconds}';
}
Countdown jede Sekunde
aktualisierensetInterval(updateCountdown, 1000);
Erster Anruf, um den Countdown sofort
zu aktualisierenupdateCountdown();

- Wenn Sie fertig sind, zeigen Sie eine Vorschau des Moduls an und veröffentlichen Sie es.
- Fahren Sie mit dem Hinzufügen des Moduls zu einer Vorlage fort.