Gewusst wie: So verwenden Sie benutzerdefinierte Module zum Hinzufügen von benutzerdefinierten Website-Funktionen

Zuletzt aktualisiert am: May 18, 2016

Anforderungen

Produkt: HubSpot Marketing
Abonnement: Basic, Pro, & Enterprise

Mit dem Design-Manager haben Sie die Möglichkeit, benutzerdefinierte Module zu programmieren, die zum Hinzufügen erweiterter Funktionen auf einer Seite verwendet werden. Gleichzeitig ermöglicht er Ihren Marketers, den Inhalt dieser Module problemlos individuell anzupassen. Benutzerdefinierte Module unterstützen HTML, CSS, Javascript und HubL. Einige Ideen für benutzerdefinierte Module:

  • Benutzerdefinierte Bildergalerien oder Bilder-Schieberegler
  • Event-Listen
  • Module für Mitarbeiterlisten mit Bildern und Profilinformationen
  • Abschnitte, die es dem Benutzer ermöglichen, CSS-Klassen umzuschalten, um ihre Darstellung zu regeln

Anleitung

Befolgen Sie diese Anleitung, um ein benutzerdefiniertes Modul zu erstellen.

Navigieren Sie zum Design Manager (Design-Manager).

Navigieren Sie zu Content > Design Manager (Inhalte > Design-Manager).

Navigate to Design Manager

Erstellen Sie ein neues benutzerdefiniertes Modul.

Erstellen Sie ein neues benutzerdefiniertes Modul.

New custom module
Custom module select

Benennen Sie das benutzerdefinierte Modul.

Benennen und speichern Sie das benutzerdefinierte Modul. Bitte beachten Sie, dass die Umbenennung von benutzerdefinierten Modulen zum Verlust des Inhalts im Editor führt. Seiten, die dieses Modul aktuell benutzen, werden nicht mit dem neuen Namen aktualisiert und bestehender Inhalt geht verloren.
Name custom module

Markup schreiben

Schreiben Sie das Markup, das die bearbeitbaren Felder umgibt. Wie bereits erwähnt, unterstützen benutzerdefinierte Module HTML, CSS und Javascript.

Felder hinzufügen

Klicken Sie auf Add new field (Neues Feld hinzufügen), um für Inhaltsersteller ein bearbeitbares Feld hinzuzufügen.
Add custom module field

Durch Klicken auf +Add new field (Neues Feld hinzufügen) fügen Sie neue Felder hinzu und durch Klicken auf Arrange fields (Felder anordnen) können Sie Felder neu anordnen/löschen. Aktuell unterstützen benutzerdefinierte Module die folgenden Feldtypen:

  • Text (Text): Mit einem Textfeld ermöglichen Sie Benutzern, im Inhalts-Editor einen Text einzufügen.
  • Rich Text (Rich-Text): Mit Rich-Text-Bereichen geben Sie Ihren Benutzern Zugriff auf alle Optionen, die im HubSpot Rich-Text-Editor verfügbar sind.
  • Boolean (Boolesch) - Mit einem Booleschen Feld erstellen Sie ein Kontrollkästchen für Benutzer, um bestimmte Code-Abschnitte Ihres benutzerdefinierten Moduls umzuschalten.
  • Image (Bild): Mit dem Bildfeld fügen Sie ein Bild hinzu, das es Marketern ermöglicht, aus dem Inhalts-Editor hochgeladene Bilder auszuwählen.
  • Choice (Auswahl): Mit dem Auswahlfeld erstellen Sie eine Drop-down-Auswahl, aus der Benutzer den gewünschten Wert auswählen können.
Set-up-custom-field.png

Snippet kopieren und einfügen

Wenn Sie bereit sind, eines Ihrer benutzerdefinierten Felder in den Code einzupflegen, klicken Sie auf Copy snippet (Snippet kopieren)  und fügen Sie es in Ihren Code ein (Strg + V oder Cmd + V). Mehr über benutzerdefinierte Modulsyntax erfahren Sie in diesem Artikel.

Benutzerdefinierte Module veröffentlichen

Klicken Sie auf Update (Aktualisieren), um Ihr benutzerdefiniertes Modul zu veröffentlichen.

HubSpot Help article screenshot

Zur Vorlage hinzufügen

Nun sind Sie bereit, Ihr Modul Ihren Vorlagen für Landing-Pages oder Website-Seiten hinzuzufügen. Um einer Vorlage ein Custom Module (Benutzerdefiniertes Modul) hinzuzufügen, klicken Sie einfach auf das Zahnrad-Symbol im Modul und wählen Sie Swap module (Modul tauschen) aus.

Swap module

Sie können nun nach Custom modules (Benutzerdefinierten Modulen) filtern. Wählen Sie das benutzerdefinierte Modul aus, das Sie hinzufügen möchten, und klicken Sie auf Select (Auswählen).

Add to template
Bitte beachten Sie, dass Sie Ihren Blog-Vorlagen aktuell keine benutzerdefinierten Module hinzufügen können.

Vorheriger Artikel:

Weiter zum nächsten Artikel: