Campos de módulo y tema

Agrega campos a los módulos y temas para que los creadores de contenido puedan controlar varios aspectos de una página dentro del editor de páginas. En este artículo podrás encontrar información sobre todos los campos disponibles para los módulos y para los temas, junto con sus propiedades asociadas. Para obtener más información sobre la implementación de los campos de módulos y temas, incluidos los grupos de campos y los campos repetidos, consulta el resumen de los campos de módulos y temas.

Propiedades utilizadas por todos los campos

Todos los campos comparten un conjunto de propiedades comunes. Estos son campos generales, como el nombre del campo o el texto de ayuda que se muestra a los creadores de contenido que usan el campo en el módulo o el tema.

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

Parámetro	Tipo	Descripción	Predeterminado
`name`	Cadena	El nombre del campo, al que harás referencia al incorporar el campo y sus valores en el módulo o tema. No puede contener espacios ni caracteres especiales.	`richtext_field, date_field, etc.`
`label`	Cadena	El texto que el creador de contenido ve como la descripción del campo. Puede contener espacios.	`Rich text field, Date field, etc.`
`required`	Booleano	Define si el campo puede dejarse vacío en el editor. Si es `true`, el contenido no se puede publicar sin un valor en el campo.	`false`
`locked`	Booleano	Define si el campo es editable en el editor de contenido. Si es `true`, el campo no aparecerá en el editor de contenido.	`false`
`type`	Cadena	El tipo de campo. Los tipos de campo son únicos por campo y se pueden encontrar dentro de la documentación para cada campo a continuación.
`inline_help_text`	Cadena	Texto que se muestra en línea debajo de la etiqueta del campo (límite de 400 caracteres). Se utilizan para representar la información necesaria para el campo. Puede incluir las siguientes etiquetas HTML (otras etiquetas se ignorarán en el renderizado):`a`, `b`, `br`, `em`, `i`, `p`, `small`, `strong`, `span`.
`help_text`	Cadena	Texto que se muestra en el editor dentro de un texto emergente al pasar el cursor para ayudar a los creadores del contenido (límite de 300 caracteres). Se utilizan para indicar qué información es complementaria, pero no necesaria, en un campo. Puede incluir las siguientes etiquetas HTML (otras etiquetas se ignorarán en el renderizado):`a`, `b`, `br`, `em`, `i`, `p`, `small`, `strong`, `span`.
`id`	Cadena	El ID único del campo, definido por HubSpot. Cuando se crea localmente no es necesario especificar este ID.
`visibility`	Matriz	Establece las condiciones de presentación del campo. Por ejemplo, puedes definir un campo para que solo se muestre cuando se haya seleccionado otro campo de la casilla de verificación. Más información sobre la visibilidad.
`display_width`	Cadena	De forma predeterminada, los campos son de la anchura completa en el editor. Cuando dos campos consecutivos en el archivo `fields.json` se definen como `half_width`, aparecerán uno al lado del otro en el editor.
`alias_mapping`	Cadena	Un alias para el campo, que asigna valores de campo existentes a una nueva ubicación sin romper el contenido existente. Esto puede ser útil cuando se necesita actualizar un campo que se está utilizando actualmente en el contenido publicado, como mover un campo de la pestaña Contenido a la pestaña Estilo. Más información sobre la asignación de alias.	`False`

Alineación

JSON
React

{
  "name": "img_position",
  "label": "Position Image",
  "help_text": "Position the image within it's container.",
  "required": false,
  "type": "alignment",
  "default": {
    "horizontal_align": "CENTER",
    "vertical_align": "TOP"
  }
}

Parámetro	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto que contiene `horizontal_align` y `vertical_align`.
`alignment_direction`	Cadena	Determina si se deben mostrar solo los controles de alineación horizontales, solo los verticales o ambos. Puede ser: `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto que contiene `horizontal_align` y `vertical_align`.
`alignmentDirection`	Cadena	Determina si se deben mostrar solo los controles de alineación horizontales, solo los verticales o ambos. Puede ser: `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

Imagen de fondo

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto que contiene el src de la imagen, la posición del fondo y el tamaño del fondo.	`null`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto que contiene el src de la imagen, la posición del fondo y el tamaño del fondo.	`null`

Blog

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	”default” / ID del blog	especifica qué blog se selecciona de forma predeterminada. Este parámetro acepta como argumentos ‘default’ o un ID de blog (disponible en la URL del panel del blog).	`null`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	”default” / ID del blog	especifica qué blog se selecciona de forma predeterminada. Este parámetro acepta como argumentos ‘default’ o un ID de blog (disponible en la URL del panel del blog).	`null`

Booleano

JSON
React

{
  "name": "is_teaser_img",
  "label": "Enable Teaser Image",
  "required": false,
  "locked": false,
  "type": "boolean",
  "display": "checkbox",
  "inline_help_text": "Shows Teaser image when toggled on",
  "help_text": "Teaser images are used to help provide visual context to the post.",
  "default": false
}

Parámetro	Tipo	Descripción	Predeterminado
`default`	Booleano	Define si el estado predeterminado de este campo es `true` o `false`.	`false`
`display`	Cadena	Elige el estilo de visualización del campo. Puede aparecer como `toggle` o `checkbox`.	`checkbox`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Booleano	Define si el estado predeterminado de este campo es `true` o `false`.	`false`
`display`	Cadena	Elige el estilo de visualización del campo. Puede aparecer como `toggle` o `checkbox`.	`checkbox`

Un interruptor puede tener sentido cuando el valor del campo activa o desactiva otros campos que se muestran condicionalmente. Otro caso en el que un interruptor puede ser útil es cuando el campo representa un cambio importante de diseño del módulo.Las casillas de verificación tienen sentido para cambios más pequeños que pueden no tener un efecto tan drástico en la visualización del módulo, como ocultar o mostrar pequeños elementos individuales.

Borde

JSON
React

{
  "id": "styles.border",
  "name": "border",
  "label": "border",
  "required": false,
  "locked": false,
  "allow_custom_border_sides": false,
  "type": "border",
  "default": {
    "top": {
      "width": {
        "value": 1,
        "units": "px"
      },
      "opacity": 100,
      "style": "solid",
      "color": "#ffffff"
    },
    "bottom": {
      "width": {
        "value": 1,
        "units": "px"
      },
      "opacity": 100,
      "style": "solid",
      "color": "#ffffff"
    },
    "left": null,
    "right": null
  }
}

