Module im Design-Manager erstellen und bearbeiten

Mit dem Design-Manager können Sie benutzerdefinierte Module erstellen, um Ihren Blog, Ihre Seiten oder E-Mails mit erweiterten Funktionen zu versehen. Benutzerdefinierte Module bieten eine breite Palette von Funktionen, sodass Inhalte im Seiten-, E-Mail- oder Blog-Editor vollständig angepasst werden können.

Bitte beachten: Das Erstellen von Modulen erfordert Kenntnisse in HTML, CSS, HubL und dem HubSpot-Design-Manager. HubSpot empfiehlt, mit einem Entwickler zusammenzuarbeiten , um codierte 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 Inhaltstyp, in dem Ihr Modul verwendet wird (z. B. Blog-Beiträge, E-Mails oder Landingpages). 
6. Wählen Sie im Feld Modulinhaltsbereich 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. 
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. Beschriften Sie das Modul aus Gründen der Übersichtlichkeit, fügen Sie Felder hinzu und konfigurieren Sie diese, und passen Sie die Optionen des Feld-Editors an, z. B. den Standardinhalt. 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, benutzerdefinierte Modulsyntax schreiben, hilfreichen Anleitungstext 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 einem Modul Felder hinzu, um den Inhalt oder die Formatierung des Moduls festzulegen und es im Content-Editor bearbeiten zu lassen. Erfahren Sie mehr ü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 des Feldes zu bearbeiten, klicken Sie auf das edit Bearbeiten-Symbol und geben Sie einen neuen Namen ein. Um den HubL-Variablennamen zu bearbeiten, geben Sie im Feld HubL-Variablenname einen neuen Namen ein. 

Standardinhalt des Felds 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 Standardinhaltsoptionen 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 Standardzeit für Datum und Uhrzeit 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 Feldanzeigebedingungen festlegen, dass ein Modulfeld 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 die minimale Anzahl der Fälle, mit denen das Feld im Modul angezeigt wird, auf den Maximalwert festgelegt. 
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 Bildfeldes 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.

Felder des Moduls gruppieren

Nachdem Sie Felder erstellt haben, können Sie diese 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 Gruppe 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

Im Abschnitt Editoroptionen können Sie Hilfetext hinzufügen, um Benutzern beim Bearbeiten des Moduls Kontext zu geben. 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 Editoroptionen 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 oder entfernen Sie sie, für die Benutzer ein Modul verwenden können, z. B. Blog-Beiträ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 Inhaltstyp, bei dem Ihr Modul verwendet wird oder nicht (z. B. Blog-Beiträ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 Für 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 für Vorlagen und Seiten zur Verfügung stellen . 

Bitte beachten: Wenn Sie den Schalter für Vorlagen oder 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 kopieren und Snippet 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. 

Syntax des Moduls schreiben

Während Sie Ihr Modul bearbeiten, können Sie die Modulsyntax in den Abschnitten module.html (HTML + HubL), module.css und module.js Modul-Editor 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 einer neuen Browser-Registerkarte 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 Vorlagen 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.

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-&-Drop-Vorlage im Layout-Editor hinzuzufügen, klicken Sie oben im Inspektor auf die Registerkarte + Hinzufügen .
   • Geben Sie im Feld Suchen 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-&-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 Strg+Klick 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 Verwendung von Vorlagen des Inspektors auf Snippet kopieren .
   • 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

Erstellen Sie ein Countdown-Modul

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 für den HubL-Variablennamen in event_date_and_timeaktualisiert.

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

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

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

.time_container {
float: left;
Breite: 10%;
text-align: center;
}
. time_container span {
font-weight: bold;
Schriftgröße: 200%;
}

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

Funktion zur Berechnung und Anzeige der Countdown-Funktion
updateCountdown() {
Abrufen des Zieldatums aus der ausgeblendeten Spanne
const targetDate = new Date(document.getElementById('target-date').textContent);
Aktuelles Datum
abrufen const currentDate = new Date();
Berechnen der verbleibenden Zeit (in Millisekunden)
const timeRemaining = targetDate - currentDate;
Überprüfen Sie, ob das Zieldatum verstrichen
ist, if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Countdown abgelaufen';
Rückgabe;
}
Berechnen Sie die verbleibenden Tage, Stunden, Minuten und Sekunden
konstante Tage = 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);
Countdown
anzeigen document.getElementById('days').innerText = '${days}';
document.getElementById('hours').innerText = '${hours}';
document.getElementById('minutes').innerText = '${minutes}';
document.getElementById('seconds').innerText = '${seconds}';
}
Countdown alle Sekunden
aktualisieren setInterval(updateCountdown, 1000);
Erster Aufruf zur sofortigen Aktualisierung des Countdowns
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.