> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.de/docs/llms.txt > Use this file to discover all available pages before exploring further. # Felder für Module und Designs > HubSpot verfügt über viele verschiedene Feldtypen, die Sie verwenden können, um Ihre Designs und Module flexibler und individueller zu gestalten. 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](https://developers.hubspot.de/docs/cms/reference/fields/overview). ## 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. ```json theme={null} { "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](https://developers.hubspot.de/docs/cms/reference/fields/overview#field-visibility). | | | `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](/cms/start-building/building-blocks/fields/alias-mapping). | `False` | ## Ausrichtung
Ermöglicht Content-Autoren, ein Element innerhalb eines Containers zu positionieren. Um die Textausrichtung zu aktivieren, verwenden Sie stattdessen das [Textausrichtungsfeld](/cms/reference/fields/module-theme-fields#text-alignment). Ausrichtungsfelder werden in [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) unterstützt und können nur als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
Ausrichtungsfeld ```json theme={null} { "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: | `BOTH` | ```jsx theme={null} 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: | `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.](https://developers.hubspot.de/docs/cms/reference/fields/overview#generated-css) Hintergrundbildfelder werden in [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) unterstützt und können nur als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
Hintergrundbildfelder ```json theme={null} { "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` | ```jsx theme={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
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](/cms/reference/hubl/functions) verwenden, um Informationen wie [Blog-Autoren](/cms/reference/hubl/functions#blog-authors), [aktuelle Blogbeiträge](/cms/reference/hubl/functions#blog-recent-posts), [aktuelle Blogbeiträge mit einem bestimmten Tag](/cms/reference/hubl/functions#blog-recent-tag-posts) und vieles mehr zu erhalten. Blog-Felder werden in Modulen unterstützt.
Screenshot des Blog-Feldes ```json theme={null} { "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` | ```jsx theme={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
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 irgendwann einmal mehr als zwei Zustände bereitstellen müssen, ist ein [Auswahlfeld](#choice) 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](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
Screenshot eines booleschen Feldes ```json theme={null} { "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` | ```jsx theme={null} 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
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.](https://developers.hubspot.de/docs/cms/reference/fields/overview#generated-css) Rahmenfelder werden in [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) unterstützt. Rahmenfelder können nur als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
Screenshot des Rahmenmodulfelds im Seiten-Editor ```json theme={null} { "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. | `{}` | ```jsx theme={null} 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
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](#choice-button-presets). Auswahlfelder werden sowohl in Designs als auch in Modulen unterstützt. Auswahlfelder können als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
choice-field-dropdown ```json theme={null} { "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"` | | `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](#choice-button-presets). | | ```jsx theme={null} 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"` | | `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](#choice-button-presets). | | ### 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. ```json example.json theme={null} { "name": "layout", "type": "choice", "label": "Layout", "required": false, "locked": false, "display": "buttons", "preset": "layout", "choices": [ ["cards_value", "cards"], ["tiles_value", "tiles"], ["minimal_value", "minimal"] ] } ``` ```text react.txt theme={null} import { ModuleFields, ChoiceField } from '@hubspot/cms-components/fields'; ``` | Voreinstellung | Auswahlabel | Beispiel | | -------------- | ---------------------------- | -------- | | `case` | `none` \| `upper` \| `lower` | | Voreinstellung für Groß-/Kleinschreibung \| | `expand_icon` | `caret` | `plus` | `chevron` | Symbol-Voreinstellung erweitern \| | `icon_background_shape` | `none` | `square` | `rounded` | `circle` | Voreinstellung für Symbolhintergrundform \| | `icon_size` | `small` | `medium` | `large` | Symbol-Voreinstellung \| | `layout` | `cards` | `tiles` | `minimal` | Layout Voreinstellung \| | `social_icon_background_shape` | `none` | `square` | `rounded` | `circle` | Voreinstellung für Social-Media-Symbolhintergrund \| | `social_icon_size` | `small` | `medium` | `large` | Voreinstellung für Social-Media-Icon-Größe | ## 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](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
Farbfeld ```json theme={null} { "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. | `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` | ```jsx theme={null} 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. | `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
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](https://knowledge.hubspot.com/de/ctas/create-calls-to-action-ctas), die auf der gesamten Website verwendet werden können. CTA-Felder werden in Modulen unterstützt. CTA-Felder sind in **Content Hub** *Professional* und *Enterprise* verfügbar.
Call-to-Action-Feld ```json theme={null} { "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](https://app.hubspot.com/l/ctas) bearbeitet wird. | `null` | ```jsx theme={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](https://app.hubspot.com/l/ctas) 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 **Content Hub** *Professional* und *Enterprise* verfügbar.
CRM-Objektfeld ```json theme={null} { "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](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | | | `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` | ```jsx theme={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](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | | | `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
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 ```json theme={null} { "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](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). | | `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. ```jsx theme={null} 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](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). | | `default` | Objekt | Enthält die Standardeigenschaft, die angezeigt werden soll. | ## 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 ```json theme={null} { "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` | ```jsx theme={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
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 ```json theme={null} { "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` | ```jsx theme={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
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 ```json theme={null} { "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` | ```jsx theme={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
Mithilfe von Einbettungsfeldern kann der Benutzer eine URL von einer [oEmbed-fähigen Website](https://oembed.com/#section7) 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](/cms/start-building/building-blocks/fields/oembed).
Einbettungsfeld ```json theme={null} { "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](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media) 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` | ```jsx theme={null} 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](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media) 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
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 ```json theme={null} { "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` | ```jsx theme={null} 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
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](/cms/reference/hubl/tags/standard-tags#form)-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 ```json theme={null} { "name": "followup_email", "label": "Followup email", "required": false, "locked": false, "type": "followupemail", "default": null } ``` | Parameter | Typ | Beschreibung | Standard | | --------- | ------------ | ------------ | -------- | | `default` | Zeichenfolge | E-Mail-ID | `null` | ```jsx theme={null} import { ModuleFields, FollowUpEmailField } from "@hubspot/cms-components/fields"; ``` | Eigenschaft | Typ | Beschreibung | Standard | | ----------- | ------------ | ------------ | -------- | | `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](https://fonts.google.com/), 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](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
Schriftartfeld ### 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](https://developers.hubspot.de/docs/cms/reference/fields/overview#inherited-fields) 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 theme={null} { "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` | ```jsx theme={null} 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##
Formularfelder ermöglichen es einem Content-Autor, ein Formular in seinem Account zu bestimmen. Damit können Sie dann mit dem [HubL-Formular-Tag](/cms/reference/hubl/tags/standard-tags#form) ein Formular auf einer Seite rendern. Formularfelder werden in Modulen unterstützt.
form field-Aug-21-2020-08-09-55-35-PM ```json theme={null} { "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: | | `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](/cms/reference/hubl/tags/standard-tags#form) 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. | ```jsx theme={null} 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: | | `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](/cms/reference/hubl/tags/standard-tags#form) 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
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.](https://developers.hubspot.de/docs/cms/reference/fields/overview#generated-css) Farbverlaufsfelder werden in [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) unterstützt. Farbverlaufsfelder können nur als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
Farbverlaufsfeld ```json theme={null} { "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. | ```jsx theme={null} 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
HubDB-Zeilenfelder ermöglichen es einem Content-Autor, eine einzelne Zeile (oder mehrere Zeilen bei Verwendung von 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 **Content Hub** *Professional* und *Enterprise* verfügbar.
hubdb-row-field ```json theme={null} { "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 }` | ```jsx theme={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
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](/cms/reference/hubl/tags/standard-tags#form) ein Formular auf einer Seite rendern. Gibt die Tabellen-ID zurück, die Sie mit den [HubDB-HubL-Funktionen](/cms/start-building/features/storage/hubdb#access-hubdb-data-using-hubl)) verwenden können. HubDB-Tabellenfelder werden in Modulen unterstützt. HubDB-Tabellenfelder sind verfügbar in **CMS Hub** *Professional* und *Enterprise*.
HubDB-Feld ```json theme={null} { "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` | ```jsx theme={null} import { ModuleFields, HubDBTableField } from "@hubspot/cms-components/fields"; ``` | Eigenschaft | Typ | Beschreibung | Standard | | ----------- | ------------ | -------------------- | -------- | | `default` | Zeichenfolge | ID der HubDB-Tabelle | `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](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
Symbolfeld ```json theme={null} { "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-5.0.10` | ```jsx theme={null} 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-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](/cms/best-practices/testing-staging-performance/lazy-loading) ermöglichen.
Bildfeld Bildfelder werden in Modulen unterstützt. Bilder können als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden. Sie sollten Bildfelder nur dann als Stilfelder verwenden, wenn das Bild rein präsentativ ist, keine Bedeutung vermittelt und kein [Hintergrundbild](#background-image) ist. Dies entspricht den bewährten Verfahren für [Barrierefreiheit](/cms/best-practices/improve-existing-sites/accessibility). ```json theme={null} { "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" : "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](/cms/best-practices/testing-staging-performance/lazy-loading) des Bildes im Seiten-Editor angezeigt werden. | `false` | ```jsx theme={null} 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" : "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](/cms/best-practices/testing-staging-performance/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 Content Hub gehostet werden, können sie schließlich „Content“ verwenden, das eine Liste aller Seiten und Blogbeiträ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](#url). Link-Felder werden in Modulen unterstützt.
Link-Feld ```json theme={null} { "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: | `{ "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" ]` | | `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: Erfahren Sie mehr über [Link-Attribute](https://moz.com/blog/nofollow-sponsored-ugc). | `false` | ```jsx theme={null} import { ModuleFields, LinkField } from "@hubspot/cms-components/fields"; ``` | Eigenschaft | Typ | Beschreibung | Standard | | ------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `default` | Objekt | Die Standard-URL und das Link-Öffnungsverhalten. Dieses Objekt umfasst: | `{ "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" ]` | | `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: Erfahren Sie mehr über [Link-Attribute](https://moz.com/blog/nofollow-sponsored-ugc). | `false` | ## Logo
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](/cms/best-practices/testing-staging-performance/lazy-loading) möglich. Logofelder werden in Modulen unterstützt.
Logofeld ```json theme={null} { "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](/cms/best-practices/testing-staging-performance/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](/cms/best-practices/testing-staging-performance/lazy-loading) des Bildes festzulegen. Die Optionen umfassen: | `{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }` | ```jsx theme={null} 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](/cms/best-practices/testing-staging-performance/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](/cms/best-practices/testing-staging-performance/lazy-loading) des Bildes festzulegen. Die Optionen umfassen: | `{ 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](/cms/start-building/building-blocks/modules/menus-and-navigation), 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](/cms/start-building/building-blocks/global-content). Verwenden Sie dieses Feld in Verbindung mit dem [menu-Tag](/cms/reference/hubl/tags/standard-tags#menu) oder der [menu()](/cms/reference/hubl/functions#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](#simple-menu). Menüfelder werden in Modulen unterstützt.
Menüfeld ```json theme={null} { "name": "menu", "label": "Menu", "required": false, "locked": false, "type": "menu", "default": 12345678911 } ``` | Parameter | Typ | Beschreibung | Standard | | --------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | `default` | Ganzzahl | Die [Menü-ID](/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id) für das Menü. Der Standardwert von `null` wird im Standardmenü unter der Navigation angezeigt. | `null` | ```jsx theme={null} import { ModuleFields, MenuField } from "@hubspot/cms-components/fields"; ``` | Eigenschaft | Typ | Beschreibung | Standard | | ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | `default` | Ganzzahl | Die [Menü-ID](/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-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](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
Zahlenfeld ```json theme={null} { "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. | | ```jsx theme={null} 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
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](/cms/reference/hubl/functions#content-by-id)- oder [content\_by\_ids](/cms/reference/hubl/functions#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 ```json theme={null} { "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` | ```jsx theme={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
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](#text). Rich-Text-Felder werden in Modulen unterstützt.
Rich-Text-Feld ```json theme={null} { "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](/cms/reference/hubl/functions#get-asset-url) innerhalb dieser Standardeigenschaft verwenden. | `""` | | `enabled_features` | Array | Eine Reihe von Elementen, mit denen Sie die [Symbolleiste des Rich-Text-Editors konfigurieren](/cms/reference/fields/rich-text-editor) und festlegen können, welche Optionen für Content-Editoren verfügbar sind. | | ```jsx theme={null} 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](/cms/reference/hubl/functions#get-asset-url) innerhalb dieser Standardeigenschaft verwenden. | `""` | | `enabledFeatures` | Array | Eine Reihe von Elementen, mit denen Sie die [Symbolleiste des Rich-Text-Editors konfigurieren](/cms/reference/fields/rich-text-editor) 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ü](/cms/start-building/building-blocks/modules/menus-and-navigation) zu erstellen, das nicht auf anderen Seiten wiederverwendet werden kann. Für Menüs, die wiederverwendbar sein sollen, verwenden Sie das [Menüfeld](#menu). 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 ```json theme={null} { "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. | `[]` | ```jsx theme={null} 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
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.](https://developers.hubspot.de/docs/cms/reference/fields/overview#generated-css) Abstandsfelder werden in [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) unterstützt. Abstandsfelder können nur als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
Screenshot des im Seiten-Editor erweiterten Feldes für den Abstandsstil ```json theme={null} { "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: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:Verwenden Sie `units`, um die Einheiten festzulegen, die ein Content-Autor in HubSpot verwenden kann. Erfahren Sie im Folgenden mehr über Einheiten. | | ```jsx theme={null} import { ModuleFields, SpacingField } from "@hubspot/cms-components/fields"; ``` | Eigenschaft | Typ | Beschreibung | Standard | | ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | `default` | Objekt | Legt die Standardabstandswerte fest. Enthält `padding`- und `margin`-Objekte: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: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](/cms/reference/hubl/functions#blog-tag-url) und [blog\_recent\_tag\_posts](/cms/reference/hubl/functions#blog-recent-tag-posts) verwendet werden kann. Tag-Felder werden in Modulen unterstützt.
Tag-Feld ```json theme={null} { "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: | `SLUG` | ```jsx theme={null} 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: | `SLUG` | ## 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](#rich-text). Textfelder werden in Modulen unterstützt.
Textfeld ```json theme={null} { "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. | `""` | ```jsx theme={null} import { ModuleFields, TextField } from "@hubspot/cms-components/fields"; ``` | Eigenschaft | Typ | Beschreibung | Standard | | ----------- | ------------ | ----------------- | -------- | | `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](#alignment) gibt. Textausrichtungsfelder werden in [Modulen](https://developers.hubspot.de/docs/cms/start-building/building-blocks/modules/overview) unterstützt. Textausrichtungsfelder können nur als [Stilfelder](https://developers.hubspot.de/docs/cms/reference/fields/overview#style-fields) verwendet werden.
Textausrichtungsfeld ```json theme={null} { "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: | `BOTH` | ```jsx theme={null} 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: | `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](#link). URL-Felder werden in Modulen unterstützt.
URL-Feld ```json theme={null} { "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", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` | ```jsx theme={null} 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", "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 ```json theme={null} { "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` | ```jsx theme={null} 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“. | `""` | ``` ```