Parámetro	Tipo	Descripción	Predeterminado
`default`	Booleano	Con teclas para el radio del borde, los lados superior, inferior, izquierdo y derecho.	`{}`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Booleano	Con teclas para el radio del borde, los lados superior, inferior, izquierdo y derecho.	`{}`

Elección

JSON
React

{
  "name": "img_position",
  "label": "Image Position",
  "required": false,
  "locked": false,
  "multiple": "true",
  "display": "select",
  "choices": [
    ["img--left", "Image Left - Text Right"],
    ["img--right", "Text Left - Image Right"]
  ],
  "type": "choice",
  "default": "img--left"
}

Parámetro	Tipo	Descripción	Predeterminado
`choices`	Matriz	Matriz que contiene las opciones seleccionables, con el formato como un valor interno único seguido de una etiqueta.	`[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]`
`default`	Valor	Establece el valor predeterminado de la matriz de elección.
`multiple`	Booleano	Campo opcional que permite seleccionar varias opciones cuando se define como `true`. Establece `display` como `checkbox` o `select` para determinar si el campo se muestra como una lista de casillas de verificación o como un menú desplegable.	`false`
`display`	Cadena	Establece la apariencia del campo utilizando uno de los siguientes valores: `select`: muestra un menú desplegable. Permite seleccionar múltiples opciones cuando `multiple` se define como `true`. `checkbox`: muestra una lista de casillas de verificación seleccionables. Permite seleccionar múltiples opciones cuando `multiple` se define como `true` y `reordering_enabled` se define como `false`. `radio`: muestra una lista de opciones de botones de selección. No permite seleccionar múltiples opciones. `buttons`: muestra un conjunto de botones basados en el `preset` especificado. No permite seleccionar múltiples opciones.	`"select"`
`reordering_enabled`	Booleano	Cuando se define como `true`, permite a los creadores de contenido reordenar las opciones del campo en el editor. Para habilitar está funcionalidad, `multiple` también debe estar definido como `true`.	`false`
`preset`	Cadena	Ajusta el botón preestablecido que se usará cuando `display` está definido como `buttons`. Con cada ajuste preestablecido, deberás configurar las etiquetas `choices` para que coincidan con un conjunto específico de valores. Obtén más información sobre estos ajustes preestablecidos a continuación.

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

Propiedad	Tipo	Descripción	Predeterminado
`choices`	Matriz	Matriz que contiene las opciones seleccionables, con el formato como un valor interno único seguido de una etiqueta.	`[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]`
`default`	Valor	Establece el valor predeterminado de la matriz de elección.
`multiple`	Booleano	Campo opcional que permite seleccionar varias opciones cuando se define como `true`. Establece `display` como `checkbox` o `select` para determinar si el campo se muestra como una lista de casillas de verificación o como un menú desplegable.	`false`
`display`	Cadena	Establece la apariencia del campo utilizando uno de los siguientes valores: `select`: muestra un menú desplegable. Permite seleccionar múltiples opciones cuando `multiple` se define como `true`. `checkbox`: muestra una lista de casillas de verificación seleccionables. Permite seleccionar múltiples opciones cuando `multiple` se define como `true` y `reordering_enabled` se define como `false`. `radio`: muestra una lista de opciones de botones de selección. No permite seleccionar múltiples opciones. `buttons`: muestra un conjunto de botones basados en el `preset` especificado. No permite seleccionar múltiples opciones.	`"select"`
`reorderingEnabled`	Booleano	Cuando se define como `true`, permite a los creadores de contenido reordenar las opciones del campo en el editor. Para habilitar está funcionalidad, `multiple` también debe estar definido como `true`.	`false`
`preset`	Cadena	Ajusta el botón preestablecido que se usará cuando `display` está definido como `buttons`. Con cada ajuste preestablecido, deberás configurar las etiquetas `choices` para que coincidan con un conjunto específico de valores. Obtén más información sobre estos ajustes preestablecidos a continuación.

Ajustes preestablecidos del botón de elección

Para configurar un campo de elección para mostrar botones en lugar de un menú desplegable, casillas de verificación o selección con botones, puedes usar cualquiera de estos ajustes preestablecidos. Cada ajuste preestablecido permite un conjunto específico de etiquetas de opciones, las cuales deberás incluir en la matriz choices. Estas etiquetas no se pueden personalizar.

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

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

Ajuste preestablecido	Etiquetas de elección	Ejemplo
`case`	`none` \| `upper` \| `lower`

Color

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Object	Define el color y la opacidad predeterminados.	`{ "color" : "#ffffff", "opacity" : 100 }`
`show_opacity`	Booleano	Define si se muestra el valor de opacidad. `true`: se muestra el valor de opacidad. `false`: el valor de opacidad está oculta. Si se deja sin definir, el valor de opacidad no se mostrará en los módulos de correo electrónico, sino que se mostrará en otros tipos de módulos.	`undefined`
`limited_options`	Matriz	Una matriz de cadenas que oculta la cuadrícula de colores predeterminada y anula la lista de colores favoritos (la etiqueta “Favoritos” se convierte en “Colores disponibles”). Los valores de la matriz deben ser un código hexadecimal o un `color` de valor hexadecimal en cualquier ruta de herencia.	`undefined`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Object	Define el color y la opacidad predeterminados.	`{ "color" : "#ffffff", "opacity" : 100 }`
`showOpacity`	Booleano	Define si se muestra el valor de opacidad. `true`: se muestra el valor de opacidad. `false`: el valor de opacidad está oculta. Si se deja sin definir, el valor de opacidad no se mostrará en los módulos de correo electrónico, sino que se mostrará en otros tipos de módulos.	`undefined`
`limitedOptions`	Matriz	Una matriz de cadenas que oculta la cuadrícula de colores predeterminada y anula la lista de colores favoritos (la etiqueta “Favoritos” se convierte en “Colores disponibles”). Los valores de la matriz deben ser un código hexadecimal o un `color` de valor hexadecimal en cualquier ruta de herencia.	`undefined`

CTA

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Cadena	La CTA predeterminada. Solicita un ID de CTA que se puede encontrar en la URL al editar una CTA en el administrador de CTA.	`null`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Cadena	La CTA predeterminada. Solicita un ID de CTA que se puede encontrar en la URL al editar una CTA en el administrador de CTA.	`null`

