Felder für Module und Designs

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

{
  "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
  "alias_mapping": {
    "property_aliases_paths": {
      "is_teaser_img": ["old_boolean_field_name"]
    }
  }
}

Parameter	Typ	Beschreibung	Standard
`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 des Feldes 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 einfügen (andere Tags werden beim Rendern ignoriert): `a`, `b`, `br`, small``em``p``strong``i``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 einfügen (andere Tags werden beim Rendern ignoriert): `a`, `b`, `br`, small``em``p``strong``i``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 des Feldes 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.
`alias_mapping`	Zeichenfolge	Ein Alias für das Feld, der vorhandene Feldwerte einer neuen Position zuordnet, ohne vorhandenen Content zu beschädigen. Dies kann hilfreich sein, wenn Sie ein Feld aktualisieren müssen, das derzeit in Live-Content verwendet wird, z. B. wenn Sie ein Feld von der Registerkarte Content auf die Registerkarte Stile verschieben. Erfahren Sie mehr über Aliaszuordnung.	`False`

Ausrichtung

JSON
React

{
  "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"
  }
}

Parameter	Typ	Beschreibung	Standard
`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`

import { ModuleFields, AlignmentField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Objekt	Objekt, das `horizontal_align` und `vertical_align` enthält.
`alignmentDirection`	Zeichenfolge	Legt fest, ob nur horizontale, nur vertikale oder beide Ausrichtungssteuerelemente angezeigt werden sollen. Kann Folgendes sein: `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

Hintergrundbild

JSON
React

{
  "name": "bg_image",
  "label": "Background image",
  "required": false,
  "type": "backgroundimage",
  "default": {
    "src": "https://example.com/img.png",
    "background_position": "MIDDLE_CENTER",
    "background_size": "cover"
  }
}

Parameter	Typ	Beschreibung	Standard
`default`	Objekt	Objekt, das das src-Attribut, die Hintergrundposition und die Hintergrundgröße des Bildes enthält.	`null`

