Module im Design-Manager erstellen und bearbeiten

Mit dem Design-Manager können Sie benutzerdefinierte Module erstellen, um erweiterte Funktionen zu Ihrem Blog, Ihren Seiten oder Ihren E-Mails hinzuzufügen. Benutzerdefinierte Module bieten ein breites Spektrum an Funktionen, damit Inhalte umfassend im Seiten-, E-Mail- oder Blog-Editor angepasst werden können.

Bitte beachten: Das Erstellen von Modulen erfordert Kenntnisse in HTML, CSS, HubL und in der Verwendung des HubSpot-Design-Managers. HubSpot empfiehlt, mit einem Entwickler zusammenzuarbeiten, um Code-Module zu erstellen.

Ein neues Modul erstellen

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie oben im Finder auf das Dropdown-Menü Datei und wählen Sie Neue Datei aus.

3. Klicken Sie im Dialogfeld auf das Dropdown-Menü Was möchten Sie erstellen? und wählen Sie Modul aus.
4. Klicken Sie auf Weiter.
5. 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). 
6. 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 der Inhalt dieses Moduls jeden Ort aktualisieren, an dem das Modul verwendet wird. 
7. Geben Sie einen Dateinamen für das Modul ein.
8. 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.
9. Wenn Sie fertig sind, klicken Sie auf Erstellen.
10. Fahren Sie mit der Bearbeitung des Moduls fort.

Bitte beachten: In E-Mails verwendete Module können nur in Accounts mit einem Marketing Hub Professional- oder Enterprise-Abonnement erstellt werden. Sie dürfen kein CSS oder JavaScript enthalten. 

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

Im Design-Manager können Sie ein Label für ein Modul hinzufügen oder aktualisieren, damit Benutzer es im Content-Editor leichter identifizieren können. Wenn das Label leer ist, wird standardmäßig der Name des Moduls angezeigt.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf ein Modul, dessen Label Sie bearbeiten möchten.
3. 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. 

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf ein Modul, um es zu öffnen.
3. 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.

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

Im Abschnitt Content-Optionen können Sie Standardinhalte hinzufügen, die angezeigt werden, wenn das Modul in Vorlagen und Content-Editoren verwendet wird. Die Optionen für Standardinhalte variieren je nach Feldtyp.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf ein Modul, um es zu öffnen.
3. Bewegen Sie im Inspektor im Abschnitt Felder den Mauszeiger über ein Feld und klicken Sie auf Bearbeiten.
4. 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. 

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf ein Modul, um es zu öffnen.
3. Bewegen Sie im Inspektor im Abschnitt Felder den Mauszeiger über ein Feld und klicken Sie auf Bearbeiten.
4. 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.
5. 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.
6. 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

Im Abschnitt Anzeigebedingungen können Sie mithilfe von Anzeigebedingungen für ein Feld ein Modulfeld festlegen, dass nur angezeigt wird, wenn ein anderes Feld bestimmte Kriterien erfüllt.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf ein Modul, um es zu öffnen.
3. Bewegen Sie im Inspektor im Abschnitt Felder den Mauszeiger über ein Feld und klicken Sie auf Bearbeiten.
4. Klicken Sie im Abschnitt Anzeigebedingungen auf das Dropdown-Menü HubL-Variable und wählen Sie eine Variable aus. 
5. 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.
6. 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

Im Abschnitt Repeater-Optionen können Sie Repeater-Optionen für Felder und Gruppen konfigurieren. Wenn die Repeater-Optionen aktiviert sind, werden mehrere Objekte erstellt und mithilfe einer for-Schleife angezeigt.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf ein Modul, um es zu öffnen.
3. Bewegen Sie im Inspektor im Abschnitt Felder den Mauszeiger über ein Feld und klicken Sie auf Bearbeiten.
4. 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. 
5. Um festzulegen, wie oft ein Feld standardmäßig angezeigt werden soll, geben Sie im Feld Standardobjektanzahl eine Zahl ein.
6. 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, können Sie diese zusammen gruppieren, um Ihre Felder nach Relevanz zu organisieren. Feldgruppen können verwendet werden, um benutzerdefinierte Feldlogik zu erstellen. Sie können bis zu vier Felder gruppieren. Erfahren Sie mehr über Modulfeldgruppen.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf ein Modul, um es zu öffnen.
3. Klicken Sie im Inspektor im Abschnitt Felder auf das Dropdown-Menü Aktionen und wählen Sie Gruppieren aus.
4. 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. 

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf ein Modul, um es zu öffnen.
3. 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.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf ein Modul, um es zu öffnen.
3. Um Content-Typen für ein Modul zu bearbeiten, klicken Sie im Inspektor oben rechts auf Content-Typen unterhalb des Modulnamens.