Objeto del CRM

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`object_type`	Cadena	Tipo de objeto del CRM que el usuario puede elegir. Tipos de objetos del CRM compatibles
`properties_to_fetch`	Matriz	Matriz de nombres de propiedades asociadas al tipo de objeto en forma de cadena. Ejemplo: `"date_of_birth"` es una propiedad asociada a un contacto. Utiliza esta opción para limitar la información disponible en la página a lo que necesitas.
`default`	Objeto	Objeto con el ID de la instancia del objeto seleccionado por opción predeterminada. ID del contacto, ID de la empresa, etc	`null`

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

Propiedad	Tipo	Descripción	Predeterminado
`objectType`	Cadena	Tipo de objeto del CRM que el usuario puede elegir. Tipos de objetos del CRM compatibles
`propertiesToFetch`	Matriz	Matriz de nombres de propiedades asociadas al tipo de objeto en forma de cadena. Ejemplo: `"date_of_birth"` es una propiedad asociada a un contacto. Utiliza esta opción para limitar la información disponible en la página a lo que necesitas.
`default`	Objeto	Objeto con el ID de la instancia del objeto seleccionado por opción predeterminada. ID del contacto, ID de la empresa, etc	`null`

Propiedad de objeto del CRM

JSON
React

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

Parámetro	Tipo	Descripción
`object_type`	Cadena	Tipo de objeto del CRM que el usuario puede elegir. Más información sobre los tipos de objetos del CRM disponibles.
`default`	Objeto	Contiene la propiedad predeterminada para mostrar.

Además, puedes usar los siguientes fragmentos para devolver otros detalles de la propiedad:

{{ module.fieldname.property }}: devuelve el nombre interno de la propiedad.
{{ module.fieldname.property_definition.label }}: devuelve la etiqueta de la propiedad.
{{ module.fieldname.property_definition.type }}: devuelve el tipo de propiedad (por ejemplo, cadena).

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

Propiedad	Tipo	Descripción
`objectType`	Cadena	Tipo de objeto del CRM que el usuario puede elegir. Más información sobre los tipos de objetos del CRM disponibles.
`default`	Objeto	Contiene la propiedad predeterminada para mostrar.

Fecha

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	La marca de tiempo	Unix Epoch de la fecha y la hora que quieres definir como predeterminada. Deja este valor como nulo para permitir que el selector de fecha y hora inicie el creador de contenido en la fecha y hora actuales del selector.	`null`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	La marca de tiempo	Unix Epoch de la fecha y la hora que quieres definir como predeterminada. Deja este valor como nulo para permitir que el selector de fecha y hora inicie el creador de contenido en la fecha y hora actuales del selector.	`null`

Fecha y hora

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	La marca de tiempo	Unix Epoch de la fecha y la hora que quieres definir como predeterminada. Deja este valor como nulo para permitir que el selector de fecha y hora inicie el creador de contenido en la fecha y hora actuales del selector.	`null`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	La marca de tiempo	Unix Epoch de la fecha y la hora que quieres definir como predeterminada. Deja este valor como nulo para permitir que el selector de fecha y hora inicie el creador de contenido en la fecha y hora actuales del selector.	`null`

Dirección de correo electrónico

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Matriz	Matriz de cadenas de direcciones de correo electrónico `["bob@example.com", "dennis@example.com"]`	`null`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Matriz	Matriz de cadenas de direcciones de correo electrónico `["bob@example.com", "dennis@example.com"]`	`null`

Inserción

JSON
React

{
  "name": "embed_field",
  "label": "Embed",
  "required": false,
  "locked": false,
  "supported_source_types": ["oembed", "html"],
  "supported_oembed_types": ["photo", "video", "link", "rich"],
  "type": "embed",
  "default": {
    "source_type": "oembed"
  }
}

Parámetro	Tipo	Descripción	Predeterminado
`supported_source_types`	Matriz	Tipos de origen compatibles: URL oEmbed (`oembed`), código de inserción en HTML (`html`) o Media Bridge (`media_bridge`).	`["oembed", "html"]`
`supported_oembed_types`	Matriz	Tipos disponibles de oEmbed, incluidos `"photo"`, `"video"`, `"link"`, y `"rich"`. No se aplica a los supported_source_types de html	`[ "photo", "video", "link", "rich" ]`
`supported_media_bridge_providers`	Matriz	Matriz de múltiples ID que determinan qué proveedores de Media Bridge están disponibles para seleccionar el contenido. Nota: este parámetro también se rellenará cuando se instale una aplicación de proveedor de Media Bridge.
`type`	Cadena	Este parámetro siempre está definido como `"embed"`	`"embed"`
`default`	Dicc.	Una matriz que contiene el parámetro `"source_type"`. Este parámetro tiene un valor basado en una cadena procedente de las opciones proporcionadas en el parámetro `"supported_source_types"`.	`oembed`

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

Propiedad	Tipo	Descripción	Predeterminado
`supportedSourceTypes`	Matriz	Tipos de origen compatibles: URL oEmbed (`oembed`), código de inserción en HTML (`html`) o Media Bridge (`media_bridge`).	`["oembed", "html"]`
`supportedOembedTypes`	Matriz	Tipos disponibles de oEmbed, incluidos `"photo"`, `"video"`, `"link"`, y `"rich"`. No se aplica a los supported_source_types de html	`[ "photo", "video", "link", "rich" ]`
`supportedMediaBridgeProviders`	Matriz	Matriz de múltiples ID que determinan qué proveedores de Media Bridge están disponibles para seleccionar el contenido. Nota: este parámetro también se rellenará cuando se instale una aplicación de proveedor de Media Bridge.
`type`	Cadena	Este parámetro siempre está definido como `"embed"`	`"embed"`
`default`	Dicc.	Una matriz que contiene el parámetro `"source_type"`. Este parámetro tiene un valor basado en una cadena procedente de las opciones proporcionadas en el parámetro `"supported_source_types"`.	`oembed`

