Module erstellen und bearbeiten

Im Design-Manager können Sie benutzerdefinierte Code-Module erstellen, um Ihrem Blog, Ihren Seiten oder Ihren E-Mails benutzerdefinierte oder 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. Sie können benutzerdefinierte Module komplett neu erstellen oder vorgefertigte Module vom HubSpot Marketplace hinzuzufügen.

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

Neues Modul 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 das Kontrollkästchen neben jedem Inhaltstyp, in dem Ihr Modul verwendet wird: Seiten, Blog-Beiträge, Blog-Listen, E-Mails oder Zitate. In E-Mail-Vorlagen verwendete Module dürfen kein CSS oder JavaScript enthalten. 

Bitte beachten: Benutzerdefinierte Module zur Verwendung in E-Mails können nur in Konten mit einem Marketing Hub Professional - oder Enterprise -Abonnement erstellt werden. 

• Wählen Sie aus, ob dieses Modul ein lokales Modul oder ein globales Modul sein soll. 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 Ihr Modul ein und klicken Sie dann auf „Erstellen“.

Modul eine Bezeichnung geben

Standardmäßig referenziert der Content-Editor ein Modul mit dem Namen, den es im Design-Manager erhalten hat. Wenn Ihr Modul einen anderen Namen im Content-Editor verwenden soll, können Sie dies tun, indem Sie eine Bezeichnung eingeben. 

Felder zu Ihrem Modul hinzufügen

Fügen Sie Felder zu dem Modul hinzu, um den Inhalt oder das Styling des Moduls festzulegen und ihn im Content Editor bearbeitbar machen. Erfahren Sie in unserer Entwicklerdokumentation mehr über verfügbare Feldtypen. 

• Klicken Sie im Modul-Inspektor auf der rechten Seite im Abschnitt „Felder“ auf das  Dropdown-Menüs, um -Menü „Feld hinzufügen“ und wählen Sie dann ein Feld aus, das Ihrem Modul hinzugefügt werden soll.

• Bearbeiten Sie den Namen Ihres Felds, indem Sie auf das Bleistiftsymbol edit neben dem Feldnamen klicken. Um den Namen der HubL-Variable zu bearbeiten, nehmen Sie im Textfeld „HubL-Variablenname“ Ihre Änderungen vor. 

Standardinhalt für Feld hinzufügen

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.

Im folgenden Beispiel ist der Feldtyp ein Bildfeld, daher sind die Optionen für Standardinhalt die Auswahl eines Standardbildes und das Ausblenden der Größensteuerelemente.

Feld-Editor-Optionen festlegen

Im Abschnitt „Editor-Optionen“ können Sie durch Aktivieren der folgenden Optionen festlegen, wie Benutzer das Modul im Content-Editor bearbeiten können:

• Dieses Feld als Pflichtfeld festlegen: Der Benutzer darf dieses Feld im Content-Editor nicht leer lassen.

• Bearbeiten in Content-Editoren verhindern: Der Feldinhalt kann nicht im Content-Editor bearbeitet werden. Auf Vorlageebene kann er jedoch weiterhin bearbeitet werden. Diese Option ist nicht verfügbar für globale Module, die auf Seitenebene nicht bearbeitet werden können.

• Tooltip-Hilfetext: Fügen Sie dem Feld einen Hilfetext hinzu, um Benutzern Kontext oder Anleitungen bereitzustellen. Dieser Hilfetext wird in einem Tooltip angezeigt, wenn ein Benutzer beim Bearbeiten den Mauszeiger über das Feld bewegt. 
  
  
• Inline-Hilfetext: Fügen Sie dem Feld einen Hilfetext hinzu, um Benutzern Kontext oder Anleitungen bereitzustellen. Dieser Hilfetext wird unterhalb des Feldes angezeigt, wenn ein Benutzer das Modul bearbeitet.

Anzeigebedingungen für Feld festlegen

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

