Modul- und Designfeldtypen

Last updated:

Fügen Sie Felder zu Modulen und Designs hinzu, damit Content-Autoren verschiedene Aspekte einer Seite im Seiten-Editor steuern können. Im Folgenden erfahren Sie mehr über die Felder, die für Module und Design verfügbar sind. Weitere Informationen zur Implementierung von Modul- und Designfeldern, einschließlich Feldgruppen und sich Wiederholfeldern, finden Sie im Überblick über Modul- und Designfelder.

Von allen Feldern verwendete Eigenschaften

Allen Feldern sind einige Eigenschaften gemein. Diese Eigenschaften steuern die Variablennamen, die Sie verwenden, um auf ihre Werte zu verweisen, und ihr Erscheinungsbild für Content-Autoren.

// Boolean field { "name" : "is_teaser_img", "label" : "Enable Teaser Image", "required" : false, "locked" : false, "type" : "boolean", "inline_help_text" : "Shows Teaser image when toggled on", "help_text" : "Teaser images are used to help provide visual context to the post.", "default" : false }
Von allen Feldern verwendete Eigenschaften
ParameterTypeDescription Default
help_text
String

Text, der im Editor als Tooltip erscheint, um den Content-Autor zu unterstützen.

Eignet sich am besten für zusätzliche Informationen, die für die Verwendung des Feldes nicht erforderlich sind.

none
id
String

Eindeutige ID für ein Feld. Diese wird von HubSpot generiert. Wenn Sie lokal entwickeln, müssen Sie diese ID nicht angeben.

inline_help_text
String

Hilfetext, der inline unter dem Label des Feldes angezeigt wird (maximal 300 Zeichen). 

Eignet sich am besten für Informationen, die für die Verwendung des Feldes erforderlich sind.

null
label
String

Der Text, den der Content-Autor sieht und der das Feld beschreibt. Kann Leerzeichen enthalten.

Rich text field, Date field, etc.
locked
Boolean

Bestimmt, ob das Feld im Content-Editor bearbeitet werden kann. Wenn „true“, erscheint das Feld nicht im Content-Editor.

false
name
String

Der Variablenname, den Sie verwenden werden, um auf die Werte dieses Feldes zu verweisen, und mit dem der Wert des Feldes gespeichert wird. Darf keine Leerzeichen oder Sonderzeichen enthalten.

richtext_field, date_field, etc.
required
Boolean

Legt fest, ob das Feld im Editor leer gelassen werden kann. Wenn dies der Fall ist, können Inhalte nur veröffentlicht werden, wenn dieses Feld ausgefüllt ist.

false
type
String

Die Art des Feldes, siehe Feldtypen unten für die Dokumentation aller Feldtypen.

visibility
Array

Bestimmt die Anzeigebedingungen für ein Feld.

display_width
String

Ermöglicht nebeneinander platzierte Modulfelder in Content-Editoren anstelle von Feldern in voller Breite, wenn auf "half_width" festgelegt. Das Feld erscheint neben dem nächsten Feld in der fields.json-Datei, sofern dieses Feld ebenfalls auf "half_width" festgelegt ist.

inline_help_text und help_text dürfen nicht austauschbar verwendet werden. 

Fragen Sie sich stattdessen „Sind diese Informationen notwendig, damit ein Benutzer eine Aufgabe erledigen kann?“.

  • Ist die Antwort ja, sollten die Informationen auf dem Bildschirm angezeigt werden und am besten eignet sich inline_help_text.
  • Wenn nein, dann ist es in Ordnung, einen Tooltip mit help_text einzufügen.

Wenn Sie sich an diese Vorgehensweise halten, beherrschen die Benutzer die von Ihnen bereitgestellte Benutzeroberfläche schnell.

Ausrichtung

Dieses Feld bietet Content-Autoren eine Möglichkeit, ein Element innerhalb eines Containers zu positionieren. Dies sollte nicht für die Textausrichtung verwendet werden, da es dafür einen eigenen Feldtyp gibt.

Ausrichtungsfelder werden in Modulen unterstützt.
Ausrichtungsfelder können nur als Stilfelder verwendet werden.

Ausrichtungsfeld
// alignment field { "name": "img_position", "label": "Position Image", "help_text":"Position the image within it's container.", "required": false, "type": "alignment", "default": { "horizontal_align": "CENTER", "vertical_align": "TOP", } }
Blog-Feld
ParameterTypDescription Default
default
Object

Objekt, das horizontal_align und vertical_align enthält.

alignment_direction
String

Legt fest, ob nur horizontale, nur vertikale oder beide Ausrichtungssteuerelemente angezeigt werden sollen. Kann Folgendes sein:

  • HORIZONTAL
  • VERTICAL
  • BOTH
BOTH

Hintergrundbild

Dieses Feld enthält ein Feld für ein Hintergrundbild mit Unterfeldern für die Hintergrundposition und die Hintergrundgröße. Hintergrundbildfelder haben eine .css-Eigenschaft, die CSS basierend auf dem Wert des Feldes zurückgibt. Erfahren Sie mehr über die generierte CSS-Eigenschaft.

Hintergrundbildfelder werden in Modulen unterstützt.
Hintergrundbildfelder können nur als Stilfelder verwendet werden.

Hintergrundbildfelder
// background image field { "name": "bg_image", "label": "Background image", "required": false, "type": "backgroundimage", "default": { "src": "https://example.com/img.png", "background_position": "MIDDLE_CENTER", "background_size": "cover" } }
Blog-Feld
ParameterTypDescription Default
default
Object

Objekt, das das src-Attribut, die Hintergrundposition und die Hintergrundgröße des Bildes enthält.

null

Blog