Archivo

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Cadena	URL de archivo.	`null`
`picker`	Cadena	Valores aceptables: “file”, “document”, “image”. El selector muestra los recursos subidos al administrador de archivos o en el administrador de documentos, dependiendo de este parámetro.	`file`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Cadena	URL de archivo.	`null`
`picker`	Cadena	Valores aceptables: “file”, “document”, “image”. El selector muestra los recursos subidos al administrador de archivos o en el administrador de documentos, dependiendo de este parámetro.	`file`

Correo de seguimiento

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Cadena	Id de correo electrónico	`null`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Cadena	Id de correo electrónico	`null`

Fuente

Nota:

La familia de fuentes está determinada por la combinación de las propiedades font y font_set. Debes incluir ambos para cargar la fuente. Cuando se heredan campos, esto significa que hay que heredar ambos valores.
Ocultar subcampos relativos al CSS con visibility no impedirá la generación del CSS en el estilo devuelto en el objeto de campo. Debes incluir manualmente el CSS en el objeto styles.

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto de fuente con ajustes de tamaño, unidad de tamaño, color y estilos de negrita, cursiva y subrayado.	`{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }`
`load_external_fonts`	Booleano	HubSpot carga automáticamente la fuente web seleccionada en la página si la fuente se elige y se hace referencia a ella mediante HubL en una hoja de estilos o en un módulo. Define este valor como “False”, si ya estás cargando la fuente en la página; de esta manera, la fuente no se cargará dos veces.	`true`
`visibility`	Objeto	Utilizando el objeto anidado `hidden_subfields`, puedes establecer un booleano para los controles del campo fuente que se van a ocultar. Los subcampos incluyen: `font`, `size`, `bold`, `italic`, `underline` y `color`.
`variant`	Cadena	Si utilizas una fuente web, la variante de la fuente que deseas utilizar. Por ejemplo, para utilizar la versión con grosor de 700 de una fuente, configúrala como `"700"`. Para utilizar la versión cursiva de un tipo de letra con un grosor de 400, configúrala como `"400i"`.
`limited_options`	Matriz	Matriz de cadenas que anula la lista de todas las opciones de fuentes. Los valores de la matriz deben ser un nombre de fuente codificado o una propiedad de fuente `name` en cualquier ruta de herencia. Por ejemplo, `theme.typography.body_text.name`.	`undefined`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto de fuente con ajustes de tamaño, unidad de tamaño, color y estilos de negrita, cursiva y subrayado.	`{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }`
`loadExternalFonts`	Booleano	HubSpot carga automáticamente la fuente web seleccionada en la página si la fuente se elige y se hace referencia a ella mediante HubL en una hoja de estilos o en un módulo. Define este valor como “False”, si ya estás cargando la fuente en la página; de esta manera, la fuente no se cargará dos veces.	`true`
`visibility`	Objeto	Utilizando el objeto anidado `hidden_subfields`, puedes establecer un booleano para los controles del campo fuente que se van a ocultar. Los subcampos incluyen: `font`, `size`, `bold`, `italic`, `underline` y `color`.
`variant`	Cadena	Si utilizas una fuente web, la variante de la fuente que deseas utilizar. Por ejemplo, para utilizar la versión con grosor de 700 de una fuente, configúrala como `"700"`. Para utilizar la versión cursiva de un tipo de letra con un grosor de 400, configúrala como `"400i"`.
`limitedOptions`	Matriz	Matriz de cadenas que anula la lista de todas las opciones de fuentes. Los valores de la matriz deben ser un nombre de fuente codificado o una propiedad de fuente `name` en cualquier ruta de herencia. Por ejemplo, `theme.typography.body_text.name`.	`undefined`

Formulario

JSON
React

{
  "id": "idNumber",
  "name": "form_field_name",
  "display_width": null,
  "label": "Form",
  "required": false,
  "locked": false,
  "type": "form",
  "disable_inline_form_editing": true,
  "required_property_types": ["TICKET"],
  "support_all_webinar_types": true,
  "embed_versions": ["v2", "v4"],
  "default": {
    "response_type": "inline",
    "message": "Thanks for submitting the form."
  }
}

Parámetro	Tipo	Descripción
`default`	Objeto	Un objeto que contiene los detalles de la respuesta de envío del formulario. Incluye los siguientes parámetros: `response_type`, que puede ser uno de los siguientes: `inline:` un mensaje de texto en línea. `redirect`: redirecciona al visitante después del envío. `message`: el texto que se mostrará después del envío del formulario. `redirect_id`: en formularios redirigidos, se define como un ID de contenido de HubSpot para redirigir a los remitentes a una página de HubSpot. `redirect_url`: en formularios redirigidos, debes definir una URL específica para redirigir a los remitentes a una página.
`disable_inline_form_editing`	Cadena	Define la propiedad `disable_inline_form_editing` como `true` para ocultar todos los controles de edición de formularios en línea en el módulo de formulario. Entre ellos se incluyen los campos de formulario, el texto del botón de envío, las opciones de privacidad y consentimiento de datos y el CAPTCHA.
`required_property_types`	Matriz	Una matriz que especifica qué formularios se pueden seleccionar en función de los tipos de propiedad de los campos de formulario. Los valores incluyen: `"CONTACT"`, `"COMPANY"`, y `"TICKET"`.
`support_all_webinar_types`	Booleano	Si se define como `true`, el formulario mostrará un selector de webinarios más genérico que permite seleccionar webinarios de Microsoft Teams además de los de GoToWebinar. Los valores del campo del formulario también cambiarán ligeramente para guardar `webinar_id` y `webinar_source` en lugar de `gotowebinar_webinar_key`. Tendrás que volver a pasar estos valores de propiedad más genéricos a la etiqueta formulario junto con `gotowebinar_webinar_key`.
`embed_versions`	Matriz	Una matriz que especifica qué formularios se pueden seleccionar según la versión del formulario. Los valores incluyen `"v2"` para los formularios anteriores y `"v4"` para los formularios del nuevo editor.

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

