Felder für Module und Designs

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, sowie deren verfügbare Eigenschaften.

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

Alle Felder haben eine Reihe gemeinsamer Eigenschaften. Dies sind allgemeine Felder, z. B. der Name des Feldes oder der Hilfetext, der für Content-Autoren angezeigt wird, die das Feld im Modul oder Design verwenden. 

// 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
name
Zeichenfolge

Der Name des Feldes, auf den Sie sich beziehen, wenn Sie das Feld und seine Werte im Modul oder Design einbinden. Darf keine Leerzeichen oder Sonderzeichen enthalten.

 richtext_field, date_field, etc.
label
Zeichenfolge

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

 Rich text field, Date field, etc.
required
Boolesch

Legt fest, ob das Feld im Editor leer gelassen werden kann. Bei true kann der Inhalt nicht ohne einen Wert im Feld veröffentlicht werden.

 false
locked
Boolesch

Legt fest, ob das Feld im Content-Editor bearbeitet werden kann. Wenn true, erscheint das Feld nicht im Content-Editor.

 false
type
Zeichenfolge

Der Typ von Feld. Feldtypen sind pro Feld eindeutig. In der Dokumentation unten ist der Typ für jedes Feld aufgeführt.
inline_help_text
Zeichenfolge

Text, der inline unter dem Label des Feldes angezeigt wird (maximal 400 Zeichen). Eignet sich am besten für Informationen, die für die Verwendung des Feldes erforderlich sind.

Sie können die folgenden HTML-Tags hinzufügen (andere Tags werden beim Rendern ignoriert):

a, b, br, em, i, p, klein, stark, span.
help_text
Zeichenfolge

Text, der im Editor innerhalb eines Tooltips beim Darüberbewegen des Mauszeigers angezeigt wird, um den Content-Autor zu unterstützen (maximal 300 Zeichen). Eignet sich am besten für zusätzliche Informationen, die für die Verwendung des Feldes nicht erforderlich sind.

Sie können die folgenden HTML-Tags hinzufügen (andere Tags werden beim Rendern ignoriert):

a, b, br, em, i, p, klein, stark, span.
id
Zeichenfolge

Die eindeutige ID des Feldes, die von HubSpot festgelegt wird. Wenn Sie lokal entwickeln, müssen Sie diese ID nicht angeben.
visibility
Array

Legt die Anzeigebedingungen für das Feld fest. Sie können beispielsweise festlegen, dass ein Feld nur angezeigt wird, wenn ein anderes Kontrollkästchen ausgewählt wurde. Erfahren Sie mehr über Sichtbarkeit.
display_width
Zeichenfolge

Standardmäßig werden die Felder im Editor in voller Breite angezeigt. Wenn zwei aufeinanderfolgende Felder in der fields.json-Datei auf half_width festgelegt sind, werden sie stattdessen nebeneinander im Editor angezeigt.

Ausrichtung

Ermöglicht Content-Autoren, ein Element innerhalb eines Containers zu positionieren. Um die Textausrichtung zu aktivieren, verwenden Sie stattdessen das Textausrichtungsfeld. 

Ausrichtungsfelder werden in Modulen unterstützt und 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
Objekt

Objekt, das horizontal_align und vertical_align enthält.
alignment_direction
Zeichenfolge

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 und 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
Objekt

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
Boolesch

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

 false
display
Zeichenfolge

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

 checkbox

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
Boolesch

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

 {}

Auswahl

Mit Auswahlfeldern kann ein Content-Autor ein oder mehrere Elemente aus einer Liste von Optionen auswählen. Mit der display-Eigenschaft können Sie festlegen, dass die Optionen in einem Dropdown-Menü, in einer Optionsfeld-Auswahl, in Kontrollkästchen oder in einer Reihe von Schaltflächen angezeigt werden. Erfahren Sie unten mehr über Anzeigeoptionen für Auswahlfelder.

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, "multiple":"true", "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 mit den auswählbaren Optionen, formatiert als eindeutiger interner Wert, gefolgt vom Label.

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

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

Optionales Feld, mit dem mehrere Optionen ausgewählt werden können, wenn auf true festgelegt.

Legen Sie display auf checkbox or select fest, um zu konfigurieren, ob das Feld als Liste von Kontrollkästchen oder als Dropdown-Menü angezeigt wird.

 false
display
Zeichenfolge

Legen Sie das Erscheinungsbild des Feldes mithilfe einer der folgenden Werte fest:

  • select: rendert ein Dropdown-Menü. Ermöglicht die Auswahl mehrerer Optionen, wenn multiple auf true festgelegt ist. 
  • checkbox: rendert eine Liste von auswählbaren Kontrollkästchen. Ermöglicht die Auswahl mehrerer Optionen, wenn multiple auf true und reordering_enabled auf false festgelegt ist.
  • radio: rendert eine Liste der Optionsschaltflächenoptionen. Ermöglicht nicht die Auswahl mehrerer Optionen.
  • buttons: rendert einen Satz von Schaltflächen basierend auf dem angegebenen preset-Wert. Ermöglicht nicht die Auswahl mehrerer Optionen.
 "select"
reordering_enabled
Boolesch
Wenn diese Option auf true festgelegt ist, können Content-Autoren die Optionen des Felds im Editor neu anordnen. Um dies zu ermöglichen, muss auch multiple auf true festgelegt werden.
 false
preset
Zeichenfolge

Konfiguriert die zu verwendende Schaltflächenvoreinstellung, wenn display auf buttons festgelegt ist. Für jede Voreinstellung müssen Sie die choices-Label so konfigurieren, dass sie mit einem bestimmten Satz von Werten übereinstimmen. Erfahren Sie unten mehr über diese Voreinstellungsoptionen.

Voreinstellungen für Auswahlschaltflächen

Um ein Auswahlfeld so zu konfigurieren, dass Schaltflächen anstelle eines Dropdown-Menüs, Kontrollkästchens oder einer Optionsfeld-Auswahl angezeigt werden, können Sie eine der folgenden Voreinstellungen verwenden. Jede Voreinstellung ermöglicht einen bestimmten Satz von Optionslabeln, die Sie in das choices-Array aufnehmen müssen. Diese Label können nicht angepasst werden.

// Layout choice button { "name" : "layout", "type" : "choice", "label" : "Layout", "required" : false, "locked" : false, "display" : "buttons", "preset" : "layout", "choices" : [ [ "cards_value", "cards" ], [ "tiles_value", "tiles" ], ["minimal_value", "minimal"] ] }
Voreinstellung Auswahlabels Beispiel
expand_icon caret | plus choice-button-presets_1

 
layout cards | tiles | minimal choice-button-presets_6

 
icon_size small | medium | large choice-button-presets_5

 
social_icon_size small | medium | large choice-button-presets_4

 
icon_background_shape none | square | rounded | circle choice-button-presets_3

 
social_icon_background_shape none | square | rounded | circle choice-button-presets_2

 

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.

Standardmäßig ist die Deckkrafteingabe eines Farbfelds für E-Mail-Module ausgeblendet, da einige E-Mail-Clients die Deckkraftregeln nicht einhalten. Sie können das Deckkraftfeld für E-Mail-Module anzeigen, indem Sie show_opacity auf true festlegen.

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

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

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

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

Legt fest, ob die Deckkrafteingabe angezeigt wird.

  • true: die Deckkrafteingabe wird angezeigt.
  • false: die Deckkrafteingabe ist ausgeblendet.
  • Wenn nicht definiert, werden Deckkrafteingaben nicht in E-Mail-Modulen, aber in anderen Modultypen angezeigt.
 undefined

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
Zeichenfolge

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
Zeichenfolge

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
Objekt

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

 null

CRM-Objekteigenschaft

Verwenden Sie das CRM-Objekteigenschaftsfeld, um auf Eigenschaftsmetadaten, z. B. das Label und den Eigenschaftsnamen, von einem angegebenen Objekttyp zuzugreifen. Dadurch können Content-Autoren aus Objekteigenschaften auswählen, wenn Eigenschaftsdetails auf einer Seite angezeigt werden müssen.

Beispielsweise können Sie dieses Feld zu einem benutzerdefinierten Tabellenmodul hinzufügen, um Tabellenüberschriften basierend auf den ausgewählten Eigenschaften auszufüllen.

CRM-Objektfelder werden in Modulen unterstützt. 

crm-object-property-dropdown-menu0
// fields.json { "name" : "crmobjectproperty_field", "label" : "CRM object property", "required" : true, "locked" : false, "object_type" : "contact", "type" : "crmobjectproperty", "default" : { "property" : "field_of_study" } }
CRM-Objektfeld
ParameterTypDescription Default
object_type
Erforderlich
Zeichenfolge

Typ von CRM-Objekt, von dem der Benutzer wählen kann. Hier erfahren Sie mehr über unterstützte CRM-Objekttypen.
default
Objekt

Enthält die Standardeigenschaft, die angezeigt werden soll.
Darüber hinaus können Sie die folgenden Snippets verwenden, um andere Objektdetails zurückzugeben:
  • {{ module.fieldname.property }}: gibt den internen Namen der Eigenschaft zurück.
  • {{ module.fieldname.property_definition.label }}: gibt das Label der Eigenschaft zurück.
  • {{ module.fieldname.property_definition.type }}: gibt den Eigenschaftstyp (z. B. string) zurück.

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
Zeitstempel

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 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
Zeitstempel

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 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
Zeichenfolge

Dieser Parameter ist immer auf "embed" festgelegt.

 "embed"
default
Dictionary

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
Zeichenfolge

Datei-URL

 null
picker
Zeichenfolge

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
Zeichenfolge

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 standardmäßige websichere Schriftarten. Diese Schriftarten stammen von Google Fonts, aber von HubSpot direkt auf der Domain bereitgestellt, auf die die Seite geladen wird.

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

Schriftartfeld

Bitte beachten:

  • Die Schriftartfamilie wird durch die Kombination der Eigenschaften font und font_set bestimmt. Sie müssen beides berücksichtigen, um die Schriftart zu laden. Beim Vererben von Feldern bedeutet dies, dass Sie beide Werte übernehmen müssen.
  • Das Ausblenden von CSS-bezogenen Unterfeldern mit visibility verhindert nicht, dass CSS im Styling ausgegeben wird, das im Feldobjekt zurückgegeben wird. Sie müssen das CSS weiterhin manuell in das styles-Objekt einschließen.
// 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 } } }
Schriftartfeld
ParameterTypDescription Default
default
Objekt

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
Boolesch

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
Objekt

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
Zeichenfolge

Wenn Sie eine Webschriftart 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 { "id" : "idNumber", "name" : "form_field_name", "display_width" : null, "label" : "Form", "required" : false, "locked" : false, "type" : "form", "disable_inline_form_editing": true, "required_property_types": ["TICKET"], "default" : { "response_type" : "inline", "message" : "Thanks for submitting the form." } }
E-Mail-Adressfeld
ParameterTypDescription
default
Objekt

Ein Objekt, das die Antwortdetails für die Formulareinsendung enthält. Umfasst die folgenden Parameter:

  • response_type, der einer der folgenden sein kann:
    • inline: eine Inline-Textnachricht. 
    • redirect: leitet den Besucher nach dem Einsenden weiter.
  • message: der Text, der nach dem Einsenden des Formulars angezeigt wird.
  • redirect_id: Bei weitergeleiteten Formularen auf eine HubSpot-Inhalts-ID festgelegt, um einsendende Benutzer auf eine HubSpot-Seite weiterzuleiten.
  • redirect_url: Bei weitergeleiteten Formularen auf eine bestimmte URL festgelegt, um einsendende Benutzer auf eine Seite weiterzuleiten.
disable_inline_form_editing
Zeichenfolge

Legen Sie die disable_inline_form_editing-Eigenschaft auf true fest, um alle Steuerelemente für die Inline-Bearbeitung von Formularen im Formularmodul auszublenden. Dazu gehören die Formularfelder, der Text der Einsenden-Schaltfläche, die Datenschutz- und Einwilligungsoptionen sowie CAPTCHA.

required_property_types
Array

Ein Array, das angibt, welche Formulare basierend auf den Eigenschaftstypen der Formularfelder ausgewählt werden können. Zu den Werten gehören: "CONTACT", "COMPANY" und "TICKET").

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
Objekt

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
Zeichenfolge

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
Zeichenfolge

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
Objekt

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
Zeichenfolge

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-6.4.2", "type" : "icon", "default" : { "name" : "accessible-icon", "unicode" : "f368", "type" : "REGULAR" } }
Symbolfeld
ParameterTypDescription Default
default
Objekt

Symbolobjekt
icon_set
Zeichenfolge

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

  • fontawesome-6.4.2
  • fontawesome-5.14.0
  • fontawesome-5.0.10
 fontawesome-5.0.10

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
Objekt

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
Boolesch

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

 true
show_loading
Boolesch

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

 false

Link

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_field", "display_width" : null, "label" : "Link", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ], "show_advanced_rel_options" : true, "type" : "link", "default" : { "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false } }
Link-Feld
ParameterTypDescription Default
default
Objekt

Die Standard-URL und das Link-Öffnungsverhalten. Dieses Objekt umfasst:

  • Ein url-Objekt, das Folgendes enthält:
    • content_id: Wenn Sie zu HubSpot-Content verlinken, die ID dieses Inhalts. Bei Verlinkung zu externem Content auf null festlegen.
    • type: der Typ der URL. Hier erfahren Sie mehr über unterstützte Typen.
    • href: die URL des Contents. Wenn Sie zu HubSpot-Content verlinken, legen Sie dies auf null fest und verwenden stattdessen content_id.
 { "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }
supported_types
Array

Die Typen von Links, die Content-Autoren auswählen können. Entfernen Sie Typen aus der Liste, auf Content-Autoren keinen Zugriff haben sollen. Gültige Werte sind:

  • EXTERNAL
  • CONTENT
  • FILE
  • EMAIL_ADDRESS
  • BLOG
  • CALL_TO_ACTION
  • PHONE_NUMBER
  • WHATSAPP_NUMBER
  • PAYMENT
 [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]
show_advanced_rel_options
Boolesch

Standardmäßig können Content-Autoren nur die Option no_follow auswählen.

Bei Festlegung auf truekönnen Content-Autoren außerdem Folgendes auswählen:

  • sponsored: ein gesponserter Link, z. B. ein bezahlter Anzeigenlink. 
  • user_generated_content: Content, der von Benutzern generiert wird, z. B. Foren.

Erfahren Sie mehr über Link-Attribute.

 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. Bei Logofeldern ist ebenfalls Lazy Loading möglich.

Logofelder werden in Modulen unterstützt.

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

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

 false
default
Objekt

Logoobjekt 

Wenn show_loading auf true festgelegt ist, können Sie eine loading-Eigenschaft hinzufügen, um die Lazy-Loading-Optionen des Bildes festzulegen. Die Optionen umfassen:

  • "disabled" (Standard)
  • "eager"
  • "lazy"
 { override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }

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
Ganzzahl

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, "placeholder": "50" }
Link-Feld
ParameterTypDescription Default
default
Zahl

Eine Standardzahl, die verwendet werden soll.

 null
prefix
Zeichenfolge

Wird dem Zahlenfeld als Präfix hinzugefügt.
suffix
Zeichenfolge

Wird dem Zahlenfeld als Suffix hinzugefügt.
placeholder
Zeichenfolge

Fügt dem Feld einen Platzhalterwert hinzu.

Suffix- und Präfix-Parameter dienen zur Anzeige im Content-Editor und haben keinen Einfluss auf den numerischen Wert des Felds. 

Seite

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

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.

Seitenfeld
// 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
Ganzzahl

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
Zeichenfolge

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 von Objekten

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", "limits": { "padding": { "top": { "max": 50, "min": 25, "units": ["px", "pt", "em"] }, "left": { "max": 50, "units": ["px", "pt", "em"] }, "bottom": { "max": 50, "units": ["px", "pt", "em"] } }, "margin": { "top": { "max": 50, "min": 25, "units": ["px", "pt", "em"] }, "bottom": { "max": 25, "units": ["Q", "rem", "em"] } } }, "default": { "padding": { "top": { "value": 25, "units": ["px", "pt", "em"] }, "bottom": { "value": 25 "units": ["px", "pt", "em"] }, "left": { "value": 25, "units": ["px", "pt", "em"]}, "right": { "value": 25, "units": ["px", "pt", "em"] } }, "margin": { "top": { "value": 20, "units": ["px", "pt", "em"] }, "bottom": { "value": 20, "units": ["px", "pt", "em"] } } } }
Link-Feld
ParameterTypDescription Default
default
Objekt

Legt die Standardabstandswerte fest.

Enthält padding- und margin-Objekte:

  • padding: kann top-, right-, bottom- und left-Objekte enthalten
  • margin: kann top- und bottom-Objekte enthalten

Verwenden Sie units, um die Einheiten festzulegen, die ein Content-Autor in HubSpot verwenden kann. Erfahren Sie im Folgenden mehr über Einheiten.

 {}
limits
Objekt

Legt die Richtlinien für den min- und max-Wert des Abstands fest. 

Enthält padding- und margin-Objekte:

  • padding: kann top-, right-, bottom- und left-Objekte enthalten
  • margin: kann top- und bottom-Objekte enthalten

Verwenden Sie units, um die Einheiten festzulegen, die ein Content-Autor in HubSpot verwenden kann. Erfahren Sie im Folgenden mehr über Einheiten.

Bei der Verwendung des Feldes „Abstand“ ist Folgendes zu beachten:

  • Sie müssen eine units-Liste einschließen, wenn Sie ein min oder max festlegen.
  • Die units-Eigenschaft unterstützt die folgenden Einheitentypen: %, ch, em, ex, in, lh, pc, pt, px, Q, rem, vh, vmax, vmin und vw.
  • Wenn ein Content-Autor alle Auffüllungen zusammen bearbeitet, verwendet HubSpot den höchsten min-Wert und den niedrigsten max-Wert. Darüber hinaus stehen Content-Autoren nur die von allen Seiten gemeinsam genutzten Einheiten zur Verfügung.

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
Zeichenfolge

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
Zeichenfolge

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
Objekt

Objekt, das horizontal_align und vertical_align enthält.
alignment_direction
Zeichenfolge

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", "PHONE_NUMBER", "WHATSAPP_NUMBER" ], "type" : "url", "default" : { "content_id" : null, "href" : "http://example.com", "type" : "EXTERNAL" } }
Link-Feld
ParameterTypDescription Default
default
Objekt

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. Typen sind:

  • EXTERN: rendert ein Texteingabefeld für eine externe URL.
  • CONTENT: rendert ein Dropdown-Menü mit der Website und den Landingpages des Accounts.
  • DATEI: rendert eine Dateiauswahl.
  • EMAIL_ADDRESS: rendert ein Texteingabefeld für eine E-Mail-Adresse.
  • BLOG: rendert ein Dropdown-Menü mit den Blog-Listing-Seiten des Accounts.
  • PHONE_NUMBER: rendert ein Texteingabefeld für eine Telefonnummer. Die Nummer muss mit + beginnen und 7 bis 15 Ziffern enthalten (ohne Ländercode).
  • WHATSAPP_NUMBER: rendert ein Dropdown-Menü mit den verknüpften WhatsApp-Nummern des Accounts.
 [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]

Video

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
Objekt

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
Boolesch

Ob Content-Autoren erweiterte Standardoptionen sehen können.

 false

conversion_asset object-Parameter

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

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

 ""
id
Zeichenfolge

Die ID des Formulars oder des CTA-Typs

 ""
position
Zeichenfolge

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.