Dieses Feld stellt eine Möglichkeit für Content-Editoren bereit, einen Blog auszuwählen. So können Sie als Entwickler die ID des Blogs abrufen. Dies ist z. B. nützlich, um Teaser-Informationen für vorgestellte Blogs in Modulen abzurufen. Sie können die Blog-ID in blog-bezogenen HubL-Funktionen verwenden, um Informationen wie Blog-Autoren, aktuelle Blog-Beiträge, aktuelle Blog-Beiträge mit einem bestimmten Tag und vieles mehr zu erhalten.

Blog-Felder werden in Modulen unterstützt.

Screenshot des Blog-Feldes
// blog field { "name" : "blog", "label" : "Blog", "required" : false, "locked" : false, "type" : "blog", "default" : 1234567890 }
Blog-Feld
ParameterTypDescription Default
default
"default" / blog id

Gibt an, welcher Blog standardmäßig ausgewählt wird. Dieser Parameter akzeptiert als Argumente entweder "Standard" oder eine Blog-ID (verfügbar in der URL des Blog-Dashboards).

null

Boolesch

Dieses Feld stellt eine Möglichkeit für Content-Editoren bereit, Funktionen zu aktivieren/deaktivieren. Boolesche Werte können nur true oder false sein. Oft ist es sinnvoll, Gruppen oder Felder auf der Grundlage von booleschen Feldern bedingt zu machen. Wenn Sie davon ausgehen, dass Sie später mehr als zwei Zustände bereitstellen müssen, ist ein Auswahlfeld vielleicht die bessere Option, da Sie es mit weniger Aufwand ausbauen können, falls sich die Anforderungen später ändern.

Boolesche Felder werden sowohl in Designs als auch in Modulen unterstützt.
Boolesche Felder können als Stilfelder verwendet werden.

Screenshot eines booleschen Feldes
// Boolean field { "name" : "is_teaser_img", "label" : "Enable Teaser Image", "required" : false, "locked" : false, "type" : "boolean", "display":"checkbox", "inline_help_text" : "Shows Teaser image when toggled on", "help_text" : "Teaser images are used to help provide visual context to the post.", "default" : false }
Blog-Feld
ParameterTypDescription Default
default
Boolean

Legt fest, ob der Standardzustand dieses Feldes true oder false ist.

false
display
String

Wählen Sie den visuellen Anzeigestil für das Feld. Kann entweder als toggle oder als checkbox angezeigt werden.

checkbox

Behalten Sie die Konsistenz bei, wenn Sie „toggle“ oder „checkbox“ verwenden. Wenn Sie nicht aufpassen, schaffen Sie möglicherweise eine verwirrende Benutzeroberfläche für Content-Autoren.

Ein Umschalter kann sinnvoll sein, wenn der Wert des Feldes andere Felder aktiviert/deaktiviert, die bedingt angezeigt werden. Ein anderer Fall, in dem eine Umschaltfunktion nützlich sein kann, ist, wenn das Feld eine größere Designänderung für das Modul darstellt. Kontrollkästchen sind sinnvoll für kleinere Änderungen, die sich nicht so drastisch auf die Darstellung des Moduls auswirken, z. B. das Ein- oder Ausblenden einzelner kleiner Elemente.

Rahmen

Dieses Feld bietet Content-Autoren eine Benutzeroberfläche für die Erstellung eines Rahmens um ein Element. Rahmenfelder haben eine .css-Eigenschaft, die CSS basierend auf dem Wert des Feldes zurückgibt. Erfahren Sie mehr über die generierte CSS-Eigenschaft.

Rahmenfelder werden in Modulen unterstützt.
Rahmenfelder können nur als Stilfelder verwendet werden.

Screenshot des Rahmenmodulfelds im Seiten-Editor
// Border field { "id" : "styles.border", "name" : "border", "label" : "border", "required" : false, "locked" : false, "allow_custom_border_sides" : false, "type" : "border", "default" : { "top": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "bottom": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "left": null, "right": null } }
Blog-Feld
ParameterTypDescription Default
default
Boolean

Objekt mit Schlüssel für Rahmenradius, obere, untere, linke und rechte Seite.

{}

Auswahl

Auswahlfelder sind sozusagen synonym mit <select>-Elementen und Optionsfeldern. Sie bieten einem Content-Autor die Möglichkeit, 1 Element aus einer Liste von Optionen auszuwählen. Sie können im Seiten-Editor in zwei Formen dargestellt werden. Sie können sie so festlegen, dass sie wie ein Auswahlfeld oder ein Optionsfeld erscheinen. Die Optionen für ein Auswahlfeld können separate Label für ihre Werte haben. Nachdem ein Modul in einer Seite verwendet wurde, können die Optionslabel immer noch geändert werden, ohne dass dies negative Auswirkungen auf Websites hat, da der Wert immer noch derselbe ist. Wenn Sie den Wert jedoch ändern, wird bei allen Modulen, die zuvor diesen Wert hatten, die Verknüpfung entfernt.

Auswahlfelder werden sowohl in Designs als auch in Modulen unterstützt. Auswahlfelder können als Stilfelder verwendet werden.

choice-field-dropdown
// Choice field { "name" : "img_position", "label" : "Image Position", "required" : false, "locked" : false, "display" : "select", "choices" : [ [ "img--left", "Image Left - Text Right" ], [ "img--right", "Text Left - Image Right" ] ], "type" : "choice", "default" : "img--left" }
Boolesches Feld
ParameterTypDescription Default
choices
Array

Array von Wert- und Label-Paaren. Die Werte werden zuerst aufgeführt.

[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]
default
Value

Legt den standardmäßig ausgewählten Wert aus dem Auswahl-Array fest.

display
String

Legt fest, wie das Feld den Benutzern angezeigt wird. Die beiden Optionen sind "radio" und "select".

"select"

Farbe

Farbfelder bieten eine Benutzeroberfläche zur Farbauswahl für Content-Autoren. Sie unterstützen sowohl Volltonfarben als auch Transparenz. Sie sind die perfekte Wahl, wenn Sie Content-Autoren die volle Kontrolle über die Farben innerhalb eines Moduls geben wollen.

Farbfelder werden sowohl in Designs als auch in Modulen unterstützt.
Farbfelder können als Stilfelder verwendet werden.

Farbfeld

Die Option „Deckkraft“ ist für Module deaktiviert, bei denen email in den host_template_types enthalten ist.

// color field { "name" : "bg_color", "label" : "Background color", "required" : false, "locked" : false, "type" : "color", "default" : { "color" : "#ff0000", "opacity" : 100 } }
Farbfeld
ParameterTypDescription Default
default
Object

Legt die standardmäßig ausgewählte Farbe und Deckkraft fest.

{ "color" : "#ffffff", "opacity" : 100 }

CTA

Call-To-Action (CTA)-Felder bieten Benutzern die Möglichkeit, einen CTA auszuwählen, der angezeigt werden soll. CTAs sind im Wesentlichen nachverfolgbare Schaltflächen oder Links. Content-Autoren erstellen CTAs, die auf der gesamten Website verwendet werden können. 

CTA-Felder werden in Modulen unterstützt.
CTA-Felder sind in CMS Hub Professional und Enterprise verfügbar.

Call-to-Action-Feld
// CTA field { "name" : "cta", "label" : "CTA", "required" : false, "locked" : false, "type" : "cta", "default" : null }
CTA-Feld
ParameterTypDescription Default
default
String

Der standardmäßig ausgewählte CTA. Erwartet eine CTA-ID, die in der URL zu finden ist, wenn ein CTA im CTA-Manager bearbeitet wird.

null

CRM-Objekt

CRM-Objektfelder bieten den Benutzern die Möglichkeit, eine individuelle Instanz eines CRM-Objekts zur Anzeige auszuwählen. 

module.fieldname.properties gibt die von dieser Objektinstanz abgerufenen Eigenschaften zurück. Dadurch müssen Sie nicht die crm_object()–Funktion verwenden, um die Daten für die ausgewählte Objektinstanz zu erhalten.

module.fieldname.id gibt die Objektinstanz-ID zurück.

CRM-Objektfelder werden in Modulen unterstützt.
CRM-Objektfelder sind in CMS Hub Professional und Enterprise verfügbar.

CRM-Objektfeld
// fields.json { "name" : "crmobject_field", "label" : "CRM object", "required" : false, "locked" : false, "object_type" : "CONTACT", "properties_to_fetch" : [ ], "type" : "crmobject", "default" : { "id" : 1 } }
CRM-Objektfeld
ParameterTypDescription Default
object_type
Erforderlich
String

Typ von CRM-Objekt, von dem der Benutzer wählen kann. Unterstützte CRM-Objekttypen

properties_to_fetch
Array

Array von Eigenschaftsnamen, die mit dem Objekttyp verbunden sind, in String-Form. Bsp.: "date_of_birth" ist eine Eigenschaft, die mit einem Kontakt verknüpft ist. Verwenden Sie diese Option, um die auf der Seite verfügbaren Informationen auf das zu beschränken, was Sie benötigen.

default
Object

Objekt mit der ID der standardmäßig ausgewählten Objektinstanz. Kontakt-ID, Unternehmens-ID usw.

null

Datum

Datumsfelder bieten eine Benutzeroberfläche zur leichteren Auswahl eines Datums für Content-Autoren. Gibt einen Zeitstempel zurück, den Sie in Ihrem Code verwenden können.

Datumsfelder werden in Modulen unterstützt.

Datumsfeld mit geöffneter Kalenderauswahl
// Date field { "name" : "event_start_date", "label" : "Event Date", "required" : false, "locked" : false, "type" : "date", "default" : 1577854800000 }
Datumsfeld
ParameterTypDescription Default
default
Timestamp

Der Unix-Epoch-Zeitstempel für das Datum und die Uhrzeit, das bzw. die Sie als Standard verwenden möchten. Lassen Sie dies leer, damit der Content-Autor bei der Datums- und Uhrzeitauswahl mit dem aktuellen Datum und und der aktuellen Uhrzeit in der Auswahl starten kann.

null

Datum und Uhrzeit

Datums- und Uhrzeitfelder bieten wie das Datumsfeld eine Benutzeroberfläche für die Datumsauswahl sowie eine Uhrzeitauswahl, die es Content-Autoren erleichtert, ein Datum und eine Tageszeit auszuwählen. Gibt einen Zeitstempel zurück, den Sie in Ihrem Code verwenden können.

Datums- und Uhrzeitfelder werden in Modulen unterstützt.

Event-Start
// Date and time field { "name" : "event_start", "label" : "Event Start", "required" : false, "locked" : false, "type" : "datetime", "default" : 1577854800000 }
Feld für Datum und Uhrzeit
ParameterTypDescription Default
default
Timestamp

Der Unix-Epoch-Zeitstempel für das Datum und die Uhrzeit, das bzw. die Sie als Standard verwenden möchten. Lassen Sie dies leer, damit der Content-Autor bei der Datums- und Uhrzeitauswahl mit dem aktuellen Datum und und der aktuellen Uhrzeit in der Auswahl starten kann.

null

E-Mail-Adresse

In E-Mail-Adressfeldern kann der Benutzer mehrere E-Mail-Adressen auswählen. Dies könnte für die Anzeige von Kontaktinformationen verwendet werden. Das E-Mail-Feld gibt ein Array ausgewählter E-Mail-Adressen zurück, die in einer Schleife durchlaufen werden können.

E-Mail-Felder werden in Modulen unterstützt.

email-field
// Email address field { "name" : "emails", "label" : "Email address", "required" : false, "locked" : false, "type" : "email", "default" : null }
E-Mail-Adressfeld
ParameterTypDescription Default
default
Array

Array von E-Mail-Adresszeichenfolgen [„markus@beispiel.com", „jan@beispiel.com"]

null

Einbettung

Mithilfe von Einbettungsfeldern kann der Benutzer eine URL von einer oEmbed-fähigen Website hinzufügen oder einen Einbettungscode von einer anderen Website einfügen. Um mehr über die Verwendung von oEmbed bei HubSpot zu erfahren und Anwendungsfälle zu sehen, besuchen Sie unser oEmbed-Dokument.

Einbettungsfeld
// embed field { "name" : "embed_field", "label" : "Embed", "required" : false, "locked" : false, "supported_source_types" : [ "oembed", "html" ], "supported_oembed_types" : [ "photo", "video", "link", "rich" ], "type" : "embed", "default" : { "source_type" : "oembed" } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
supported_source_types
Array

Unterstützte Quelltypen für entweder oEmbed-URLs (oembed), HTML-Einbettungscode (html) oder Media Bridge (media_bridge).

["oembed", "html"]
supported_oembed_types
Array

Unterstützte oEmbed-Typen, einschließlich "photo", "video", "link" und "rich". Gilt nicht für die supported_source_types von HTML

[ "photo", "video", "link", "rich" ]
supported_media_bridge_providers
Array

Array von Anbieter-IDs, die bestimmen, welche Media Bridge-Anbieter für die Auswahl von Inhalten verfügbar sind.

Hinweis: Dieser Parameter wird auch bei der Installation der App eines Media Bridge-Anbieters ausgefüllt. 

type
String

Dieser Parameter ist immer auf "embed" festgelegt.

"embed"
default
Dict

Ein Array, das den Parameter "source_type" enthält. Dieser Parameter hat einen zeichenfolgenbasierten Wert aus den im Parameter "supported_source_types" angegebenen Optionen.

oembed

Datei

Dateifelder ermöglichen es dem Benutzer, eine Datei in den Datei-Manager oder den Dokument-Manager hochzuladen, und erleichtern das Anhängen von Elementen, die sich an diesen Orten befinden. Dies kann für die Verknüpfung mit PDF-Dateien oder Dateien anderer Formate nützlich sein. Für die Anzeige von Bildern auf einer Seite sollten Sie das Bildfeld verwenden.

Dateifelder werden in Modulen unterstützt.

Dateifeld
// Email address field { "name" : "file_field", "label" : "File", "required" : false, "locked" : false, "type" : "file", "picker" : "file", "default" : null }
Dateifeld
ParameterTypDescription Default
default
String

Datei-URL

null
picker
String

Zulässige Werte: "file", "document", "image".
Die Auswahl zeigt entweder in den Datei-Manager oder in den Dokument-Manager hochgeladene Elemente abhängig von diesem Parameter an.

file

Follow-up-E-Mail

In Follow-up-E-Mail-Feldern kann ein Content-Autor eine E-Mail angeben, die als Reaktion auf eine Formulareinsendung gesendet wird. Dies funktioniert in Verbindung mit dem HubL-Formular-Tag über den simple_email_campaign_id-Parameter.

Felder für Follow-up-E-Mails werden in Modulen unterstützt.

Follow-up-E-Mail-Feld
// Followup email field { "name" : "followup_email", "label" : "Followup email", "required" : false, "locked" : false, "type" : "followupemail", "default" : null }
E-Mail-Adressfeld
ParameterTypDescription Default
default
String

E-Mail-ID

null

Schriftart

Schriftartfelder bieten Content-Autoren grundlegende Steuerelemente für die Gestaltung der Schriftart. Content-Autoren können die Größe, Farbe, Schriftartfamilie und das Format (fett, kursiv und unterstrichen) wählen. Bei den aufgelisteten Schriftarten handelt es sich um Google-Schriftarten und standardmäßige websichere Schriftarten. 

Schriftartfelder werden sowohl in Designs als auch in Modulen unterstützt. Schriftartfelder können als Stilfelder verwendet werden.

Schriftartfeld
// Font field { "name" : "font", "label" : "Font", "required" : false, "locked" : false, "load_external_fonts" : true, "type" : "font", "default" : { "size" : 12, "font":"Merriweather", "font_set":"GOOGLE", "size_unit" : "px", "color" : "#000", "styles" : { } }, "visibility" : { "hidden_subfields" : { "font": true, "size": true } } }

Hinweis: Die Schriftartfamilie wird durch die Kombination von font und font_set bestimmt. Sie müssen beides haben, um die Schriftart zu laden. Beim Vererben von Feldern bedeutet dies, dass Sie beide Werte vererben müssen.

Schriftartfeld
ParameterTypDescription Default
default
Object

Schriftartobjekt mit Einstellungen für Größe, Größeneinheit, Farbe und Stile für fett, kursiv und unterstrichen.

{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }
load_external_fonts
Boolean

HubSpot lädt die ausgewählte Webschriftart automatisch auf die Seite, wenn die Schriftart ausgewählt und von HubL in einem Stylesheet oder in einem Modul referenziert wird. Setzen Sie diesen Wert auf „false“, wenn Sie die Schriftart bereits auf die Seite geladen haben, damit die Schriftart nicht zweimal geladen wird.

true
visibility
Object

Mithilfe des verschachtelten hidden_subfieldsObjekts können Sie einen booleschen Wert für die auszublendenden Steuerelemente des Schriftartfeldes festlegen. Zu den Unterfeldern gehören: font, size, bold, italic, underline, and color.

variant
String

Wenn Sie eine Google-Schriftart verwenden, geben Sie die Variante der Schriftart an, die Sie verwenden möchten. Um zum Beispiel von einer Schriftart die Version mit 700er-Stärke zu verwenden, setzen Sie diesen Wert auf "700". Um von einer Schriftart die kursive Version mit 400er-Stärke zu verwenden, setzen Sie diese auf "400i".

Formular

Formularfelder ermöglichen es einem Content-Autor, ein Formular in seinem Account zu bestimmen. Damit können Sie dann mit dem HubL-Formular-Tag ein Formular auf einer Seite rendern. 

Formularfelder werden in Modulen unterstützt.

form field-Aug-21-2020-08-09-55-35-PM
// Form field { "name" : "form", "label" : "Form", "required" : false, "locked" : false, "type" : "form", "default" : { "form_id" : "f7110408-1935-4ed3-8a8e-293bb1c9d1ec", "response_type" : "inline", "message" : "Thanks for submitting the form.", "gotowebinar_webinar_key" : null, "form_type" : "HUBSPOT" } }
E-Mail-Adressfeld
ParameterTypDescription Default
default
Object

Objekt für Formulare, das die ausgewählte Formular-ID, den Antworttyp und die Nachricht enthält.

{ "response_type" : "inline", "message" : "Thanks for submitting the form." }

Farbverlauf

In diesem Feld können Content-Autor Farbverläufe erstellen und konfigurieren. Zurzeit unterstützen lineare Farbverläufe bis zu 5 Farbstopps. Farbverlaufsfelder haben eine .css-Eigenschaft, die CSS basierend auf dem Wert des Feldes zurückgibt. Erfahren Sie mehr über die generierte CSS-Eigenschaft.

Farbverlaufsfelder werden in Modulen unterstützt. Farbverlaufsfelder können nur als Stilfelderverwendet werden.

Farbverlaufsfeld
// Gradient field { "name": "bg_gradient", "label": "Background gradient", "help_text": "Sets a gradient behind the content", "required": false, "type": "gradient", "default": { "colors": [{ "color": { "r": 0, "g": 0, "b": 0, "a": 1 } }, { "color": { "r": 255, "g": 255, "b": 255, "a": 1 } }], "side_or_corner": { "verticalSide": "BOTTOM", "horizontalSide": null } } }
E-Mail-Adressfeld
ParameterTypDescription Default
default
Object

Objekt, das Richtungseinstellungen für einen Farbverlauf ("side_or_corner") und Farbstopps für den Farbverlauf als ein Array von Objekten enthält.

HubDB-Zeile

HubDB-Zeilenfelder ermöglichen es einem Content-Autor, eine einzelne Zeile (oder mehrere Zeilen bei Verwendung von sich Wiederholfeldern) aus einer definierten Tabelle auszuwählen. Sie können dieses Feld dann verwenden, um benutzerdefinierte Listen, Tabellen, Ressourcen und mehr zu erstellen.

HubDB-Zeilenfelder werden in Modulen unterstützt.
HubDB-Zeilenfelder sind in CMS Hub Professional und Enterprise verfügbar.

HubDB-Zeilenfeld
// HubDB Row field { "name" : "hubdbrow_field", "label" : "HubDB row", "required" : false, "locked" : false, "table_name_or_id" : "3096859", "columns_to_fetch" : [ "name", "price", "desc" ], "display_columns" : [ "name", "price", "desc" ], "display_format" : "%0 - %1 :::: %2", "type" : "hubdbrow", "default" : { "id" : 4450468943 } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
table_name_or_id
String

Der Name oder die ID der HubDB-Tabelle. Hierbei handelt es sich um ein Pflichtfeld.

columns_to_fetch
Array

Ein Array von Spaltennamen, die aus der Tabelle abgerufen werden sollen. Wenn es leer bleibt, werden alle Spalten der Tabelle zurückgegeben.

[]
display_columns
Array

Ein Array von Spaltennamen, die im Auswahl-Label verwendet werden sollen. Wenn dieses Feld leer bleibt, wird nur die erste Spalte der Tabelle zurückgegeben.

[]
display_format
String

Das Format, in dem die Spaltendaten im HubDB-Zeilenselektor mithilfe des Prozentzeichens und der Zahl zur Bezeichnung einer Spalte angezeigt werden sollen.
Bsp: %0 (%1) würde als Column0Value (Column1Value) angezeigt

""
default
Object

Objekt, das "id" für die Einstellung der Standard-Hubdb-Zeile enthält.

{ “id” : null }

HubDB-Tabelle

HubDB-Tabellenfelder ermöglichen es einem Content-Autor, eine HubDB in seinem Account zu bestimmen. Damit können Sie dann mit dem HubL-Formular-Tag ein Formular auf einer Seite rendern. Gibt die Tabellen-ID zurück, die Sie mit den HubDB-HubL-Funktionen verwenden können.

HubDB-Tabellenfelder werden in Modulen unterstützt. HubDB-Tabellenfelder sind verfügbar in CMS-HubProfessional und Enterprise.

HubDB-Feld
// HubDB Table field { "name" : "recipe_table", "label" : "Recipe Table", "required" : false, "locked" : false, "type" : "hubdbtable", "default" : 2010782 }
E-Mail-Adressfeld
ParameterTypDescription Default
default
String

HubDB-Tabellen-ID

null

Symbol

Symbolfelder bieten eine Benutzeroberfläche für die Auswahl von Symbolen, die es Content-Autoren erleichtert, Symbole zu Ihren Modulen hinzuzufügen. Das Symbolfeld ist mit FontAwesome-Symbolen vorgeladen.

Symbolfelder werden in Modulen unterstützt. Symbolfelder können als Stilfelder verwendet werden.

Symbolfeld
// Icon field { "name" : "icon_field", "label" : "Icon", "required" : false, "locked" : false, "icon_set" : "fontawesome-5.14.0", "type" : "icon", "default" : { "name" : "accessible-icon", "unicode" : "f368", "type" : "REGULAR" } }
Symbolfeld
ParameterTypDescription Default
default
Object