Propiedad	Tipo	Descripción
`default`	Objeto	Un objeto que contiene los detalles de la respuesta de envío del formulario. Incluye los siguientes parámetros: `response_type`, que puede ser uno de los siguientes: `inline:` un mensaje de texto en línea. `redirect`: redirecciona al visitante después del envío. `message`: el texto que se mostrará después del envío del formulario. `redirect_id`: en formularios redirigidos, se define como un ID de contenido de HubSpot para redirigir a los remitentes a una página de HubSpot. `redirect_url`: en formularios redirigidos, debes definir una URL específica para redirigir a los remitentes a una página.
`disableInlineFormEditing`	Cadena	Define la propiedad `disableInlineFormEditing` como `true` para ocultar todos los controles de edición de formularios en línea en el módulo de formulario. Entre ellos se incluyen los campos de formulario, el texto del botón de envío, las opciones de privacidad y consentimiento de datos y el CAPTCHA.
`requiredPropertyTypes`	Matriz	Una matriz que especifica qué formularios se pueden seleccionar en función de los tipos de propiedad de los campos de formulario. Los valores incluyen: `"CONTACT"`, `"COMPANY"`, y `"TICKET"`.
`supportAllWebinarTypes`	Booleano	Si se define como `true`, el formulario mostrará un selector de webinarios más genérico que permite seleccionar webinarios de Microsoft Teams además de los de GoToWebinar. Los valores del campo del formulario también cambiarán ligeramente para guardar `webinar_id` y `webinar_source` en lugar de `gotowebinar_webinar_key`. Tendrás que volver a pasar estos valores de propiedad más genéricos a la etiqueta formulario junto con `gotowebinar_webinar_key`.
`embedVersions`	Matriz	Una matriz que especifica qué formularios se pueden seleccionar según la versión del formulario. Los valores incluyen `"v2"` para los formularios anteriores y `"v4"` para los formularios del nuevo editor.

Degradado

JSON
React

{
  "name": "bg_gradient",
  "label": "Background gradient",
  "help_text": "Sets a gradient behind the content",
  "required": false,
  "type": "gradient",
  "default": {
    "colors": [
      {
        "color": {
          "r": 0,
          "g": 0,
          "b": 0,
          "a": 1
        }
      },
      {
        "color": {
          "r": 255,
          "g": 255,
          "b": 255,
          "a": 1
        }
      }
    ],
    "side_or_corner": {
      "verticalSide": "BOTTOM",
      "horizontalSide": null
    }
  }
}

Parámetro	Tipo	Descripción
`default`	Objeto	Objeto que contiene los ajustes de dirección para un gradiente (“side_or_corner”) y las paradas de color para el gradiente como una matriz de objetos.

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

Propiedad	Tipo	Descripción
`default`	Objeto	Objeto que contiene los ajustes de dirección para un gradiente (“side_or_corner”) y las paradas de color para el gradiente como una matriz de objetos.

Fila de HubDB

JSON
React

{
  "name": "hubdbrow_field",
  "label": "HubDB row",
  "required": false,
  "locked": false,
  "table_name_or_id": "3096859",
  "columns_to_fetch": ["name", "price", "desc"],
  "display_columns": ["name", "price", "desc"],
  "display_format": "%0 - %1 :::: %2",
  "type": "hubdbrow",
  "default": {
    "id": 4450468943
  }
}

Parámetro	Tipo	Descripción	Predeterminado
`table_name_or_id`	Cadena	El nombre o ID de la tabla de HubDB. Este campo es obligatorio.
`columns_to_fetch`	Matriz	Una matriz de nombres de columnas para obtener de la tabla. Si se deja en blanco, devolverá todas las columnas de la tabla.	`[]`
`display_columns`	Matriz	Una matriz de nombres de columnas para usar en la etiqueta de elección. Si se deja en blanco, devolverá solo la primera columna de la tabla.	`[]`
`display_format`	Cadena	El formato en el que quieres que se muestren los datos de las columnas en el selector de filas de HubDB usando los símbolos de porcentaje y número para indicar una columna. Ejemplo: %0 (%1) aparecería como Columna0Valor (Columna1Valor)	`""`
`default`	Objeto	Objeto que contiene el “id” para definir la fila predeterminada de HubDB.	`{ "id" : null }`

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

Propiedad	Tipo	Descripción	Predeterminado
`tableNameOrId`	Cadena	El nombre o ID de la tabla de HubDB. Este campo es obligatorio.
`columnsToFetch`	Matriz	Una matriz de nombres de columnas para obtener de la tabla. Si se deja en blanco, devolverá todas las columnas de la tabla.	`[]`
`displayColumns`	Matriz	Una matriz de nombres de columnas para usar en la etiqueta de elección. Si se deja en blanco, devolverá solo la primera columna de la tabla.	`[]`
`displayFormat`	Cadena	El formato en el que quieres que se muestren los datos de las columnas en el selector de filas de HubDB usando los símbolos de porcentaje y número para indicar una columna. Ejemplo: %0 (%1) aparecería como Columna0Valor (Columna1Valor)	`""`
`default`	Objeto	Objeto que contiene el “id” para definir la fila predeterminada de HubDB.	`{ "id" : null }`

Tabla de HubDB

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Cadena	ID de la tabla HubDB	`null`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Cadena	ID de la tabla HubDB	`null`

Ícono

JSON
React

{
  "name": "icon_field",
  "label": "Icon",
  "required": false,
  "locked": false,
  "icon_set": "fontawesome-6.4.2",
  "type": "icon",
  "default": {
    "name": "accessible-icon",
    "unicode": "f368",
    "type": "REGULAR"
  }
}

Parámetro	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto de icono
`icon_set`	Cadena	El conjunto de íconos de FontAwesome que se va a utilizar. Los valores posibles son: `fontawesome-6.4.2` `fontawesome-5.14.0` `fontawesome-5.0.10`	`fontawesome-5.0.10`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto de icono
`iconSet`	Cadena	El conjunto de íconos de FontAwesome que se va a utilizar. Los valores posibles son: `fontawesome-6.4.2` `fontawesome-5.14.0` `fontawesome-5.0.10`	`fontawesome-5.0.10`

Imagen

