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: Oktober 31, 2019

Produkte/Lizenzen

Marketing Hub  Professional, Enterprise
Basic

Sie können den Modul-Editor im Design-Manager verwenden, um Module und benutzerdefinierte oder erweiterte Funktionen zu Ihrem Blog, der Seite oder der E-Mail zu erstellen, während Ihre Marketer immer die Möglichkeit haben, den Modulinhalt im Inhaltseditor anzupassen.

Der Modul-Editor hat drei Bearbeitungsbereiche für HTML und HubL, CSS und JavaScript. Mit allen drei Elementen können Sie Module einheitlich in verschiedenen Portalen oder über mehrere Vorlagen verwalten. Beispiele für den Modul-Editor, um Folgendes zu erstellen:

  • Benutzerdefinierte Bildergalerien oder Bilder-Schieberegler
  • Event-Listen
  • Eine Mitarbeiterliste mit Lebensläufen und Portraitaufnahmen
  • Abschnitte, die es dem Benutzer ermöglichen, CSS-Klassen umzuschalten, um ihre Darstellung zu steuern

Bitte beachten Sie Folgendes: Die Erstellung von Modulen erfordert Kenntnisse von HTML, CSS, HubL und dem HubSpot-Design-Manager, um die erforderlichen Stylesheets und relevanten JavaScript-Dateien auf allen Seiten mit benutzerdefinierten Modulen einzuschließen. Es wird empfohlen, mit einem Designer zu arbeiten, um Module zu erstellen.

Ein neues Modul erstellen

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Klicken Sie oben im Finder auf „Datei“ > „Neue Datei“.

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 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.
  • Geben Sie dem Modul einen Dateinamen und klicken Sie auf „Erstellen“.

set-up-your-new-module

Felder zu Ihrem Modul hinzufügen

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

module-add-field

  • Sie können den Namen Ihres Felds bearbeiten, indem Sie auf das Bleistift-Symbol neben dem Feldnamen klicken und den Namen der HubL-Variablen bearbeiten.

Standardinhalt für Feld hinzufügen

Im Abschnitt Content-Optionen können Sie Ihrem Feld Standardinhalte hinzufügen. Dieser Standardinhalt wird angezeigt, wenn das Modul in Vorlagen und Inhaltseditoren verwendet wird und die Optionen für Standardinhalte je nach Feldtyp unterschiedlich sind.

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.
  • Hilfetext: Fügen Sie dem Feld einen Hilfetext hinzu, um Benutzern Kontext oder Anleitungen bereitzustellen.

field-editor-options

Anzeigebedingungen für Feld festlegen

Möglicherweise möchten Sie ein Feld nur dann anzeigen, wenn ein anderes Feld bestimmte Kriterien erfüllt.

  • Klicken Sie im Abschnitt „Anzeigebedingungen“ auf dieDropdown-Liste 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.

Weitere Informationen über die Feldanzeigebedingungen finden Sie in der Designer-Dokumentation.

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 eins Ihrer benutzerdefinierten Felder in Ihr Modul aufnehmen möchten, kopieren Sie das Feldsnippet und fügen Sie es in das Editor-Fenster „HTML + HubL“ 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 die Dropdown-Liste „Aktionen“.Wählen Sie dann„Snippet kopieren“ aus.
  • Klicken Sie auf den Ort, an dem Sie das Feld im Editorfenster „HTML + HubL“ hinzufügen möchten, und fügen Sie 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.

Vorschau Ihres Moduls

Sie können eine Vorschau Ihres Modul anzeigen und es jederzeit in einem Content-Editor 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 im Modul-Editor 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 den Schalter, wenn Sie Änderungen vornehmen oder die Funktionalität des Moduls testen möchten. Wenn dieser Schalter deaktiviert ist, wird Ihrem Team eine Warnung angezeigt, dass dieses Modul nicht für Vorlagen verfügbar ist.

make-module-available

Fügen Sie Ihr Modul einer 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 SymbolcustomModulesgekennzeichnet.
  • Ziehen Sie das Modul an die Stelle, an die Sie es in der Vorlage platzieren möchten.

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.

Navigieren Sie in Ihrem HubSpot Marketing Hub Basic-, Professional- oder Enterprise-Konto zu „Marketing“ > „Dateien und Vorlagen“ > „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“: 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 auf der Detailseite des Moduls oben rechts auf „Dieses Modul testen“, bevor Sie es Ihrem Design-Manager hinzufügen. Beispielsweise können Sie Ihren eigenen benutzerdefinierten Inhalt hinzufügen, um zu testen, ob dieses Modul in Ihrem Website-Design funktioniert.

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.

add-module-marketplace

/de/cos-general/create-and-edit-modules