1. • 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.

4. 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, können Sie das Feld-Snippet kopieren und im Modul-Editor in den Abschnitt module.html (HTML + HubL) einfügen.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf ein Modul, um es zu öffnen.
3. 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. 
4. 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, können Sie die Modulsyntax in den Abschnitten module.html (HTML + HubL), module.css und module.js des Modul-Editors schreiben. Erfahren Sie mehr über den Modul-Editor und die Modulübersicht.

Ein Modul in der Vorschau anzeigen und veröffentlichen

Sobald Sie die Bearbeitung eines Moduls abgeschlossen haben, einschließlich des Hinzufügens von Feldern und des Schreibens der Modulsyntax, können Sie das Modul in der Vorschau anzeigen und veröffentlichen. 

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf ein Modul, um es zu öffnen.
3. 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.
4. 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 in Vorlagen verwenden, indem Sie es zu einer Drag-and-Drop-Vorlage oder einer benutzerdefinierten Code-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.

1. Gehen Sie in Ihrem HubSpot-Account zu Content > Design-Manager.
2. Klicken Sie im Finder auf eine Vorlage, um sie zu öffnen.
3. 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.
4. 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.
5. Wenn Sie fertig sind, klicken Sie oben rechts auf Änderungen veröffentlichen.

Beispiel

Ein Countdown-Modul erstellen

1. Erstellen Sie ein Modul im Design-Manager und nennen Sie es Countdown-Timer.
2. 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 HubL-Variablennamen in event_date_and_time aktualisiert.

• • Wählen Sie das Feld Farbe aus. Geben Sie den Namen „Timer-Schriftfarbe“ ein. Dadurch wird das Feld HubL-Variablennamen in timer_font_color aktualisiert.

Bitte beachten: Die HubL-Variablennamen müssen mit den Variablennamen übereinstimmen, die im folgenden Codeabschnitt „module.html (HTML + HubL)“ enthalten sind.

3. Kopieren Sie im Modul-Editor den folgenden Code und fügen Sie ihn in den Abschnitt module.html (HTML + HubL) ein:

<!-- Hidden span to store the target date -->
<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>
 <div class="time_container">
 <span id="hours"></span><br>
 Stunden
 </div>
 <div class="time_container">
 <span id="minutes"></span><br>
 Minuten
 </div>
 <div class="time_container">
 <span id="seconds"></span><br>
 Sekunden
 </div>
</div>

4. Kopieren Sie den folgenden Code und fügen Sie ihn in den Abschnitt module.css ein:

.time_container {
float: left;
width: 10%;
text-align: center;
}
.time_container span {
font-weight: bold;
font-size: 200%;
}

5. Kopieren Sie den folgenden Code und fügen Sie ihn in den Abschnitt module.js ein:

// Function to calculate and display countdown
function updateCountdown() {
// Get the target date from the hidden span
const targetDate = new Date(document.getElementById('target-date').textContent);
// Get the current date
const currentDate = new Date();
// Calculate the time remaining (in milliseconds)
const timeRemaining = targetDate - currentDate;
// Check if the target date has passed
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Countdown expired';
return;
}
// Calculate remaining days, hours, minutes, and seconds
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);
// Display the countdown
document.getElementById('days').innerText = `${days}`;
document.getElementById('hours').innerText = `${hours}`;
document.getElementById('minutes').innerText = `${minutes}`;
document.getElementById('seconds').innerText = `${seconds}`;
}
// Update countdown every second
setInterval(updateCountdown, 1000);
// Initial call to update countdown immediately
updateCountdown();

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