Los campos de imagen pueden usarse en los módulos. Las imágenes pueden utilizarse como campos de estilo. Solo debes utilizar los campos de imagen como campos de estilo si la imagen va a ser puramente de presentación, no transmite significado y no es una imagen de fondo. Esta es una práctica recomendada de accesibilidad.

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Objeto	Define las propiedades del tamaño de la imagen, el texto alternativo, etc. Puede contener las siguientes propiedades: `size_type`: si el tamaño de la imagen es automático o manual: `"auto"`: HubSpot ajustará automáticamente el tamaño de la imagen en función de sus dimensiones originales. `"auto_custom_max"`: HubSpot ajustará automáticamente el tamaño de la imagen con las dimensiones máximas definidas con las propiedades `"max_height"` y `"max_width"`. `"exact":` HubSpot dimensionará la imagen según las dimensiones definidas con las propiedades `"height"` y `"width"`. `src`: la URL de la imagen predeterminada. Debe ser una ruta absoluta a una imagen. `alt`: el texto alternativo predeterminado de la imagen. `loading`: las opciones de carga diferida de la imagen. Puede definirse como `"disabled"` (predeterminado), `"eager"` o `"lazy"`.	`{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }`
`responsive`	Booleano	Determina si la imagen debe actuar de forma adaptable o tener una altura y anchura fijas.	`true`
`show_loading`	Booleano	Determina si los controles para elegir la carga diferida de la imagen se muestran en el editor de la página.	`false`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Objeto	Define las propiedades del tamaño de la imagen, el texto alternativo, etc. Puede contener las siguientes propiedades: `size_type`: si el tamaño de la imagen es automático o manual: `"auto"`: HubSpot ajustará automáticamente el tamaño de la imagen en función de sus dimensiones originales. `"auto_custom_max"`: HubSpot ajustará automáticamente el tamaño de la imagen con las dimensiones máximas definidas con las propiedades `"max_height"` y `"max_width"`. `"exact":` HubSpot dimensionará la imagen según las dimensiones definidas con las propiedades `"height"` y `"width"`. `src`: la URL de la imagen predeterminada. Debe ser una ruta absoluta a una imagen. `alt`: el texto alternativo predeterminado de la imagen. `loading`: las opciones de carga diferida de la imagen. Puede definirse como `"disabled"` (predeterminado), `"eager"` o `"lazy"`.	`{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }`
`responsive`	Booleano	Determina si la imagen debe actuar de forma adaptable o tener una altura y anchura fijas.	`true`
`showLoading`	Booleano	Determina si los controles para elegir la carga diferida de la imagen se muestran en el editor de la página.	`false`

Enlace

JSON
React

{
  "name": "link_field",
  "display_width": null,
  "label": "Link",
  "required": false,
  "locked": false,
  "supported_types": [
    "EXTERNAL",
    "CONTENT",
    "FILE",
    "EMAIL_ADDRESS",
    "BLOG",
    "CALL_TO_ACTION",
    "PHONE_NUMBER",
    "WHATSAPP_NUMBER",
    "PAYMENT"
  ],
  "show_advanced_rel_options": true,
  "type": "link",
  "default": {
    "url": {
      "content_id": null,
      "type": "EXTERNAL",
      "href": ""
    },
    "open_in_new_tab": false,
    "no_follow": false
  }
}

Parámetro	Tipo	Descripción	Predeterminado
`default`	Objeto	La URL predeterminada y el comportamiento abierto del enlace. Este objeto incluye: Un objeto `url` que contiene: `content_id`: si se vincula al contenido de HubSpot, el ID de ese contenido. Se define como `null` si se enlaza con contenido externo. `type`: el tipo de URL. Abajo puedes consultar información sobre los tipos admitidos. `href`: la URL del contenido. Cuando vincules a contenido de HubSpot, configúralo como `null` y usa `content_id` en su lugar.	`{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }`
`supported_types`	Matriz	Los tipos de enlaces que los creadores de contenido pueden seleccionar. Elimina de la lista los tipos que no quieres que los creadores de contenido puedan definir. Los tipos válidos incluyen: `EXTERNAL` `CONTENT` `FILE` `EMAIL_ADDRESS` `BLOG` `CALL_TO_ACTION` `PHONE_NUMBER` `WHATSAPP_NUMBER` `PAYMENT`	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]`
`show_advanced_rel_options`	Booleano	De forma predeterminada, los creadores de contenido solo podrán seleccionar la opción `no_follow`.Cuando se define como `true`, los creadores de contenido también pueden seleccionar: `sponsored`: un enlace patrocinado, como un enlace de anuncio de pago. `user_generated_content`: contenido generado por los usuarios, como foros. Consulta más información sobre los atributos de los enlaces.	`false`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Objeto	La URL predeterminada y el comportamiento abierto del enlace. Este objeto incluye: Un objeto `url` que contiene: `content_id`: si se vincula al contenido de HubSpot, el ID de ese contenido. Se define como `null` si se enlaza con contenido externo. `type`: el tipo de URL. Abajo puedes consultar información sobre los tipos admitidos. `href`: la URL del contenido. Cuando vincules a contenido de HubSpot, configúralo como `null` y usa `content_id` en su lugar.	`{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }`
`supportedTypes`	Matriz	Los tipos de enlaces que los creadores de contenido pueden seleccionar. Elimina de la lista los tipos que no quieres que los creadores de contenido puedan definir. Los tipos válidos incluyen: `EXTERNAL` `CONTENT` `FILE` `EMAIL_ADDRESS` `BLOG` `CALL_TO_ACTION` `PHONE_NUMBER` `WHATSAPP_NUMBER` `PAYMENT`	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]`
`showAdvancedRelOptions`	Booleano	De forma predeterminada, los creadores de contenido solo podrán seleccionar la opción `no_follow`.Cuando se define como `true`, los creadores de contenido también pueden seleccionar: `sponsored`: un enlace patrocinado, como un enlace de anuncio de pago. `user_generated_content`: contenido generado por los usuarios, como foros. Consulta más información sobre los atributos de los enlaces.	`false`

Logotipo

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`show_loading`	Cadena	Determina si los controles para elegir la carga diferida de la imagen se muestran en el editor de la página.	`false`
`default`	Objeto	Objeto de logotipo. Si `show_loading` se define como `true`, puedes incluir una propiedad `loading` para definir las opciones de carga diferida de la imagen. Las opciones incluyen: `"disabled"` (predeterminado) `"eager"` `"lazy"`	`{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }`

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

Propiedad	Tipo	Descripción	Predeterminado
`showLoading`	Cadena	Determina si los controles para elegir la carga diferida de la imagen se muestran en el editor de la página.	`false`
`default`	Objeto	Objeto de logotipo. Si `show_loading` se define como `true`, puedes incluir una propiedad `loading` para definir las opciones de carga diferida de la imagen. Las opciones incluyen: `"disabled"` (predeterminado) `"eager"` `"lazy"`	`{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }`