Symbolobjekt

icon_set
String

Der zu verwendende FontAwesome-Symbolsatz. Mögliche Werte sind:
fontawesome-5.14.0
fontawesome-5.0.10

fontawesome-5.14.0

Bild

Bildfelder bieten eine einfache Benutzeroberfläche für Content-Autoren, um Bilder zu einem Modul oder Design hinzuzufügen. Bildfelder bieten eine Benutzeroberfläche zur Dateiauswahl, die Bilder vom Datei-Manager auflistet. Da Bilder auf unterschiedliche Weise verwendet und angezeigt werden können, können Entwickler die Größenoptionen, die dem Content-Autor in der Benutzeroberfläche zur Verfügung stehen, einschränken und ein Lazy Loading von Bildern ermöglichen.

Bildfeld

Bildfelder werden in Modulen unterstützt.
Bilder können als Stilfelder verwendet werden.
Sie sollten Bildfelder nur dann als Stilfelder verwenden, wenn das Bild rein präsentativ ist, keine Bedeutung vermittelt und kein Hintergrundbild ist. Dies entspricht den bewährten Verfahren für Barrierefreiheit.

// Image field { "name" : "image_field", "label" : "Image", "required" : false, "locked" : false, "responsive" : true, "resizable" : true, "show_loading" : false, "type" : "image", "default" : { "size_type" : "exact", "src" : "", "alt" : "image-alt-text", "loading" : "lazy", "width" : 128, "height" : 128, "max_width" : 128, "max_height" : 128 } }
Link-Feld
ParameterTypDescription Default
default
Object

Legt Eigenschaften für Bildgröße, ALT-Text und mehr fest. Kann die folgenden Eigenschaften enthalten: 

  • size_type: ob das Bild automatisch oder manuell verkleinert wird:
    • "auto": HubSpot passt die Größe des Bildes automatisch anhand seiner ursprünglichen Maße an.
    • "auto_custom_max": HubSpot passt die Größe des Bildes automatisch an die maximalen Maße an, die mit den Eigenschaften "max_height" und "max_width" festgelegt wurden.
    • "exact": HubSpot passt die Größe des Bildes an die mit den Eigenschaften "height" und "width" festgelegten Maße an.
  • src: die URL des Standardbildes. Muss ein absoluter Pfad zu einem Bild sein.
  • alt: der Standard-ALTt-Text für das Bild.
  • loading: dieLazy Loading-Optionen des Bildes. Kann als "disabled" (Standard), "eager" oder "lazy" festgelegt werden.
{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }
responsive
Boolean

Bestimmt, ob sich das Bild responsiv (für Mobilgeräte optimiert) verhalten oder eine feste Höhe und Breite haben soll.

true
show_loading
Boolean

Bestimmt, ob die Steuerelemente für ein Lazy Loading des Bildes im Seiten-Editor angezeigt werden.

false

Link-Felder bieten eine einfache Benutzeroberfläche für Content-Autoren, um Links zu URLs und E-Mail-Adressen bereitzustellen. Für externe Links wählen Content-Autoren die Option „Extern“. Für E-Mail-Links „E-Mail-Adresse“. Für Inhalte, die in CMS Hub gehostet werden, können sie schließlich „Content“ verwenden, das eine Liste aller Seiten und Blog-Beiträge im Account anzeigt, „Datei“, das Dateiressourcen anzeigt, und „Blog“, das alle Blog-Beinträge im Account anzeigt. Link-Felder sind URL-Feldern sehr ähnlich, mit dem entscheidenden Unterschied, dass sie eine Benutzeroberfläche für „In neuem Fenster öffnen“ und „Als Nofollow-Link klassifizieren“ bieten. Wenn Sie nicht wollen, dass Content-Autoren diese Kontrolle haben, verwenden Sie das URL-Feld.

Link-Felder werden in Modulen unterstützt.

Link-Feld
// Link field { "name" : "link", "label" : "Link", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "link", "show_advanced_rel_options" : false, "default" : { "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false } }
Link-Feld
ParameterTypDescription Default
default
Object

URL-Objekt

{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }
supported_types
Array

Liste der Typen von Links, die Content-Autoren in diesem Feld auswählen können. Entfernen Sie Typen aus der Liste, auf Content-Autoren keinen Zugriff haben sollen.

[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]
show_advanced_rel_options
Boolean

Ob Content-Autoren die erweiterten relativen Optionen anzeigen können. 

false

Mit Logofeldern können Content-Autoren Logobilder angeben, die auf einer Seite verwendet werden sollen, wobei als Standard das Logo der Domain verwendet wird. Dies ist nützlich für Kopf- und Fußzeilen von Websites, die das Unternehmenslogo enthalten können.

Logofelder werden in Modulen unterstützt.

Logofeld
// Logo field { "name" : "logo", "label" : "Logo", "required" : false, "locked" : false, "type" : "logo", "default" : { "override_inherited_src" : false, "src" : null, "alt" : null } }
Link-Feld
ParameterTypDescription Default
default
Object

Logoobjekt

{ "override_inherited_src" : false, "src" : null, "alt" : null }

Menü

Menüfelder bieten eine einfache Benutzeroberfläche für Content-Autoren zum Erstellen, Bearbeiten und Auswählen eines Navigationsmenüs, das auf anderen Seiten wiederverwendet werden kann. Dieses Feld eignet sich hervorragend für Menüs, die auf mehreren Seiten verwendet werden, z. B. die Hauptnavigation, die Fußzeilennavigation und andere globale Inhalte.  Verwenden Sie dieses Feld in Verbindung mit dem menu-Tag oder der menu()-Funktion, um ein Menü innerhalb Ihres Moduls zu rendern.