import { ModuleFields, BackgroundImageField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Objekt	Objekt, das das src-Attribut, die Hintergrundposition und die Hintergrundgröße des Bildes enthält.	`null`

Blog

JSON
React

{
  "name": "blog",
  "label": "Blog",
  "required": false,
  "locked": false,
  "type": "blog",
  "default": 1234567890
}

Parameter	Typ	Beschreibung	Standard
`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`

import { ModuleFields, BlogField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`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

JSON
React

{
  "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
}

Parameter	Typ	Beschreibung	Standard
`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 aus. Kann entweder als a `toggle` oder als `checkbox` angezeigt werden.	`checkbox`

import { ModuleFields, BooleanField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`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 aus. Kann entweder als a `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

JSON
React

{
  "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
  }
}

Parameter	Typ	Beschreibung	Standard
`default`	Boolesch	Objekt mit Schlüssel für Rahmenradius, obere, untere, linke und rechte Seite.	`{}`

import { ModuleFields, BorderField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Boolesch	Objekt mit Schlüssel für Rahmenradius, obere, untere, linke und rechte Seite.	`{}`

Auswahl

JSON
React

{
  "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"
}

Parameter	Typ	Beschreibung	Standard
`choices`	Array	Array mit den auswählbaren Optionen, formatiert als eindeutiger interner Wert, gefolgt von 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 es auf `true` festgelegt ist. Legen Sie `display` auf `checkbox` oder `select` fest, um zu konfigurieren, ob das Feld als Liste von Kontrollkästchen oder als Dropdown-Menü angezeigt werden soll.	`false`
`display`	Zeichenfolge	Legt das Erscheinungsbild des Feldes mithilfe eines 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 auswählbarer Kontrollkästchen. Ermöglicht die Auswahl mehrerer Optionen, wenn `multiple` auf `true` festgelegt ist und `reordering_enabled` auf `false`. `radio`: rendert eine Liste von Radiobutton-Optionen. Ermöglicht nicht die Auswahl mehrerer Optionen. `buttons`: rendert eine Reihe von Schaltflächen basierend auf der angegebenen `preset`. 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 Feldes 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.

import { ModuleFields, ChoiceField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`choices`	Array	Array mit den auswählbaren Optionen, formatiert als eindeutiger interner Wert, gefolgt von 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 es auf `true` festgelegt ist. Legen Sie `display` auf `checkbox` oder `select` fest, um zu konfigurieren, ob das Feld als Liste von Kontrollkästchen oder als Dropdown-Menü angezeigt werden soll.	`false`
`display`	Zeichenfolge	Legt das Erscheinungsbild des Feldes mithilfe eines 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 auswählbarer Kontrollkästchen. Ermöglicht die Auswahl mehrerer Optionen, wenn `multiple` auf `true` festgelegt ist und `reordering_enabled` auf `false`. `radio`: rendert eine Liste von Radiobutton-Optionen. Ermöglicht nicht die Auswahl mehrerer Optionen. `buttons`: rendert eine Reihe von Schaltflächen basierend auf der angegebenen `preset`. Ermöglicht nicht die Auswahl mehrerer Optionen.	`"select"`
`reorderingEnabled`	Boolesch	Wenn diese Option auf `true` festgelegt ist, können Content-Autoren die Optionen des Feldes 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.

{
"name": "layout",
"type": "choice",
"label": "Layout",
"required": false,
"locked": false,
"display": "buttons",
"preset": "layout",
"choices": [
["cards_value", "cards"],
["tiles_value", "tiles"],
["minimal_value", "minimal"]
]
}

import { ModuleFields, ChoiceField } from '@hubspot/cms-components/fields';

Voreinstellung	Auswahlabel	Beispiel
`case`	`none` \| `upper` \| `lower`

Voreinstellung für Groß-/Kleinschreibung

Farbe

JSON
React

{
  "name": "bg_color",
  "label": "Background color",
  "required": false,
  "locked": false,
  "type": "color",
  "default": {
    "color": "#ff0000",
    "opacity": 100
  },
  "limited_options": ["#000000", "#ffffff"]
}

Parameter	Typ	Beschreibung	Standard
`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 wird ausgeblendet. Wenn nicht definiert, werden Deckkrafteingaben nicht in E-Mail-Modulen, aber in anderen Modultypen angezeigt.	`undefined`
`limited_options`	Array	Ein Array von Zeichenfolgen, das das Standardfarbraster ausblendet und die Liste der Favoritenfarben überschreibt (das Label „Favoriten“ wird zu „Verfügbare Farben“). Die Werte im Array müssen entweder ein Hex-Code oder ein `color`-Hex-Wert in einem beliebigen Vererbungspfad sein.	`undefined`

import { ModuleFields, ColorField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Objekt	Legt die standardmäßig ausgewählte Farbe und Deckkraft fest.	`{ "color" : "#ffffff", "opacity" : 100 }`
`showOpacity`	Boolesch	Legt fest, ob die Deckkrafteingabe angezeigt wird. `true`: Die Deckkrafteingabe wird angezeigt. `false`: Die Deckkrafteingabe wird ausgeblendet. Wenn nicht definiert, werden Deckkrafteingaben nicht in E-Mail-Modulen, aber in anderen Modultypen angezeigt.	`undefined`
`limitedOptions`	Array	Ein Array von Zeichenfolgen, das das Standardfarbraster ausblendet und die Liste der Favoritenfarben überschreibt (das Label „Favoriten“ wird zu „Verfügbare Farben“). Die Werte im Array müssen entweder ein Hex-Code oder ein `color`-Hex-Wert in einem beliebigen Vererbungspfad sein.	`undefined`

CTA

JSON
React

{
  "name": "cta",
  "label": "CTA",
  "required": false,
  "locked": false,
  "type": "cta",
  "default": null
}

Parameter	Typ	Beschreibung	Standard
`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`

import { ModuleFields, CTAField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`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

JSON
React

{
  "name": "crmobject_field",
  "label": "CRM object",
  "required": false,
  "locked": false,
  "object_type": "CONTACT",
  "properties_to_fetch": [],
  "type": "crmobject",
  "default": {
    "id": 1
  }
}

Parameter	Typ	Beschreibung	Standard
`object_type`	Zeichenfolge	Typ von CRM-Objekt, von dem der Benutzer wählen kann Unterstützte CRM-Objekttypen
`properties_to_fetch`	Array	Array von Eigenschaftsnamen, die dem Objekttyp zugeordnet sind, in Form einer Zeichenfolge. Beispiel: `"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`

import { ModuleFields, CRMObjectField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`objectType`	Zeichenfolge	Typ von CRM-Objekt, von dem der Benutzer wählen kann. Unterstützte CRM-Objekttypen
`propertiesToFetch`	Array	Array von Eigenschaftsnamen, die dem Objekttyp zugeordnet sind, in Form einer Zeichenfolge. 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

JSON
React

{
  "name": "crmobjectproperty_field",
  "label": "CRM object property",
  "required": true,
  "locked": false,
  "object_type": "contact",
  "type": "crmobjectproperty",
  "default": {
    "property": "field_of_study"
  }
}

Parameter	Typ	Beschreibung
`object_type`	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. Zeichenfolge) zurück.

import { ModuleFields, CRMObjectPropertyField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung
`objectType`	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.

Datum

JSON
React

{
  "name": "event_start_date",
  "label": "Event Date",
  "required": false,
  "locked": false,
  "type": "date",
  "default": 1577854800000
}

Parameter	Typ	Beschreibung	Standard
`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`

import { ModuleFields, DateField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`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

JSON
React

{
  "name": "event_start",
  "label": "Event Start",
  "required": false,
  "locked": false,
  "type": "datetime",
  "default": 1577854800000
}

Parameter	Typ	Beschreibung	Standard
`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`

import { ModuleFields, DateTimeField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`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

JSON
React

{
  "name": "emails",
  "label": "Email address",
  "required": false,
  "locked": false,
  "type": "email",
  "default": null
}

Parameter	Typ	Beschreibung	Standard
`default`	Array	Array von E-Mail-Adresszeichenfolgen `["bob@example.com", "dennis@example.com"]`	`null`

import { ModuleFields, EmailField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Array	Array von E-Mail-Adresszeichenfolgen `["bob@example.com", "dennis@example.com"]`	`null`

Einbettung

JSON
React

{
  "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"
  }
}

| Parameter | Typ | Beschreibung | Standard | | --- | --- | --- | --- | --- | | supported_source_types | Array | Unterstützte Quellentypen für oEmbed-URLs (oembed), HTML-eingebetteten Code (html) oder Media Bridge (media_bridge). | ["oembed", "html"] | | supported_oembed_types | Array | Unterstützter oEmbed-Typ, 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, von welchen Media Bridge-Anbietern Inhalte ausgewählt werden können. Hinweis: Dieser Parameter wird auch bei der Installation der App eines Media Bridge-Anbieters ausgefüllt. | | | type | Zeichenfolge | Dieser Parameter wird immer auf "embed" | "embed" | festgelegt. | | default | Dict | Ein Array, das den "source_type"-Parameter enthält. Dieser Parameter hat einen zeichenfolgenbasierten Wert aus den im "supported_source_types"-Parameter angegebenen Optionen. | oembed |

import { ModuleFields, EmbedField } from "@hubspot/cms-components/fields";

| Eigenschaft | Typ | Beschreibung | Standard | | --- | --- | --- | --- | --- | | supportedSourceTypes | Array | Unterstützte Quellentypen für oEmbed-URLs (oembed), HTML-eingebetteten Code (html) oder Media Bridge (media_bridge). | ["oembed", "html"] | | supportedOembedTypes | Array | Unterstützter oEmbed-Typ, einschließlich "photo", "video", "link" und "rich". Gilt nicht für die supported_source_types von HTML | [ "photo", "video", "link", "rich" ] | | supportedMediaBridgeProviders | Array | Array von Anbieter-IDs, die bestimmen, von welchen Media Bridge-Anbietern Inhalte ausgewählt werden können. Hinweis: Dieser Parameter wird auch bei der Installation der App eines Media Bridge-Anbieters ausgefüllt. | | | type | Zeichenfolge | Dieser Parameter wird immer auf "embed" | "embed" | festgelegt. | | default | Dict | Ein Array, das den "source_type"-Parameter enthält. Dieser Parameter hat einen zeichenfolgenbasierten Wert aus den im "supported_source_types"-Parameter angegebenen Optionen. | oembed |

Datei

JSON
React

{
  "name": "file_field",
  "label": "File",
  "required": false,
  "locked": false,
  "type": "file",
  "picker": "file",
  "default": null
}

Parameter	Typ	Beschreibung	Standard
`default`	Zeichenfolge	URL der Datei.	`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`

import { ModuleFields, FileField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Zeichenfolge	URL der Datei.	`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

JSON
React

{
  "name": "followup_email",
  "label": "Followup email",
  "required": false,
  "locked": false,
  "type": "followupemail",
  "default": null
}

Parameter	Typ	Beschreibung	Standard
`default`	Zeichenfolge	E-Mail-ID	`null`

import { ModuleFields, FollowUpEmailField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Zeichenfolge	E-Mail-ID	`null`

Schriftart

Hinweis:

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.

JSON
React

{
  "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
    }
  }
}

Parameter	Typ	Beschreibung	Standard
`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_subfields`-Objekts können Sie einen booleschen Wert für die auszublendenden Steuerelemente des Schriftartfeldes festlegen. Zu den Unterfeldern gehören: `font`, `size`, `bold`, `italic` `underline` und `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, legen Sie diesen Wert auf `"700"` fest. Um von einer Schriftart die kursive Version mit 400er-Stärke zu verwenden, legen Sie diese auf `"400i"` fest.
`limited_options`	Array	Array von Zeichenfolgen, das die Liste aller Schriftartoptionen überschreibt. Bei den Werten im Array muss es sich um einen hartcodierten Schriftartnamen oder eine Schriftart mit `name`-Eigenschaft in einem beliebigen Vererbungspfad handeln. Zum Beispiel: `theme.typography.body_text.name`.	`undefined`

import { ModuleFields, FontField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`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" : { } }`
`loadExternalFonts`	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_subfields`-Objekts können Sie einen booleschen Wert für die auszublendenden Steuerelemente des Schriftartfeldes festlegen. Zu den Unterfeldern gehören: `font`, `size`, `bold`, `italic` `underline` und `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, legen Sie diesen Wert auf `"700"` fest. Um von einer Schriftart die kursive Version mit 400er-Stärke zu verwenden, legen Sie diese auf `"400i"` fest.
`limitedOptions`	Array	Array von Zeichenfolgen, das die Liste aller Schriftartoptionen überschreibt. Bei den Werten im Array muss es sich um einen hartcodierten Schriftartnamen oder eine Schriftart mit `name`-Eigenschaft in einem beliebigen Vererbungspfad handeln. Zum Beispiel: `theme.typography.body_text.name`.	`undefined`

Formular##

JSON
React

{
  "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"],
  "support_all_webinar_types": true,
  "embed_versions": ["v2", "v4"],
  "default": {
    "response_type": "inline",
    "message": "Thanks for submitting the form."
  }
}

Parameter	Typ	Beschreibung
`default`	Objekt	Ein Objekt, das die Antwortdetails für die Formulareinsendung enthält. Enthält 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 zu einer HubSpot-Seite weiterzuleiten. `redirect_url`: bei weitergeleiteten Formularen auf eine bestimmte URL festgelegt, um einsendende Benutzer zu einer 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 Eigenschaftentypen der Formularfelder ausgewählt werden können. Zu den Werten gehören: `"CONTACT"`, `"COMPANY"` und `"TICKET"`.
`support_all_webinar_types`	Boolesch	Bei Einstellung auf `true`, zeigt das Formular einen allgemeineren Webinar-Selektor an, der die Auswahl von Microsoft Teams-Webinaren zusätzlich zu GoToWebinar ermöglicht. Die Werte des Formularfeldes werden ebenfalls leicht geändert, um `webinar_id` und `webinar_source` anstatt `gotowebinar_webinar_key` zu speichern. Sie müssen diese allgemeineren Eigenschaftswerte neben `gotowebinar_webinar_key` an das Formular-Tag zurückgeben.
`embed_versions`	Array	Ein Array, das angibt, welche Formulare basierend auf der Version des Formulars ausgewählt werden können. Zu den Werten gehören: `"v2"` für alte Formulare und `"v4"` für neue Editorformulare.

import { ModuleFields, FormField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung
`default`	Objekt	Ein Objekt, das die Antwortdetails für die Formulareinsendung enthält. Enthält 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 zu einer HubSpot-Seite weiterzuleiten. `redirect_url`: bei weitergeleiteten Formularen auf eine bestimmte URL festgelegt, um einsendende Benutzer zu einer Seite weiterzuleiten.
`disableInlineFormEditing`	Zeichenfolge	Legen Sie die `disableInlineFormEditing`-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.
`requiredPropertyTypes`	Array	Ein Array, das angibt, welche Formulare basierend auf den Eigenschaftentypen der Formularfelder ausgewählt werden können. Zu den Werten gehören: `"CONTACT"`, `"COMPANY"` und `"TICKET"`.
`supportAllWebinarTypes`	Boolesch	Bei Einstellung auf `true`, zeigt das Formular einen allgemeineren Webinar-Selektor an, der die Auswahl von Microsoft Teams-Webinaren zusätzlich zu GoToWebinar ermöglicht. Die Werte des Formularfeldes werden ebenfalls leicht geändert, um `webinar_id` und `webinar_source` anstatt `gotowebinar_webinar_key` zu speichern. Sie müssen diese allgemeineren Eigenschaftswerte neben `gotowebinar_webinar_key` an das Formular-Tag zurückgeben.
`embedVersions`	Array	Ein Array, das angibt, welche Formulare basierend auf der Version des Formulars ausgewählt werden können. Zu den Werten gehören: `"v2"` für alte Formulare und `"v4"` für neue Editorformulare.

Farbverlauf

JSON
React

{
  "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
    }
  }
}

Parameter	Typ	Beschreibung
`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.

import { ModuleFields, GradientField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung
`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

JSON
React

{
  "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
  }
}

Parameter	Typ	Beschreibung	Standard
`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 }`

import { ModuleFields, HubDBRowField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`tableNameOrId`	Zeichenfolge	Der Name oder die ID der HubDB-Tabelle. Hierbei handelt es sich um ein Pflichtfeld.
`columnsToFetch`	Array	Ein Array von Spaltennamen, die aus der Tabelle abgerufen werden sollen. Wenn es leer bleibt, werden alle Spalten der Tabelle zurückgegeben.	`[]`
`displayColumns`	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.	`[]`
`displayFormat`	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

JSON
React

{
  "name": "recipe_table",
  "label": "Recipe Table",
  "required": false,
  "locked": false,
  "type": "hubdbtable",
  "default": 2010782
}

Parameter	Typ	Beschreibung	Standard
`default`	Zeichenfolge	ID der HubDB-Tabelle	`null`

import { ModuleFields, HubDBTableField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Zeichenfolge	ID der HubDB-Tabelle	`null`

Symbol

JSON
React

{
  "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"
  }
}

Parameter	Typ	Beschreibung	Standard
`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`

import { ModuleFields, IconField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Objekt	Symbolobjekt
`iconSet`	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 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.

JSON
React

{
  "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
  }
}

Parameter	Typ	Beschreibung	Standard
`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 `"height"`- und `"width"`-Eigenschaften festgelegten Maße an. `src`: die URL des Standardbildes. Muss ein absoluter Pfad zu einem Bild sein. `alt`: der Standard-ALT-Text des Bildes. `loading`: die Lazy-Loading-Optionen des Bildes. Kann als `"disabled"` (Standard), `"eager"` oder `"lazy"` festgelegt werden.	`{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }`
`responsive`	Boolesch	Legt fest, ob sich das Bild responsiv (für Mobilgeräte optimiert) verhalten oder eine feste Höhe und Breite haben soll.	`true`
`show_loading`	Boolesch	Legt fest, ob die Steuerelemente für ein Lazy Loading des Bildes im Seiten-Editor angezeigt werden.	`false`

import { ModuleFields, ImageField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`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 `"height"`- und `"width"`-Eigenschaften festgelegten Maße an. `src`: die URL des Standardbildes. Muss ein absoluter Pfad zu einem Bild sein. `alt`: der Standard-ALT-Text des Bildes. `loading`: die Lazy-Loading-Optionen des Bildes. Kann als `"disabled"` (Standard), `"eager"` oder `"lazy"` festgelegt werden.	`{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }`
`responsive`	Boolesch	Legt fest, ob sich das Bild responsiv (für Mobilgeräte optimiert) verhalten oder eine feste Höhe und Breite haben soll.	`true`
`showLoading`	Boolesch	Legt fest, ob die Steuerelemente für ein Lazy Loading des Bildes im Seiten-Editor angezeigt werden.	`false`

Link

JSON
React

{
  "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
  }
}

Parameter	Typ	Beschreibung	Standard
`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` festgelegt. `type`: der Typ der URL. Im Folgenden erfahren Sie mehr über unterstützte Typen. `href`: die URL des Inhalts. Wenn Sie zu HubSpot 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 `true` können Content-Autoren auch Folgendes auswählen: `sponsored`: ein gesponserter Link, z. B. ein bezahlter Anzeigenlink. `user_generated_content`: Inhalte, die von Benutzern generiert werden, z. B. Foren. Erfahren Sie mehr über Link-Attribute.	`false`

import { ModuleFields, LinkField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`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` festgelegt. `type`: der Typ der URL. Im Folgenden erfahren Sie mehr über unterstützte Typen. `href`: die URL des Inhalts. Wenn Sie zu HubSpot 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 }`
`supportedTypes`	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" ]`
`showAdvancedRelOptions`	Boolesch	Standardmäßig können Content-Autoren nur die Option `no_follow` auswählen. Bei Festlegung auf `true` können Content-Autoren auch Folgendes auswählen: `sponsored`: ein gesponserter Link, z. B. ein bezahlter Anzeigenlink. `user_generated_content`: Inhalte, die von Benutzern generiert werden, z. B. Foren. Erfahren Sie mehr über Link-Attribute.	`false`

Logo

JSON
React

{
  "name": "logo",
  "label": "Logo",
  "required": false,
  "locked": false,
  "type": "logo",
  "show_loading": true,
  "default": {
    "override_inherited_src": false,
    "src": null,
    "alt": null,
    "loading": "lazy"
  }
}

Parameter	Typ	Beschreibung	Standard
`show_loading`	Zeichenfolge	Bestimmt, ob die Steuerelemente für die Auswahl für 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 }`

import { ModuleFields, LogoField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`showLoading`	Zeichenfolge	Bestimmt, ob die Steuerelemente für die Auswahl für 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ü

JSON
React

{
  "name": "menu",
  "label": "Menu",
  "required": false,
  "locked": false,
  "type": "menu",
  "default": 12345678911
}

Parameter	Typ	Beschreibung	Standard
`default`	Ganzzahl	Die Menü-ID für das Menü. Der Standardwert von `null` wird im Standardmenü unter der Navigation angezeigt.	`null`

import { ModuleFields, MenuField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Ganzzahl	Die Menü-ID für das Menü. Der Standardwert von `null` wird im Standardmenü unter der Navigation angezeigt.	`null`

Zahl

JSON
React

{
  "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"
}

Parameter	Typ	Beschreibung	Standard
`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.

import { ModuleFields, NumberField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`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

JSON
React

{
  "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
}

Parameter	Typ	Beschreibung	Standard
`default`	Ganzzahl	Eine Standard-Seiten-ID, die ausgewählt werden soll.	`null`

import { ModuleFields, PageField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Ganzzahl	Eine Standard-Seiten-ID, die ausgewählt werden soll.	`null`

Rich-Text

JSON
React

{
  "name": "description",
  "label": "Description",
  "required": false,
  "locked": false,
  "type": "richtext",
  "default": null
}

Parameter	Typ	Beschreibung	Standard
`default`	Zeichenfolge	Zeichenfolge des anzuzeigenden Inhalts unterstützt HTML. Hinweis: Sie können nicht die `get_asset_url`-Funktion innerhalb dieser Standardeigenschaft verwenden.	`""`
`enabled_features`	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.

import { ModuleFields, RichTextField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Zeichenfolge	Zeichenfolge des anzuzeigenden Inhalts unterstützt HTML. Hinweis: Sie können nicht die `get_asset_url`-Funktion innerhalb dieser Standardeigenschaft verwenden.	`""`
`enabledFeatures`	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ü

JSON
React

{
  "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": []
    }
  ]
}

Parameter	Typ	Beschreibung	Standard
`default`	Array von Objekten	JSON-Struktur für ein Menü und untergeordnete Menüebenen.	`[]`

import { ModuleFields, SimpleMenuField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Array von Objekten	JSON-Struktur für ein Menü und untergeordnete Menüebenen.	`[]`

Abstand

JSON
React

{
  "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": 57,
        "units": "px"
      },
      "bottom": {
        "value": 57,
        "units": "px"
      },
      "left": {
        "value": 57,
        "units": "px"
      },
      "right": {
        "value": 57,
        "units": "px"
      }
    },
    "margin": {
      "top": {
        "value": 20,
        "units": "px"
      },
      "bottom": {
        "value": 20,
        "units": "px"
      }
    }
  }
}

Parameter	Typ	Beschreibung	Standard
`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.

import { ModuleFields, SpacingField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`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

JSON
React

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

Parameter	Typ	Beschreibung	Standard
`default`	Zeichenfolge	Die ID des Tags.	`null`
`tag_value`	Zeichenfolge	Der Ausgabewert. Kann eines der folgenden sein: `ALL`: ein Objekt, das den Namen, die eindeutige ID und den URL-Slug des Tags enthält. `ID`: die eindeutige ID des Tags.`NAME` : der Name des Tags. `SLUG`: der URL-Slug des Tags.	`SLUG`

import { ModuleFields, TagField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Zeichenfolge	Die ID des Tags.	`null`
`tagValue`	Zeichenfolge	Der Ausgabewert. Kann eines der folgenden sein: `ALL`: ein Objekt, das den Namen, die eindeutige ID und den URL-Slug des Tags enthält. `ID`: die eindeutige ID des Tags.`NAME` : der Name des Tags. `SLUG`: der URL-Slug des Tags.	`SLUG`

Text

JSON
React

{
  "name": "product_name",
  "label": "Product Name",
  "required": false,
  "locked": false,
  "validation_regex": "",
  "allow_new_line": false,
  "show_emoji_picker": false,
  "type": "text",
  "default": ""
}

Parameter	Typ	Beschreibung	Standard
`default`	Zeichenfolge	Textzeichenfolge.	`""`

import { ModuleFields, TextField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Zeichenfolge	Textzeichenfolge.	`""`

Textausrichtung

JSON
React

{
  "name": "heading_align",
  "label": "Heading alignment",
  "required": false,
  "type": "textalignment",
  "default": {
    "text_align": "LEFT"
  }
}

Parameter	Typ	Beschreibung	Standard
`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`

import { ModuleFields, TextAlignmentField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Objekt	Objekt, das `horizontal_align` und `vertical_align` enthält.
`alignmentDirection`	Zeichenfolge	Legt fest, ob nur horizontale, nur vertikale oder beide Ausrichtungssteuerelemente angezeigt werden sollen. Kann Folgendes sein: `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

URL

JSON
React

{
  "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"
  }
}

Parameter	Typ	Beschreibung	Standard
`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. Zu den Typen gehören: `EXTERNAL`: rendert ein Texteingabefeld für eine externe URL. `CONTENT`: rendert ein Dropdown-Menü, das die Website und Landingpages des Accounts enthält. `FILE`: 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" ]`

import { ModuleFields, UrlField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`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" }`
`supportedTypes`	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. Zu den Typen gehören: `EXTERNAL`: rendert ein Texteingabefeld für eine externe URL. `CONTENT`: rendert ein Dropdown-Menü, das die Website und Landingpages des Accounts enthält. `FILE`: 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##

JSON
React

{
  "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
  }
}

Parameter	Typ	Beschreibung	Standard
`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	Gibt an, ob Content-Autoren erweiterte Standardoptionen sehen können.	`false`

import { ModuleFields, VideoField } from "@hubspot/cms-components/fields";

Eigenschaft	Typ	Beschreibung	Standard
`default`	Objekt	Videoobjekt mit Einstellungen für `player_id`, `height`, `width`, `size_type`, `conversion_asset`, `loop_video`, `mute_by_default`, `autoplay` und `hide_control`.	`[]`
`showAdvancedOptions`	Boolesch	Gibt an, ob Content-Autoren erweiterte Standardoptionen sehen können.	`false`

conversion_asset-Objektparameter

Parameter	Typ	Beschreibung	Standard
`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“.	`""`

​Von allen Feldern verwendete Eigenschaften

​Ausrichtung

​Hintergrundbild

​Blog

​Boolesch

​Rahmen

​Auswahl

​Voreinstellungen für Auswahlschaltflächen

​Farbe

​CTA

​CRM-Objekt

​CRM-Objekteigenschaft

​Datum

​Datum und Uhrzeit

​E-Mail-Adresse

​Einbettung

​Datei

​Follow-up-E-Mail

​Schriftart

​Hinweis:

​Farbverlauf

​HubDB-Zeile

​HubDB-Tabelle

​Symbol

​Bild

​Link

​Logo

​Menü

​Zahl

​Seite

​Rich-Text

​Einfaches Menü

​Abstand

​Tag

​Text

​Textausrichtung

​URL

​conversion_asset-Objektparameter

Von allen Feldern verwendete Eigenschaften

Ausrichtung

Hintergrundbild

Blog

Boolesch

Rahmen

Auswahl

Voreinstellungen für Auswahlschaltflächen

Farbe

CTA

CRM-Objekt

CRM-Objekteigenschaft

Datum

Datum und Uhrzeit

E-Mail-Adresse

Einbettung

Datei

Follow-up-E-Mail

Schriftart

Hinweis:

Farbverlauf

HubDB-Zeile

HubDB-Tabelle

Symbol

Bild

Link

Logo

Menü

Zahl

Seite

Rich-Text

Einfaches Menü

Abstand

Tag

Text

Textausrichtung

URL

conversion_asset-Objektparameter