• Klicken Sie im Abschnitt „Anzeigebedingungen“ auf das Dropdown-Menüs, um  für die HubL-Variable, um ein Modulfeld auszuwählen, und klicken Sie auf das Dropdown-Menü „ist nicht leer“, um die Bedingung für dieses Feld auszuwählen.
• Wenn Sie die Bedingung „ist gleich“ auswählen, geben Sie einen Wert oder eine Regex ein.

Im folgenden Beispiel werden die Anzeigebedingungen für ein Bildfeld festgelegt. Die Bedingung ist, dass der Wert in einem Textfeld mit dem Namen image_title mit „Headshot“ (Portraitaufnahme) identisch sein muss, um das Bildfeld im Modul anzuzeigen.

Die Anzeigebedingungen werden automatisch aktiviert, sobald Sie eine Bedingung festgelegt haben. Um die Anzeigebedingungen zu deaktivieren, klicken Sie rechts neben „Darstellungsbedingungen“ auf den Schalter.

Repeater-Optionen festlegen

Im Abschnitt „Repeater-Optionen“ können Sie Repeater-Optionen für Ihr Feld festlegen. Repeater sind Felder und Gruppen, die mehrere Objekte erstellen und sie mit einer for-Schleife anzeigen können.

• Wählen Sie in den Repeater-Optionen eine minimale und/oder maximale Anzahl an erforderlichen Instanzen dieses Feldes aus.
• Sie können auch eine Standardobjektanzahl festlegen, die die Anzahl der Instanzen des Feldes festlegt, die standardmäßig im Modul angezeigt werden.
  

Im folgenden Beispiel wird das Bildfeld als Schieberegler eingerichtet. Die Objektanzahleinschränkungen sind so festgelegt, dass mindestens 3 bis maximal 5 Bildfelder im Modul angezeigt werden. Standardmäßig werden 4 Bildfelder im Modul angezeigt und Sie können ein weiteres Bildfeld hinzufügen oder ein vorhandenes Bildfeld entfernen.

Die Repeater-Optionen werden automatisch aktiviert, sobald eine der Optionen geändert wurde. Um die Repeater-Optionen zu deaktivieren, klicken Sie auf der rechten Seite der Repeater-Optionen auf den Schalter.

Modulfelder gruppieren

Nachdem Sie Felder erstellt haben, können Sie bis zu 4 davon zusammen gruppieren, um Ihre Felder nach Relevanz zu organisieren. Feldgruppen können verwendet werden, um benutzerdefinierte Feldlogik zu erstellen. Erfahren Sie mehr über Modulfeldgruppen. 

So gruppieren Sie Modulfelder zusammen:

• Klicken Sie in der rechten Seitenleiste des Moduls-Editors auf „Gruppe“.
  
  
• Wählen Sie die Felder aus, die Sie zusammen gruppieren möchten.
• Klicken Sie auf „Gruppe erstellen“.

Feld-Snippets kopieren und einfügen

Hilfetext zu Ihrem Modul hinzufügen

Fügen Sie im Abschnitt „Editor-Optionen“ Hilfetext hinzu, um Benutzern beim Bearbeiten des Moduls Kontext zu bereitzustellen. Hilfetext darf nicht mehr als 300 Zeichen umfassen. 

Wenn ein Benutzer das Modul in einem Content-Editor ändert, wird der Hilfetext über den Modulfeldern angezeigt.

Vorschau Ihres Moduls

Sie können in einer Vorschau anzeigen, wie Ihr Modul im Content-Editor aussieht und funktioniert, indem Sie oben rechts im Modul-Editor auf die Schaltfläche „Vorschau“ klicken. Die Vorschau Ihres Moduls wird in einer neuen Registerkarte geöffnet. Diese Vorschau wird mit dem Editor synchronisiert und bei der Arbeit automatisch aktualisiert.

Veröffentlichen Ihres Moduls