Verwenden Sie für Menüs, deren Wiederverwendung auf anderen Seiten nicht sinnvoll ist, z. B. ein Inhaltsverzeichnis, das einfache Menüfeld.

Menüfelder werden in Modulen unterstützt.

Menüfeld
// Menu field { "name" : "menu", "label" : "Menu", "required" : false, "locked" : false, "type" : "menu", "default" : 12345678911 }
Link-Feld
ParameterTypDescription Default
default
Integer

Die Menü-ID für das Menü. Der Standardwert von null wird im Standardmenü unter der Navigation angezeigt.

null

Zahl

Zahlenfelder bieten eine einfache Benutzeroberfläche für Content-Autoren, um numerische Werte und Optionen einzugeben oder anzupassen. Dies kann für die Erstellung von prozentualen Artikeln oder für alles, wo Zahlen für die Eingabe benötigt werden, verwendet werden.

Zahlenfelder werden in Modulen unterstützt. Zahlenfelder können als Stilfelder verwendet werden.

Zahlenfeld
// Number field { "name" : "number_field", "label" : "Number", "required" : false, "locked" : false, "display" : "slider", "min" : 1, "max" : 10, "step" : 1, "type" : "number", "prefix": "", "suffix" : "", "default" : null }

Hinweis: Die Verwendung der suffix- und prefix-Parameter hat keinen Einfluss auf den numerischen Wert des Feldes. Sie dienen lediglich der Anzeige im Content-Editor.

Link-Feld
ParameterTypDescription Default
default
Number

Eine Standardzahl, die verwendet werden soll.

null
prefix
String

Wird dem Zahlenfeld als Präfix hinzugefügt.

suffix
String

Wird dem Zahlenfeld als Suffix hinzugefügt.

Seite

Seitenfelder bieten eine Benutzeroberfläche für Content-Autoren zur Auswahl von Seiten und Landing-Pages.

Der von einem Seitenfeld zurückgegebene Wert ist die Seiten-ID der ausgewählten Seite. In Verbindung mit der content_by_id- oder content_by_ids-Funktion können Sie die Daten der ausgewählten Seiten auf der aktuellen Seite verwenden.

Seitenfelder werden in Modulen unterstützt.

// Page field { "name" : "page_field", "label" : "Page", "help_text" : "Pulls data from the selected page.", "required" : false, "locked" : false, "placeholder" : "Page to pull from", "type" : "page", "default" : null }
Link-Feld
ParameterTypDescription Default
default
Integer

Eine Standard-Seiten-ID, die ausgewählt werden soll.

null

Rich-Text

Rich-Text-Felder bieten Content-Autoren eine WYSIWYG-Text-Editor-Umgebung. Wenn der Wert eines Rich-Text-Feldes gedruckt wird, wird er als HTML gedruckt. Wenn Sie nicht möchten, dass Content-Autoren Formatierungsmöglichkeiten haben, verwenden Sie Textfelder.

Rich-Text-Felder werden in Modulen unterstützt.

Rich-Text-Feld
// Rich text field { "name" : "description", "label" : "Description", "required" : false, "locked" : false, "type" : "richtext", "default" : null }
Link-Feld
ParameterTypDescription Default
default
String

Zeichenfolge des anzuzeigenden Inhalts unterstützt HTML. 

Hinweis: Sie können die get_asset_url-Funktion nicht innerhalb dieser Standardeigenschaft verwenden. 

""
enabled_features
Optional
Array

Eine Reihe von Elementen, mit denen Sie die Symbolleiste des Rich-Text-Editors konfigurieren und festlegen können, welche Optionen für Content-Editoren verfügbar sind. 

Einfaches Menü

Einfache Menüfelder bieten eine einfache Benutzeroberfläche für Content-Autoren, um ein Navigationsmenü zu erstellen, das nicht auf anderen Seiten wiederverwendet werden kann. Für Menüs, die wiederverwendbar sein sollen, verwenden Sie das Menüfeld. Dies ist z. B. für ein Inhaltsverzeichnis erforderlich, das auf sehr langen Seiten auf Überschriften verlinkt, oder für eine Liste von Links zu Inhalten, die nur auf der aktuellen Seite sinnvoll sind.

Einfache Menüfelder werden in Modulen unterstützt.

Einfaches Menüfeld
// Simple menu field { "name" : "toc_menu", "label" : "Table of Contents", "required" : false, "locked" : false, "type" : "simplemenu", "default" : [ { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "Why is product marketing important?", "linkUrl" : null, "linkParams" : null, "linkTarget" : null, "type" : "NO_LINK", "children" : [ { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "Product Marketing Responsibilities", "linkUrl" : "#product-marketing-responsibilities", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "1. Identify the buyer personas and target audience for your product.", "linkUrl" : "#step1", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "2. Successfully create, manage and carry out your product marketing strategy.", "linkUrl" : "#step2", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] } ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "How HubSpot can help", "linkUrl" : "https://hubspot.com", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] } ] }
Link-Feld
ParameterTypDescription Default
default
Array of objects

JSON-Struktur für ein Menü und untergeordnete Menüebenen.

[]

Abstand

Dieses Feld bietet eine Benutzerschnittstelle (UI) für Content-Autoren zum Festlegen von Auffüllungen und Rändern. Abstandsfelder haben eine .css-Eigenschaft, die CSS basierend auf dem Wert des Feldes zurückgibt. Erfahren Sie mehr über die generierte CSS-Eigenschaft.

Abstandsfelder werden in Modulen unterstützt.
Abstandsfelder können nur als Stilfelder verwendet werden.

Screenshot des im Seiten-Editor erweiterten Feldes für den Abstandsstil
// Spacing field { "name": "img_spacing", "label": "Spacing around image", "required": false, "type": "spacing", "default": { "padding": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" }, "left": { "value": 10, "units": "px" }, "right": { "value": 10, "units": "px" } }, "margin": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" } } } }
Link-Feld
ParameterTypDescription Default
default
Object