Menú

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Entero	El ID del menú. El valor predeterminado de `null`, hace que el menú predeterminado sea el de navegación.	`null`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Entero	El ID del menú. El valor predeterminado de `null`, hace que el menú predeterminado sea el de navegación.	`null`

Número

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Número	Un número predeterminado para utilizar.	`null`
`prefix`	Cadena	Se agrega como prefijo al campo numérico.
`suffix`	Cadena	Se agrega como sufijo al campo numérico.
`placeholder`	Cadena	Agrega un valor de parámetro de sustitución al campo.

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Número	Un número predeterminado para utilizar.	`null`
`prefix`	Cadena	Se agrega como prefijo al campo numérico.
`suffix`	Cadena	Se agrega como sufijo al campo numérico.
`placeholder`	Cadena	Agrega un valor de parámetro de sustitución al campo.

Los parámetros de sufijo y prefijo son para fines de visualización en el editor de contenido y no tienen ningún efecto sobre el valor numérico del campo.

Página

JSON
React

{
  "name": "page_field",
  "label": "Page",
  "help_text": "Pulls data from the selected page.",
  "required": false,
  "locked": false,
  "placeholder": "Page to pull from",
  "type": "page",
  "default": null
}

Parámetro	Tipo	Descripción	Predeterminado
`default`	Entero	Un identificador de página predeterminado para seleccionar.	`null`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Entero	Un identificador de página predeterminado para seleccionar.	`null`

Texto enriquecido

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Cadena	La cadena de contenido para mostrar admite HTML. Nota: no se puede utilizar la función `get_asset_url` dentro de esta propiedad predeterminada.	`""`
`enabled_features`	Matriz	Una serie de elementos que permiten configurar la barra de herramientas del editor de texto enriquecido y las opciones disponibles para los editores de contenido.

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Cadena	La cadena de contenido para mostrar admite HTML. Nota: no se puede utilizar la función `get_asset_url` dentro de esta propiedad predeterminada.	`""`
`enabledFeatures`	Matriz	Una serie de elementos que permiten configurar la barra de herramientas del editor de texto enriquecido y las opciones disponibles para los editores de contenido.

Menú simple

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Matriz de objetos	Estructura JSON para el menú y las opciones secundarias del menú.	`[]`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Matriz de objetos	Estructura JSON para el menú y las opciones secundarias del menú.	`[]`

Espaciado

JSON
React

{
  "name": "img_spacing",
  "label": "Spacing around image",
  "required": false,
  "type": "spacing",
  "limits": {
    "padding": {
      "top": {
        "max": 50,
        "min": 25,
        "units": ["px", "pt", "em"]
      },
      "left": {
        "max": 50,
        "units": ["px", "pt", "em"]
      },
      "bottom": {
        "max": 50,
        "units": ["px", "pt", "em"]
      }
    },
    "margin": {
      "top": {
        "max": 50,
        "min": 25,
        "units": ["px", "pt", "em"]
      },
      "bottom": {
        "max": 25,
        "units": ["Q", "rem", "em"]
      }
    }
  },
  "default": {
    "padding": {
      "top": {
        "value": 57,
        "units": "px"
      },
      "bottom": {
        "value": 57,
        "units": "px"
      },
      "left": {
        "value": 57,
        "units": "px"
      },
      "right": {
        "value": 57,
        "units": "px"
      }
    },
    "margin": {
      "top": {
        "value": 20,
        "units": "px"
      },
      "bottom": {
        "value": 20,
        "units": "px"
      }
    }
  }
}

Parámetro	Tipo	Descripción	Predeterminado
`default`	Objeto	: Define los valores de espaciado predeterminados. Contiene `padding` y objetos `margin`: `padding`: puede contener `top`, `right`, `bottom`, `left` `margin`: puede contener objetos `top` y `bottom` Usa `units` para definir las unidades que un creador de contenido puede usar en HubSpot. Abajo puedes consultar más información sobre las unidades.	`{}`
`limits`	Objeto	: Define las pautas de la cantidad de espaciado `min` y `max`. Contiene objetos `padding` y `margin`: `padding`: puede contener objetos `top`, `right`, `bottom`, `left` `margin`: puede contener objetos `top` y `bottom` Usa `units` para definir las unidades que un creador de contenido puede usar en HubSpot. Abajo puedes consultar más información sobre las unidades.

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Objeto	: Define los valores de espaciado predeterminados. Contiene `padding` y objetos `margin`: `padding`: puede contener `top`, `right`, `bottom`, `left` `margin`: puede contener objetos `top` y `bottom` Usa `units` para definir las unidades que un creador de contenido puede usar en HubSpot. Abajo puedes consultar más información sobre las unidades.	`{}`
`limits`	Objeto	: Define las pautas de la cantidad de espaciado `min` y `max`. Contiene objetos `padding` y `margin`: `padding`: puede contener objetos `top`, `right`, `bottom`, `left` `margin`: puede contener objetos `top` y `bottom` Usa `units` para definir las unidades que un creador de contenido puede usar en HubSpot. Abajo puedes consultar más información sobre las unidades.

Cuando uses el campo de espaciado, ten en cuenta lo siguiente:

Debes incluir una lista de units al definir un min o un max.
La propiedad units admite los siguientes tipos de unidades: %, ch, em, ex, in, lh, pc, pt, px, Q, rem, vh, vmax, vmin, y vw.
Cuando un creador de contenido edita todo el relleno, HubSpot usará el valor min más alto y el valor max más bajo. Además, solo las unidades compartidas por todas las partes estarán disponibles para el creador de contenido.

Etiqueta

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Cadena	El ID de la etiqueta.	`null`
`tag_value`	Cadena	El valor del output. Puede ser uno de los siguientes: `ALL`: un objeto que contiene el nombre, el ID único y el slug de la URL de la etiqueta. `ID`: el ID único de la etiqueta. `NAME`: el nombre de la etiqueta. `SLUG`: el slug de la URL de la etiqueta.	`SLUG`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Cadena	El ID de la etiqueta.	`null`
`tagValue`	Cadena	El valor del output. Puede ser uno de los siguientes: `ALL`: un objeto que contiene el nombre, el ID único y el slug de la URL de la etiqueta. `ID`: el ID único de la etiqueta. `NAME`: el nombre de la etiqueta. `SLUG`: el slug de la URL de la etiqueta.	`SLUG`

