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 25, 2020

Produkte/Lizenzen

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

Im Design-Manager können Sie benutzerdefinierte kodierte Module erstellen, um Ihrem Blog, Ihren Seiten oder Ihren E-Mails benutzerdefinierte oder erweiterte Funktionen hinzuzufügen. Der Modul-Editor verfügt über drei Bereiche für das Schreiben von HTML und HubL, CSS und JavaScript. 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 Ihrem Account 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. Es wird empfohlen, mit einem Designer zu arbeiten, 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 in dem daraufhin angezeigten Dialogfeld auf „Modul“.

create-new-file-module

  • Wählen Sie aus, ob Sie dieses Modul in Seitenvorlagen, Blog-Vorlagen und/oder E-Mail-Vorlagen verwenden möchten.

Bitte beachten Sie Folgendes: Es gibt technische Unterschiede zwischen diesen Modultypen, die diese inkompatibel machen. Zum Beispiel werden CSS und JavaScript deaktiviert, wenn Sie E-Mail-Vorlagen für die E-Mail-Kompatibilität auswählen.

  • Wählen Sie aus, ob der Inhalt des Moduls als lokales Modul oder globales Modul verwendet werden soll. Wenn Sie ein globales Modul erstellen, wird der Inhalt dieses Moduls jeden Ort aktualisieren, an dem das Modul verwendet wird. Erfahren Sie, wie Sie mit Smart Content in einem globalen Modul arbeiten.
  • Geben Sie dem Modul einen Dateinamen und klicken Sie auf „Erstellen“.

set-up-your-new-module

Modul eine Bezeichnung geben

Die Modulbezeichnung ist der Name, der im Design-Manager und im Content-Editor angezeigt wird, wenn Sie das Modul auf Ihrer Seite oder Ihrer E-Mail hinzufügen. Wenn Sie im Design-Manager und Content-Editor nach einem Modul suchen, können den Modulnamen oder dessen Beschriftung verwenden. Wird dieses Feld leer gelassen, wird stattdessen der Modulname angezeigt.

design-manager-label-module

Felder zu Ihrem Modul hinzufügen

  • 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 Inhaltseditoren verwendet wird. Die Optionen für Standardinhalte variieren je nach Feldtyp.

Im folgenden Beispiel ist der Feldtyp ein Bildfeld, daher können als Standardinhaltsoptionen ein Standardbild ausgewählt und die Größensteuerelemente ausgeblendet werden.

field-content-options

Feld-Editor-Optionen festlegen

Im Abschnitt „Editor-Optionen“ können Sie die folgenden Optionen aktivieren:

  • „Dieses Feld als Pflichtfeld festlegen“: Der Benutzer darf dieses Feld nicht leer lassen.
  • „Bearbeiten in Content-Editoren verhindern“: Der Feldinhalt kann vom Endnutzer nicht bearbeitet werden, wenn das Modul im Inhaltseditor ausgewählt ist. Der Feldinhalt ist in der Vorlage noch editierbar. Diese Option ist für globale Module nicht verfügbar, 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

Sie können ein Modulfeld so anpassen, dass es nur angezeigt wird, wenn ein anderes Feld bestimmte Kriterien mit Feldanzeigebedingungen erfüllt.

  • Klicken Sie im Abschnitt „Anzeigebedingungen“ auf dasDropdown-Menü 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 image_title (ein Textfeld) „Headshot“ (Portraitaufnahme) lauten 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

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

Erfahren Sie mehr über Feldwiederholung und Schleifen in der Designer-Dokumentation.

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“ und wählen Sie dann „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 Inhaltseditor ändert, wird der Hilfetext über den Modulfeldern angezeigt.

page-editor-module-help-text

Vorschau Ihres Moduls

Sie können eine Vorschau Ihres Modul anzeigen und es in einem Inhaltseditor bearbeiten, 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 und mit der Vorschau Ihres Moduls zufrieden sind, können Sie das 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 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 „Produkte filtern“ 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“: Wählen Sie aus, ob das Modul kostenlos ist oder nicht
    • „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
  • Wenn Sie sich für einModul entschieden haben, bewegen Sie den Mauszeiger über dieses und klicken Sie auf „Details anzeigen“.
  • Klicken Sie oben rechts auf „Kostenloses Modul erhalten“ oder auf „Modul für $x 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.
/de/cos-general/create-and-edit-modules