Objekt, das ein Auffüllungsobjekt und ein Randobjekt enthält. „margin“ unterstützt derzeit nur die Einstellungen "top" und "bottom".

{}

Tag

Tag-Felder bieten eine Blog-Tag-Auswahl für Content-Autoren. Diese Tag-Auswahl liefert eine Blog-Tag-ID, die dann in Blog-Tag-bezogenen Funktionen wie blog_tag_url und blog_recent_tag_posts verwendet werden kann.

Tag-Felder werden in Modulen unterstützt.

Tag-Feld
// Tag field { "id" : "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9", "name" : "blog_tag", "label" : "Blog Tag", "required" : false, "locked" : false, "tag_value" : "SLUG", "type" : "tag", "default" : null }
Tag-Feld
ParameterTypDescription Default
default
String

Blog-Tag-ID

null

Text

Textfelder bieten Content-Autoren eine einfache Textbearbeitung ohne Rich-Text-Funktionen. Textfelder sind zunächst einzeilig, können aber zu Textbereichen erweitert werden, die mehrere Zeilen enthalten. Verwenden Sie diese, wenn Sie nicht wollen, dass Content-Autoren die Kontrolle über die Formatierung haben. Wenn Sie Steuerelemente für die Formatierung bereitstellen möchten, verwenden Sie Rich-Text-Felder.

Textfelder werden in Modulen unterstützt.

Textfeld
// Text field { "name" : "product_name", "label" : "Product Name", "required" : false, "locked" : false, "validation_regex" : "", "allow_new_line" : false, "show_emoji_picker" : false, "type" : "text", "default" : "" }
Link-Feld
ParameterTypDescription Default
default
String

Textzeichenfolge.

""

Textausrichtung

Dieses Feld bietet Content-Autoren eine Möglichkeit, Textinhalte innerhalb eines Containers auszurichten. Dies sollte nicht zum Ausrichten anderer Elemente verwendet werden, da es dafür einen eigenen Feldtyp gibt.

Textausrichtungsfelder werden in Modulen unterstützt. Textausrichtungsfelder können nur als Stilfelder verwendet werden.

Textausrichtungsfeld
// text alignment field { "name": "heading_align", "label": "Heading alignment", "required": false, "type": "textalignment", "default": { "text_align": "LEFT" } }
Blog-Feld
ParameterTypDescription Default
default
Object

Objekt, das horizontal_align und vertical_align enthält.

alignment_direction
String

Legt fest, ob nur horizontale, nur vertikale oder beide Ausrichtungssteuerelemente angezeigt werden sollen. Kann Folgendes sein:

  • HORIZONTAL
  • VERTICAL
  • BOTH
BOTH

URL

URL-Felder bieten eine ähnliche Erfahrung wie Link-Felder. Bereitstellung einer Benutzeroberfläche für Content-Autoren zum Hinzufügen von Links. URL-Felder zeigen jedoch weder eine Benutzeroberfläche für das Öffnen in einem neuen Fenster an, noch klassifizieren Sie Links als Nofollow-Links. Verwenden Sie dieses Feld, wenn Sie als Entwickler die Werte dafür vorgeben möchten. Wenn Sie möchten, dass der Benutzer die Kontrolle hat, verwenden Sie stattdessen Linkfelder.

URL-Felder werden in Modulen unterstützt.

URL-Feld
// URL field { "name" : "url", "label" : "URL", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "url", "default" : { "content_id" : null, "href" : "http://example.com", "type" : "EXTERNAL" } }
Link-Feld
ParameterTypDescription Default
default
Object

URL-Objekt mit Typ, href-Attribut und Inhalts-ID (wenn der Inhalt eine Seite oder ein Beitrag auf HubSpot ist)

{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }
supported_types
Array

Liste der Typen von Links, die Content-Autoren in diesem Feld auswählen können. Entfernen Sie Typen aus der Liste, auf Content-Autoren keinen Zugriff haben sollen.

[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]

Videos

Videofelder bieten Content-Editoren die Möglichkeit, HubSpot Video zu ihrem Modulinhalt hinzuzufügen, ohne Rich-Text-Felder verwenden zu müssen.

Videofeld
//Video field { "id" : "ca4a319e-5b58-422e-47ac-49ce1b51b507", "name" : "videoplayer_field", "label" : "Video", "required" : false, "locked" : false, "type" : "videoplayer", "show_advanced_options" : false, "default" : { "player_id" : 32173842991, "height" : 1224, "width" : 1872, "conversion_asset" : { "type" : "CTA", "id" : "c3e4fa03-2c69-461d-b9af-22b2fde86bc7", "position" : "POST" }, "loop_video" : false, "mute_by_default" : false, "autoplay" : false, "hide_control" : false } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
default
Object

Videoobjekt mit Einstellungen für player_id, height, width, size_type, conversion_asset, loop_video, mute_by_default, autoplay und hide_control.

[]
show_advanced_options
Boolean

Ob Content-Autoren erweiterte Standardoptionen sehen können.

false

conversion_asset object-Parameter

Use this table to describe parameters / fields
ParameterTypeDescription Default
type
String

Akzeptiert entweder "FORM", "CTA" oder ""

""
id
String

Die ID des Formulars oder des CTA-Typs

""
position
String

Ob das Konversionselement vor dem Beginn oder nach dem Ende des Videos angezeigt werden soll. Akzeptiert entweder "PRE" oder "POST".

""

War dieser Artikel hilfreich?
Dieses Formular dient dazu, Feedback zu unserer Entwicklerdokumentation zu sammeln. Wenn Sie uns Ihre Meinung zu HubSpot-Produkten mitteilen möchten, teilen Sie diese bitte im Ideenforum der Community.