Wenn Sie mit dem Hinzufügen von Feldern sowie dem Schreiben Ihrer Modulsyntax fertig sind, können Sie Ihr Modul veröffentlichen. Klicken Sie oben rechts auf „Änderungen veröffentlichen“.

Stellen Sie Ihr Modul für Vorlagen zur Verfügung

• Aktivieren Sie oben rechts im Editor den Schalter „Für Vorlagen zur Verfügung stellen“, um dieses Modul verfügbar zu machen und zu Ihren Vorlagen hinzuzufügen.

• Deaktivieren Sie diesen Schalter, um Änderungen vorzunehmen oder die Funktionalität des Moduls zu testen. Wenn dieser Schalter deaktiviert ist, wird Ihrem Team eine Warnung angezeigt, dass dieses Modul nicht für Vorlagen verfügbar ist.

Modul zu einer Vorlage hinzufügen

Nachdem Sie ein Modul veröffentlicht haben, können Sie es auf Ihren Seiten verwenden, indem Sie es zu einer Vorlage hinzufügen.

So fügen Sie ein Modul zu einer Drag- & -Drop-Vorlage hinzu:

• Klicken Sie im Vorlagenlayout-Editor oben im Layout-Inspektor auf die Registerkarte „Hinzufügen“ und suchen Sie Ihr Modul. Die benutzerdefinierten Module, die Sie erstellt haben, sind durch das Symbol customModules gekennzeichnet.
• Ziehen Sie das Modul in die Vorlage.

Um ein Modul zu einer kodierten Vorlage hinzuzufügen, können Sie das Modul-Snippet kopieren und in die Vorlage einfügen:

• Um den Modulausschnitt aus dem Modul-Editor zu kopieren, klicken Sie unten in der rechten Seitenleiste auf „Ausschnitt kopieren“.
  
  
  • So kopieren Sie das Modul-Snippet aus der linken Seitenleiste des Design-Managers:
  • Suchen Sie in der linken Seitenleiste das benutzerdefinierte Modul.
    • „Snippet kopieren“ aus. Alternativ können Sie das Modul auswählen und dann oben links auf Aktionen klicken und Snippet kopieren auswählen.

• Fügen Sie in der kodierten Vorlage das Snippet ein, wenn erforderlich.
  
  

Hinzufügen oder Kaufen eines Moduls aus dem Marketplace

Neben der Erstellung eigener Module können Sie benutzerdefinierte Module hinzufügen oder kaufen, die andere Benutzer oder Anbieter im HubSpot Marketplace erstellt haben.

• Klicken Sie in Ihrem HubSpot-Account in der Hauptnavigationsleiste auf das Marketplace-Symbol marketplace und wählen Sie dann Vorlagen-Marketplace aus.

• Klicken Sie auf der linken Seite im Abschnitt mit den Filterprodukten unter „Kategorie“ auf die Dropdown-Liste „Alle Produkte“  und wählen Sie „Module“ aus. Sie können die verfügbaren Module nach folgenden Kriterien filtern:
  • Preis: Geben Sie an, ob das Modul kostenlos oder kostenpflichtig ist.
  • Funktion:: Wählen Sie die Art der Funktion(en) aus, die das Modul enthält (z. B. Rechner, Galerie, Karte)
  • Funktioniert mit: Wählen Sie die Vorlagentypen aus, in denen das Modul verwendet werden kann.
  • Anbieter: Wählen Sie den/die Anbieter aus, von denen das Modul angeboten wird.

• Bewegen Sie den Mauszeiger über das ausgewählte Modul und klicken Sie auf „Details anzeigen“.
• Klicken Sie oben rechts auf „Kostenloses Modul erhalten“ oder auf „Modul für $ kaufen“.
  • Wenn das Modul kostenlos ist, wird es automatisch Ihrem Design-Manager hinzugefügt.
  • Wenn das Modul nicht kostenlos ist, geben Sie Ihre Zahlungsdetails ein. Nach der Verarbeitung der Bezahlung wird das Modul Ihrem Design-Manager hinzugefügt.