Zum Hauptinhalt
Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt. Er wurde automatisch mit einer Software übersetzt und unter Umständen nicht korrekturgelesen. Die englischsprachige Fassung gilt als offizielle Version und Sie können dort die aktuellsten Informationen finden. Hier können Sie darauf zugreifen.
Design Manager

Module erstellen und bearbeiten

Zuletzt aktualisiert am: August 4, 2021

Produkte/Lizenzen

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Ehemaliges Marketing Hub Basic

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 Marketing > Dateien und Vorlagen > Design-Manager.
  • Klicken Sie oben im Finder auf das Dropdown-Menü „Datei“ und wählen Sie „Neue Datei“ aus.

new-file

  • Klicken Sie im Dialogfeld auf das Dropdown-Menü „Was möchten Sie erstellen?“ und wählen Sie „Modul“ aus.

build-a-module

  • Klicken Sie auf „Weiter“.
  • Wählen Sie aus, ob Sie dieses Modul in Seitenvorlagen, Blog-Vorlagen und/oder E-Mail-Vorlagen verwenden möchten. In E-Mail-Vorlagen verwendete Module dürfen kein CSS oder JavaScript enthalten. 
  • 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“.

set-up-your-new-module

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. 

design-manager-label-module

Felder zu Ihrem Modul hinzufügen

Fügen Sie Felder zu dem Modul hinzu, um den Inhalt des Moduls festzulegen und ihn im Content Editor bearbeitbar machen. Erfahren Sie hier über verfügbare Feldtypen.

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

module-add-field

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

field-content-options

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. 

    custom-module-help-text
  • 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.

design-manager-module-field-options

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

field-display-conditions

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/odermaximale 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,dassmindestens 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.

field-repeater-options

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

    design-manager-group-fields
  • Wählen Sie die Felder aus, die Sie zusammen gruppieren möchten.
  • Klicken Sie auf „Gruppe erstellen“.

Feld-Snippets kopieren und einfügen

  • Wenn Sie eines Ihrer benutzerdefinierten Felder in Ihr Modul aufnehmen möchten, kopieren Sie das Feldsnippet und fügen Sie es in den HTML- und HubL-Editor des Moduls ein.
    • Klicken Sie im Feld-Inspektor auf der rechten Seite des HubL-Variablennamens des Feldes auf „Snippet kopieren“.
    • Bewegen Sie im Modul-Inspektor den Mauszeiger über das Feld und klicken Sie auf das Dropdown-Menü „Aktionen“ Dropdown„Snippet kopieren“ aus.
  • Klicken Sie auf den Ort, an dem Sie das Feld im HTML- und HubL-Editor hinzufügen möchten, und fügen Sie dann das Snippet ein, indem Sie Strg+V oder Cmd+V drücken.

copy-paste-field-snippet

Schreiben Ihrer Modul-Syntax

Wenn Sie Ihr Modul bearbeiten, können Sie zusätzliche Modul-Syntax in den Editor-Fenstern „HTML + HubL“, „CSS“ und „JS“ schreiben. Erfahren Sie mehr über den Modulcode-Editor und die Modulsyntaxreferenz in der Designer-Dokumentation von HubSpot.

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. 

design-manager-help-text

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

page-editor-module-help-text

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.

preview-module

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

publish-module

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.

content-toggle

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

make-module-available

Modul zu einer Vorlage hinzufügen

  • 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 SymbolcustomModules.
  • Ziehen Sie das Modul per Drag-&-Drop in Ihre Vorlage.

add-custom-module

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