> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.es/docs/llms.txt > Use this file to discover all available pages before exploring further. # Campos de módulo y tema > HubSpot tiene muchos tipos de campos que puedes usar para añadir flexibilidad y personalización a tus temas y módulos. 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](https://developers.hubspot.es/docs/cms/reference/fields/overview). ## 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. ```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"] } } } ``` | 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](https://developers.hubspot.es/docs/cms/reference/fields/overview#field-visibility). | | | `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](/cms/start-building/building-blocks/fields/alias-mapping). | `False` | ## Alineación
Permite a los creadores de contenido posicionar un elemento dentro de un contenedor. Para habilitar la alineación de texto, usa el [campo de alineación de texto](/cms/reference/fields/module-theme-fields#text-alignment). Los campos de alineación pueden usarse en [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview) y solo se pueden usar como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).
Campo de alineación ```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" } } ``` | 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: | `BOTH` | ```jsx theme={null} 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: | `BOTH` | ## Imagen de fondo
Este campo proporciona un campo de imagen de fondo que tiene subcampos para la posición y el tamaño del fondo. Los campos de imagen de fondo tienen una propiedad `.css` que devuelve el CSS basado en el valor del campo. [Más información sobre la propiedad CSS generada.](https://developers.hubspot.es/docs/cms/reference/fields/overview#generated-css) Los campos de imagen de fondo pueden usarse en [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview) y solo pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).
Campo de imagen de fondo ```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" } } ``` | 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` | ```jsx theme={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
Este campo permite a los editores de contenido seleccionar un blog y proporciona al desarrollador el ID de ese blog. Es útil en muchas situaciones, como al extraer información para artículos de blog destacados en los módulos. Puedes utilizar el identificador del blog en [las funciones de HubL](/cms/reference/hubl/functions) relacionadas con los blogs para obtener información como [los autores del blog](/cms/reference/hubl/functions#blog-authors), las [publicaciones recientes](/cms/reference/hubl/functions#blog-recent-posts), [las publicaciones recientes con una etiqueta específica](/cms/reference/hubl/functions#blog-recent-tag-posts), etc. Los campos de blog pueden usarse en los módulos.
Captura de pantalla del campo de blog ```json theme={null} { "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` | ```jsx theme={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
Este campo permite a los editores de contenido activar o desactivar la funcionalidad. Los booleanos solo pueden ser `true` o `false`. A menudo tiene sentido hacer grupos o campos condicionales según los campos booleanos. Si crees que tendrás que proporcionar más de dos estados en el futuro, un [campo de elección](#choice) puede ser la mejor opción, ya que permite incluir más opciones si las necesidades cambian más adelante. Los campos booleanos pueden usarse tanto en los temas como en los módulos. Los campos booleanos pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).
Captura de pantalla del campo booleano ```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 } ``` | 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` | ```jsx theme={null} 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
Este campo proporciona a los creadores de contenido una interfaz de usuario para crear un borde alrededor de un elemento. Los campos de borde tienen una propiedad `.css` que devuelve el CSS basado en el valor del campo. [Más información sobre la propiedad CSS generada](https://developers.hubspot.es/docs/cms/reference/fields/overview#generated-css). Los campos de borde pueden usarse en los [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview). Los campos de borde solo pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).
Captura de pantalla del campo de borde del módulo en el editor de páginas ```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 } } ``` | Parámetro | Tipo | Descripción | Predeterminado | | --------- | -------- | -------------------------------------------------------------------------------------- | -------------- | | `default` | Booleano | Con teclas para el radio del borde, los lados superior, inferior, izquierdo y derecho. | `{}` | ```jsx theme={null} 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
Los campos de elección le permiten a un creador de contenido seleccionar uno o más elementos de una lista de opciones. Usar la propiedad `display`, puede configurar que se muestren las opciones en un menú desplegable, selección con botones o casillas de verificación, o una serie de botones. Más abajo encontrarás información sobre las [opciones de presentación del campo de elección](#choice-button-presets). Los campos de elección pueden usarse tanto en los temas como en los módulos. Los campos de elección pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).
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" } ``` | 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"` | | `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](#choice-button-presets) a continuación. | | ```jsx theme={null} 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"` | | `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](#choice-button-presets) 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. ```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'; ``` | Ajuste preestablecido | Etiquetas de elección | Ejemplo | | --------------------- | ---------------------------- | ------- | | `case` | `none` \| `upper` \| `lower` | | Ajuste preestablecido de formato \| | `expand_icon` | `caret` | `plus` | `chevron` | Ajuste preestablecido del ícono expandir \| | `icon_background_shape` | `none` | `square` | `rounded` | `circle` | Ajuste preestablecido de la forma del fondo del ícono \| | `icon_size` | `small` | `medium` | `large` | Ajuste preestablecido del ícono \| | `layout` | `cards` | `tiles` | `minimal` | Ajuste preestablecido del diseño \| | `social_icon_background_shape` | `none` | `square` | `rounded` | `circle` | Ajuste preestablecido del fondo de los íconos de redes sociales \| | `social_icon_size` | `small` | `medium` | `large` | Ajuste preestablecido del tamaño de los íconos de redes sociales | ## Color
Los campos de color proporcionan una amplia interfaz de selección de colores. Admiten tanto colores sólidos como transparencias. Son una opción perfecta para cuando se le quiere dar a los creadores de contenido un control total sobre los colores dentro de un módulo. Por opción predeterminada, el input de opacidad de un campo de color está oculta para los módulos de correo electrónico, ya que algunos clientes de correo electrónico no respetan las reglas de opacidad. Puedes ver el campo de opacidad en los módulos de correo electrónico definiendo `show_opacity` como `true`. Los campos de color pueden usarse tanto en los temas como en los módulos. Los campos de color pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).
Campo de color ```json theme={null} { "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. | `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` | ```jsx theme={null} 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. | `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
Los campos de llamada a la acción (CTA) permiten a los usuarios elegir una CTA. Las CTA son esencialmente botones o enlaces a los que puede hacerse un seguimiento. Los creadores de contenido pueden [crear la CTA](https://knowledge.hubspot.com/es/ctas/create-calls-to-action-ctas) y después usarlas en todo el sitio. Los campos de CTA pueden usarse en los módulos. Los campos de CTA están disponibles en **CMS Hub** *Pro* y *Enterprise*.
Campo de llamada a la acción ```json theme={null} { "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](https://app.hubspot.com/l/ctas). | `null` | ```jsx theme={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](https://app.hubspot.com/l/ctas). | `null` | ## Objeto del CRM
Los campos de objeto del CRM proporcionan una opción para que los usuarios elijan una instancia individual de un objeto del CRM para mostrarlo. `module.fieldname.properties` devuelve las propiedades de esa instancia de objeto. Esto hace que no sea necesario utilizar la función `crm_object()` para obtener los datos de la instancia del objeto seleccionado. `module.fieldname.id` devuelve el ID de la instancia del objeto. Los campos de objeto del CRM pueden usarse en los módulos. Los campos de objeto del CRM están disponibles en **CMS Hub** *Pro* y *Enterprise*.
Campo de objeto del CRM ```json theme={null} { "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](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | | | `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` | ```jsx theme={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](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | | | `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
Utiliza este campo para acceder a los metadatos de la propiedad, como la etiqueta y el nombre de la propiedad, desde un tipo de objeto específico. Esto permite a los creadores de contenido seleccionar entre las propiedades del objeto cuando necesitan mostrar los detalles de la propiedad en una página. Por ejemplo, podrías agregar este campo a un módulo de tabla personalizado para rellenar los encabezados de tabla según las propiedades seleccionadas. Los campos de objeto del CRM pueden usarse en los módulos.
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" } } ``` | 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](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). | | `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). ```jsx theme={null} 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](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). | | `default` | Objeto | Contiene la propiedad predeterminada para mostrar. | ## Fecha
Con estos campos, los creadores de contenido pueden seleccionar una fecha. Devuelven una marca de tiempo que puedes utilizar en tu código. Los campos de fecha pueden usarse en los módulos.
Campo de fecha con selector de calendario abierto ```json theme={null} { "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` | ```jsx theme={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
Los campos de fecha y hora ofrecen una interfaz de selección de fecha al igual que el campo de fecha, así como un selector de hora para facilitar a los creadores de contenido la selección de una fecha y de la hora del día. Devuelven una marca de tiempo que puedes utilizar en tu código. Los campos de fecha y hora pueden usarse en los módulos.
Inicio del evento ```json theme={null} { "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` | ```jsx theme={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
Los campos de dirección de correo electrónico permiten a los usuarios seleccionar varias direcciones de correo electrónico. Pueden utilizarse para mostrar información de contacto. El campo de correo electrónico devuelve una matriz de direcciones de correo electrónico seleccionadas que puedes procesar en bucle. Los campos de correo electrónico pueden usarse en los módulos.
email-field ```json theme={null} { "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` | ```jsx theme={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
Los campos de inserción permiten al usuario agregar la URL de un [oEmbedsitio habilitado para usar](https://oembed.com/#section7) o pegar un código de inserción de otro sitio. Para saber más sobre el uso de oEmbed en HubSpot, y ver casos prácticos, consulta nuestro [oEmbed documento sobre](/cms/start-building/building-blocks/fields/oembed).
Insertar campo ```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" } } ``` | 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](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media). | | | `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` | ```jsx theme={null} 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](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media). | | | `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
Los campos de archivo permiten al usuario subir un archivo en el administrador de archivos o en el administrador de documentos, y facilitan la tarea de adjuntar elementos almacenados en esas ubicaciones. Este campo puede ser útil para enlazar archivos PDF o de otros formatos. Para mostrar imágenes en una página, debes utilizar el campo de imagen. Los campos de archivo pueden usarse en los módulos.
Campo de archivo ```json theme={null} { "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` | ```jsx theme={null} 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
Los campos de correo electrónico de seguimiento permiten a los creadores de contenido designar un correo electrónico que se enviará en respuesta a la recepción de un formulario. Esto funciona en conjunto con la [etiqueta de formulario HubL](/cms/reference/hubl/tags/standard-tags#form), a través del parámetro `simple_email_campaign_id`. Los campos de correo electrónico de seguimiento pueden usarse en los módulos.
campo de correo electrónico de seguimiento ```json theme={null} { "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` | ```jsx theme={null} import { ModuleFields, FollowUpEmailField } from "@hubspot/cms-components/fields"; ``` | Propiedad | Tipo | Descripción | Predeterminado | | --------- | ------ | ------------------------ | -------------- | | `default` | Cadena | Id de correo electrónico | `null` | ## Fuente
Los campos de fuente proporcionan a los creadores de contenido controles básicos de estilo de fuente. Puedes elegir el tamaño, el color, la familia de fuentes y el formato (negrita, cursiva y subrayado). Todas las fuentes de la lista son fuentes estándar seguras para la web. Estas fuentes provienen de [Google Fonts](https://fonts.google.com/), pero las sirve HubSpot directamente en el dominio en el que se carga la página. Los campos de fuentes pueden usarse tanto en los temas como en los módulos. Los campos de fuente pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).
Campo de 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](https://developers.hubspot.es/docs/cms/reference/fields/overview#inherited-fields), 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 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 } } } ``` | 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` | ```jsx theme={null} 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
Los campos de formulario permiten al creador de contenido designar un formulario en su cuenta. Luego, puedes utilizarlo para renderizar un formulario en una página utilizando la [etiqueta de formulario HubL](/cms/reference/hubl/tags/standard-tags#form). Los campos de formulario pueden usarse en los módulos.
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." } } ``` | 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: | | `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](/cms/reference/hubl/tags/standard-tags#form) 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. | ```jsx theme={null} 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: | | `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](/cms/reference/hubl/tags/standard-tags#form) 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
Este campo permite a los creadores de contenido crear y configurar degradados. Actualmente, los degradados lineales admiten hasta cinco puntos de color. Los campos de degradado incluyen una propiedad `.css` que devuelve el CSS correspondiente según el valor del campo. [Más información sobre la propiedad CSS generada](https://developers.hubspot.es/docs/cms/reference/fields/overview#generated-css). Los campos de degradado pueden usarse en los [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview). Los campos de degradado solo pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).
Campo de degradado ```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 } } } ``` | 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. | ```jsx theme={null} 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
Los campos de fila de HubDB permiten al creador de contenido seleccionar una fila individual de una tabla definida (o varias filas si se utilizan campos de repetición). Luego, puedes utilizar este campo para crear listas, tablas y recursos definidos por el usuario, entre otros. Los campos de fila de HubDB pueden usarse en los módulos. Los campos de fila de HubDB están disponibles en **CMS Hub** *Pro* y *Enterprise*.
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 } } ``` | 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 }` | ```jsx theme={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
Los campos de la tabla de HubDB permiten al creador de contenido designar un HubDB en su cuenta. Luego, puedes utilizarlo para renderizar un formulario en una página utilizando la [etiqueta de formulario HubL](/cms/reference/hubl/tags/standard-tags#form). Devuelve el ID de la tabla, que puedes utilizar con las [funciones HubL de HubDB.](/cms/start-building/features/storage/hubdb#access-hubdb-data-using-hubl)). Los campos de la tabla de HubDB pueden usarse en los módulos. Los campos de la tabla HubDB están disponibles en **CMS Hub***Pro* y *Enterprise*.
HubDB field ```json theme={null} { "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` | ```jsx theme={null} import { ModuleFields, HubDBTableField } from "@hubspot/cms-components/fields"; ``` | Propiedad | Tipo | Descripción | Predeterminado | | --------- | ------ | -------------------- | -------------- | | `default` | Cadena | ID de la tabla HubDB | `null` | ## Ícono
Los campos de ícono permiten a los creadores de contenido añadir íconos a sus módulos. El campo ícono está precargado con íconos de FontAwesome. Los campos de íconos pueden usarse en los módulos. Los campos de íconos pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).
icon field ```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" } } ``` | 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-5.0.10` | ```jsx theme={null} 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-5.0.10` | ## Imagen
Los campos de imagen proporcionan una interfaz sencilla para que los creadores de contenido agreguen imágenes a un módulo o tema. Los campos de imagen proporcionan una interfaz de selector de archivos que enumera las imágenes del administrador de archivos. Dado que las imágenes pueden utilizarse y mostrarse de diferentes maneras, los desarrolladores pueden limitar las opciones de tamaño disponibles para el creador de contenido en la interfaz de usuario, así como permitir [la carga diferida de imágenes](/cms/best-practices/testing-staging-performance/lazy-loading).
Image Field Los campos de imagen pueden usarse en los módulos. Las imágenes pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields). 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](#background-image). Esta es una práctica recomendada de [accesibilidad](/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 } } ``` | 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" : "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](/cms/best-practices/testing-staging-performance/lazy-loading) de la imagen se muestran en el editor de la página. | `false` | ```jsx theme={null} 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" : "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](/cms/best-practices/testing-staging-performance/lazy-loading) de la imagen se muestran en el editor de la página. | `false` | ## Enlace
Los campos de enlace ofrecen una interfaz sencilla para que los creadores de contenido agreguen enlaces a URL y direcciones de correo electrónico. Con los enlaces externos, los creadores de contenido deben elegir "externo". Con los enlaces de correo electrónico, deben elegir "dirección de correo electrónico". Por último, con el contenido alojado en el CMS de HubSpot, pueden utilizar "contenido", que muestra una lista de todas las páginas y entradas de blog en la cuenta, "archivo", que muestra los materiales de archivo, y "blog", que muestra todos los listados de blog en la cuenta. Los campos de enlace son muy similares a los campos de URL, excepto por la diferencia clave de que proporcionan una interfaz de usuario para "abrir en una nueva ventana" y "decirle a los motores de búsqueda que no los sigan". Si no deseas que los creadores de contenido tengan ese control, utiliza el [campo URL](#url). Los campos de enlace pueden usarse en los módulos.
link field ```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 } } ``` | Parámetro | Tipo | Descripción | Predeterminado | | --------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `default` | Objeto | La URL predeterminada y el comportamiento abierto del enlace. Este objeto incluye: | `{ "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" ]` | | `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:Consulta más información sobre [los atributos de los enlaces](https://moz.com/blog/nofollow-sponsored-ugc). | `false` | ```jsx theme={null} 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: | `{ "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" ]` | | `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:Consulta más información sobre [los atributos de los enlaces](https://moz.com/blog/nofollow-sponsored-ugc). | `false` | ## Logotipo
Los campos de logotipo permiten a los creadores de contenido especificar las imágenes de los logotipos que se utilizarán en una página, y la opción predeterminada es el logotipo del dominio. Esto es útil para los encabezados y pies de página del sitio que pueden contener el logotipo de la empresa. Los campos de logotipo también permiten la [carga diferida](/cms/best-practices/testing-staging-performance/lazy-loading). Los campos del logotipo pueden usarse en los módulos.
logo field ```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" } } ``` | Parámetro | Tipo | Descripción | Predeterminado | | -------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | `show_loading` | Cadena | Determina si los controles para elegir la [carga diferida](/cms/best-practices/testing-staging-performance/lazy-loading) 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](/cms/best-practices/testing-staging-performance/lazy-loading) de la imagen. Las opciones incluyen: | `{ 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"; ``` | Propiedad | Tipo | Descripción | Predeterminado | | ------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | `showLoading` | Cadena | Determina si los controles para elegir la [carga diferida](/cms/best-practices/testing-staging-performance/lazy-loading) 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](/cms/best-practices/testing-staging-performance/lazy-loading) de la imagen. Las opciones incluyen: | `{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }` | ## Menú
Los campos de menú ofrecen una interfaz sencilla para que los creadores de contenido creen, editen y seleccionen un [menú de navegación](/cms/start-building/building-blocks/modules/menus-and-navigation) reutilizable en otras páginas. Este campo es ideal para usarlo en los menús que se utilizan en varias páginas, como la navegación principal, el pie de página y otro [contenido global](/cms/start-building/building-blocks/global-content). Utiliza este campo junto con la [etiqueta "menu"](/cms/reference/hubl/tags/standard-tags#menu) o la [función menu()](/cms/reference/hubl/functions#menu), para mostrar un menú dentro del módulo. Con los menús que no tiene sentido reutilizar en otras páginas, como un menú de índice, utiliza el [campo de menú simple](#simple-menu). Los campos de menú pueden usarse en los módulos.
menu field ```json theme={null} { "name": "menu", "label": "Menu", "required": false, "locked": false, "type": "menu", "default": 12345678911 } ``` | Parámetro | Tipo | Descripción | Predeterminado | | --------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | `default` | Entero | El [ID del menú](/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id). El valor predeterminado de `null`, hace que el menú predeterminado sea el de navegación. | `null` | ```jsx theme={null} import { ModuleFields, MenuField } from "@hubspot/cms-components/fields"; ``` | Propiedad | Tipo | Descripción | Predeterminado | | --------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | `default` | Entero | El [ID del menú](/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id). El valor predeterminado de `null`, hace que el menú predeterminado sea el de navegación. | `null` | ## Número
Los campos numéricos ofrecen una interfaz sencilla para que los creadores de contenido introduzcan o ajusten opciones y valores numéricos. Pueden usarse para crear elementos basados en porcentajes o cualquier cosa en la que se necesiten números como dato de entrada. Los campos numéricos pueden usarse en los módulos. Los campos numéricos pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).
Number field ```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" } ``` | 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. | | ```jsx theme={null} 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
Los campos de página proporcionan una interfaz para que los creadores de contenido seleccionen las páginas del sitio y las landing pages. El valor devuelto por un campo de página es el id de la página seleccionada. Cuando se utiliza junto con las funciones [content\_by\_id](/cms/reference/hubl/functions#content-by-id) o [content\_by\_ids](/cms/reference/hubl/functions#content-by-ids), puedes utilizar los datos de las páginas seleccionadas en la página actual. Los campos de página pueden usarse en los módulos.
Page field ```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 } ``` | Parámetro | Tipo | Descripción | Predeterminado | | --------- | ------ | ----------------------------------------------------------- | -------------- | | `default` | Entero | Un identificador de página predeterminado para seleccionar. | `null` | ```jsx theme={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
Los campos de texto enriquecido ofrecen a los creadores de contenido una experiencia de editor de texto WYSIWYG. Cuando se imprime el valor de un campo de texto enriquecido, se hace como HTML. Si no quieres que los creadores de contenido puedan darle formato, utiliza [campos de texto](#text). Los campos de texto enriquecido pueden usarse en los módulos.
Rich Text field ```json theme={null} { "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](/cms/reference/hubl/functions#get-asset-url) `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](/cms/reference/fields/rich-text-editor) y las opciones disponibles para los editores de contenido. | | ```jsx theme={null} 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](/cms/reference/hubl/functions#get-asset-url) `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](/cms/reference/fields/rich-text-editor) y las opciones disponibles para los editores de contenido. | | ## Menú simple
Los campos de menú simple proporcionan una interfaz sencilla para que los creadores de contenido creen un [menú de navegación](/cms/start-building/building-blocks/modules/menus-and-navigation) que no sea reutilizable en otras páginas. Para los menús que deben ser reutilizables, utiliza el [campo de menú](#menu). Es una opción útil para crear un menú de tabla de contenido que enlaza con títulos de páginas muy largas, o una lista de enlaces a contenido que solo tiene sentido tener en la página actual. Los campos de menú simples pueden usarse en los módulos.
Simple menu field ```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": [] } ] } ``` | Parámetro | Tipo | Descripción | Predeterminado | | --------- | ----------------- | ----------------------------------------------------------------- | -------------- | | `default` | Matriz de objetos | Estructura JSON para el menú y las opciones secundarias del menú. | `[]` | ```jsx theme={null} 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
Este campo proporciona una interfaz de usuario para que los creadores de contenido definan el relleno y el margen. Los campos de espaciado tienen una propiedad `.css` que devuelve el CSS basado en el valor del campo. [Más información sobre la propiedad CSS generada](https://developers.hubspot.es/docs/cms/reference/fields/overview#generated-css). Los campos de espaciado pueden usarse en los [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview). Los campos de espaciado solo pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).
screenshot of spacing style field expanded in page editor ```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" } } } } ``` | Parámetro | Tipo | Descripción | Predeterminado | | --------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | `default` | Objeto | : Define los valores de espaciado predeterminados. Contiene `padding` y objetos `margin`: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`: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. | | ```jsx theme={null} 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`: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`: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
Los campos de etiqueta permiten a los creadores de contenido seleccionar estos elementos. Este selector de etiquetas devuelve un identificador de etiqueta de blog que puede utilizarse en las funciones relacionadas con estos elementos, como [URL de la etiqueta de blog](/cms/reference/hubl/functions#blog-tag-url) y [publicaciones recientes de la etiqueta de blog](/cms/reference/hubl/functions#blog-recent-tag-posts). Los campos de etiqueta pueden usarse en los módulos.
tag field ```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 } ``` | 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: | `SLUG` | ```jsx theme={null} 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: | `SLUG` | ## Texto
Los campos de texto ofrecen a los creadores de contenido una experiencia de edición de texto simple sin funcionalidad de texto enriquecido. Los campos de texto se muestran inicialmente como una sola línea, pero pueden expandirse hasta convertirse en áreas de texto y admiten múltiples líneas. Utilízalos cuando no quieras que los creadores de contenido tengan control sobre el formato. Si deseas proporcionar controles de formato, utiliza [campos de texto enriquecido](#rich-text). Los campos de texto pueden usarse en los módulos.
text field ```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": "" } ``` | Parámetro | Tipo | Descripción | Predeterminado | | --------- | ------ | ---------------- | -------------- | | `default` | Cadena | Cadena de texto. | `""` | ```jsx theme={null} import { ModuleFields, TextField } from "@hubspot/cms-components/fields"; ``` | Propiedad | Tipo | Descripción | Predeterminado | | --------- | ------ | ---------------- | -------------- | | `default` | Cadena | Cadena de texto. | `""` | ## Alineación del texto
Este campo proporciona a los creadores de contenido una forma de alinear el contenido de texto dentro de un contenedor. No debe utilizarse para alinear otros recursos, ya que existe un [tipo de campo específico para ello](#alignment). Los campos de alineación de texto pueden usarse en los [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview). Los campos de alineación de texto solo pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).
Campo de alineación del texto ```json theme={null} { "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: | `BOTH` | ```jsx theme={null} 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: | `BOTH` | ## URL
Los campos de URL ofrecen una experiencia similar a la de los campos de enlace. Proporcionar una interfaz de usuario para que los creadores de contenido agreguen enlaces. Los campos de URL, sin embargo, no muestran una interfaz de usuario para abrir en una nueva ventana, ni indican a los motores de búsqueda que no los sigan. Utiliza este campo cuando tú, como desarrollador, quieras definir los valores para ese comportamiento. Si quieres que el usuario tenga el control, utiliza [campos de enlace](#link) en su lugar. Los campos de URL pueden usarse en los módulos.
URL field ```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" } } ``` | 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", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` | ```jsx theme={null} 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", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` | ## Video
Los campos de video proporcionan a los editores de contenido un lugar para agregar HubSpot Video a su contenido del módulo sin necesidad de utilizar campos de texto enriquecido.
Video Field ```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 } } ``` | 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` | ```jsx theme={null} 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". | `""` | ``` ```