Texto

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Cadena	Cadena de texto.	`""`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Cadena	Cadena de texto.	`""`

Alineación del texto

JSON
React

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

Parámetro	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto que contiene `horizontal_align` y `vertical_align`.
`alignment_direction`	Cadena	Determina si se deben mostrar solo los controles de alineación horizontales, solo los verticales o ambos. Puede ser: `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto que contiene `horizontal_align` y `vertical_align`.
`alignmentDirection`	Cadena	Determina si se deben mostrar solo los controles de alineación horizontales, solo los verticales o ambos. Puede ser: `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

URL

JSON
React

{
  "name": "url",
  "label": "URL",
  "required": false,
  "locked": false,
  "supported_types": ["EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "PHONE_NUMBER", "WHATSAPP_NUMBER"],
  "type": "url",
  "default": {
    "content_id": null,
    "href": "http://example.com",
    "type": "EXTERNAL"
  }
}

Parámetro	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto de URL, con tipo, href e ID de contenido (si el contenido es una página o post en HubSpot)	`{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }`
`supported_types`	Matriz	Lista de los tipos de enlaces que este campo permite seleccionar. Elimina de la lista los tipos que no quieres que los creadores de contenido puedan definir. Los tipos incluyen: `EXTERNAL`: muestra un campo de entrada de texto para una URL externa. `CONTENT`: muestra un menú desplegable que contiene el sitio web de la cuenta y las landing pages. `FILE`: muestra un selector de archivos. `EMAIL_ADDRESS`: muestra un campo de entrada de texto para una dirección de correo electrónico. `BLOG`: muestra un menú desplegable que contiene las páginas de índice de los blogs de la cuenta. `PHONE_NUMBER`: muestra un campo de entrada de texto para un número de teléfono. El número debe comenzar con `+` y contener de 7 a 15 dígitos (excluyendo el código de país). `WHATSAPP_NUMBER`: muestra un menú desplegable que contiene los números de WhatsApp conectados a la cuenta.	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto de URL, con tipo, href e ID de contenido (si el contenido es una página o post en HubSpot)	`{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }`
`supportedTypes`	Matriz	Lista de los tipos de enlaces que este campo permite seleccionar. Elimina de la lista los tipos que no quieres que los creadores de contenido puedan definir. Los tipos incluyen: `EXTERNAL`: muestra un campo de entrada de texto para una URL externa. `CONTENT`: muestra un menú desplegable que contiene el sitio web de la cuenta y las landing pages. `FILE`: muestra un selector de archivos. `EMAIL_ADDRESS`: muestra un campo de entrada de texto para una dirección de correo electrónico. `BLOG`: muestra un menú desplegable que contiene las páginas de índice de los blogs de la cuenta. `PHONE_NUMBER`: muestra un campo de entrada de texto para un número de teléfono. El número debe comenzar con `+` y contener de 7 a 15 dígitos (excluyendo el código de país). `WHATSAPP_NUMBER`: muestra un menú desplegable que contiene los números de WhatsApp conectados a la cuenta.	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]`

Video

JSON
React

{
  "id": "ca4a319e-5b58-422e-47ac-49ce1b51b507",
  "name": "videoplayer_field",
  "label": "Video",
  "required": false,
  "locked": false,
  "type": "videoplayer",
  "show_advanced_options": false,
  "default": {
    "player_id": 32173842991,
    "height": 1224,
    "width": 1872,
    "conversion_asset": {
      "type": "CTA",
      "id": "c3e4fa03-2c69-461d-b9af-22b2fde86bc7",
      "position": "POST"
    },
    "loop_video": false,
    "mute_by_default": false,
    "autoplay": false,
    "hide_control": false
  }
}

Parámetro	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto de video con ajustes para `player_id`, `height`, `width`, `size_type`, `conversion_asset`, `loop_video`, `mute_by_default`, `autoplay` y `hide_control`.	`[]`
`show_advanced_options`	Booleano	Define si los creadores de contenido pueden ver las opciones avanzadas predeterminadas.	`false`

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

Propiedad	Tipo	Descripción	Predeterminado
`default`	Objeto	Objeto de video con ajustes para `player_id`, `height`, `width`, `size_type`, `conversion_asset`, `loop_video`, `mute_by_default`, `autoplay` y `hide_control`.	`[]`
`showAdvancedOptions`	Booleano	Define si los creadores de contenido pueden ver las opciones avanzadas predeterminadas.	`false`

Parámetros del objeto conversion_asset

Parámetro	Tipo	Descripción	Predeterminado
`type`	Cadena	Acepta `"FORM"`, `"CTA"` o `""`	`""`
`id`	Cadena	El identificador del tipo de formulario o CTA	`""`
`position`	Cadena	Si el recurso de conversión debe mostrarse antes de que comience el video o después de que termine. Acepta “PRE” o “POST”.	`""`

​Propiedades utilizadas por todos los campos

​Alineación

​Imagen de fondo

​Blog

​Booleano

​Borde

​Elección

​Ajustes preestablecidos del botón de elección

​Color

​CTA

​Objeto del CRM

​Propiedad de objeto del CRM

​Fecha

​Fecha y hora

​Dirección de correo electrónico

​Inserción

​Archivo

​Correo de seguimiento

​Fuente

​Nota:

​Formulario

​Degradado

​Fila de HubDB

​Tabla de HubDB

​Ícono

​Imagen

​Enlace

​Logotipo

​Menú

​Número

​Página

​Texto enriquecido

​Menú simple

​Espaciado

​Etiqueta

​Texto

​Alineación del texto

​URL

​Video

​Parámetros del objeto conversion_asset

Propiedades utilizadas por todos los campos

Alineación

Imagen de fondo

Blog

Booleano

Borde

Elección

Ajustes preestablecidos del botón de elección

Color

CTA

Objeto del CRM

Propiedad de objeto del CRM

Fecha

Fecha y hora

Dirección de correo electrónico

Inserción

Archivo

Correo de seguimiento

Fuente

Nota:

Formulario

Degradado

Fila de HubDB

Tabla de HubDB

Ícono

Imagen

Enlace

Logotipo

Menú

Número

Página

Texto enriquecido

Menú simple

Espaciado

Etiqueta

Texto

Alineación del texto

URL

Video

Parámetros del objeto conversion_asset