Tipos de campo de módulo y tema

Last updated:

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. A continuación, conoce todos los campos disponibles para los módulos y los temas. 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 la descripción general de los campos de módulos y temas.

Propiedades utilizadas por todos los campos

Todos los campos tienen algunas propiedades en común, estas propiedades controlan los nombres de las variables que se utilizan para referenciar sus valores y su apariencia para los creadores de contenido.

// Boolean field { "name" : "is_teaser_img", "label" : "Enable Teaser Image", "required" : false, "locked" : false, "type" : "boolean", "inline_help_text" : "Shows Teaser image when toggled on", "help_text" : "Teaser images are used to help provide visual context to the post.", "default" : false }
Propiedades utilizadas por todos los campos
ParameterTypeDescription Default
help_text
String

Texto que aparecerá en el editor mediante texto emergente para ayudar al creador de contenido.

Se utiliza mejor para información complementaria pero no necesaria para utilizar el campo.

none
id
String

Id único para un campo. Esto es generado por HubSpot. Cuando se construye localmente no es necesario especificar esta identificación.

inline_help_text
String

Texto de ayuda que se mostrará en línea debajo de la etiqueta del campo (límite de 300 caracteres). 

Se utiliza mejor para la información necesaria para utilizar el campo.

null
label
String

El texto que el creador de contenido ve que describe el campo. Puede contener espacios.

Rich text field, Date field, etc.
locked
Boolean

Determina si el campo es editable en el editor de contenido. Si es "true", el campo no aparecerá en el editor de contenido.

false
name
String

Es el nombre de la variable que se utilizará para referirse a los valores de este campo, y es contra el que se almacena el valor del campo. No puede contener espacios ni caracteres especiales.

richtext_field, date_field, etc.
required
Boolean

Determina si el campo puede dejarse en blanco en el editor. Si es verdadero, no se permitirá la publicación de contenido sin rellenar este campo.

false
type
String

El tipo de campo. Consulta los tipos de campo abajo para obtener documentación sobre todos los tipos de campo.

visibility
Array

Determina las condiciones de visualización de un campo.

display_width
String

Permite que los campos de los módulos estén uno al lado del otro en los editores de contenido, en lugar de los campos de ancho completo, cuando se establece en "half_width". El campo aparecerá junto al siguiente campo en el archivo fields.json, siempre que ese campo también esté configurado como "half_width".

No utilices inline_help_text y help_text indistintamente. 

En su lugar, pregúntate "¿Esta información es necesaria para que un usuario complete una tarea?".

  • Si la respuesta es afirmativa, la información debe estar en la pantalla, y es mejor el inline_help_text
  • Si no, entonces está bien poner un texto emergente usando help_text.

Mantener la coherencia con esto ayuda a los usuarios a entender rápidamente la interfaz que les proporcionas.

Alineación

Este campo proporciona a los creadores de contenido una forma de posicionar un elemento dentro de un contenedor. No debe utilizarse para la alineación del texto, ya que existe un tipo de campo específico para ello.

Los campos de alineación son compatibles con los módulos.
Los campos de alineación solo pueden utilizarse como campos de estilo.

Campo de alineación
// alignment field { "name": "img_position", "label": "Position Image", "help_text":"Position the image within it's container.", "required": false, "type": "alignment", "default": { "horizontal_align": "CENTER", "vertical_align": "TOP", } }
Campo del blog
ParámetroTipoDescription Default
default
Object

Objeto que contiene horizontal_align y vertical_align.

alignment_direction
String

Determina si se deben mostrar solo los controles de alineación horizontales, solo los verticales o ambos. Puede ser:

  • HORIZONTAL
  • VERTICAL
  • AMBOS
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.

Los campos de imagen de fondo son compatibles con los módulos.
Los campos de imagen de fondo solo pueden utilizarse como campos de estilo.

Campo de imagen de fondo
// background image field { "name": "bg_image", "label": "Background image", "required": false, "type": "backgroundimage", "default": { "src": "https://example.com/img.png", "background_position": "MIDDLE_CENTER", "background_size": "cover" } }
Campo del blog
ParámetroTipoDescription Default
default
Object

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, proporcionándote a ti, el desarrollador, el identificador del mismo. Esto es útil para situaciones como la extracción de información atrayente para los blogs destacados en los módulos. Puedes utilizar el identificador del blog en las funciones de HubL relacionadas con el blog para obtener información como los autores del blog, las publicaciones recientes del blog, las publicaciones recientes del blog con una etiqueta específica, etc.

Los campos del blog son compatibles con los módulos.

Captura de pantalla del campo Blog
// blog field { "name" : "blog", "label" : "Blog", "required" : false, "locked" : false, "type" : "blog", "default" : 1234567890 }
Campo del blog
ParámetroTipoDescription Default
default
"default" / blog id

Especifica qué blog se selecciona por opción predeterminada. Este parámetro acepta como argumentos 'default' o un ID de blog (disponible en la URL del panel del blog).

null

Boolean

Este campo permite a los editores de contenido activar/desactivar la funcionalidad. Los booleanos solo pueden ser verdaderos o falsos. A menudo tiene sentido hacer grupos o campos condicionales basados en campos booleanos. Si crees que puedes necesitar proporcionar más de dos estados en el futuro, un campo de elección puede ser una mejor opción, ya que puedes crecer con menos esfuerzo si las necesidades cambian más adelante.

Los campos booleanos son compatibles tanto con los temas como con los módulos.
Los campos booleanos pueden utilizarse como campos de estilo.

Captura de pantalla del campo booleano
// Boolean field { "name" : "is_teaser_img", "label" : "Enable Teaser Image", "required" : false, "locked" : false, "type" : "boolean", "display":"checkbox", "inline_help_text" : "Shows Teaser image when toggled on", "help_text" : "Teaser images are used to help provide visual context to the post.", "default" : false }
Campo del blog
ParámetroTipoDescription Default
default
Boolean

Establece si el estado predeterminado de este campo es true o false.

false
display
String

Elige el estilo de visualización del campo. Puede aparecer como interruptor o casilla de comprobación.

checkbox

Mantén la coherencia cuando utilices el interruptor o la casilla de comprobación. Si no tienes cuidado puedes crear una interfaz de usuario confusa para los creadores de contenido.

Un interruptor puede tener sentido cuando el valor del campo activa/desactiva otros campos que se muestran condicionalmente. Otra ocasión en la que un interruptor puede ser útil es cuando el campo representa un cambio de diseño importante para el módulo. Las casillas de comprobació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.

Border

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.

Los campos de borde son compatibles con los módulos.
Los campos de borde solo pueden utilizarse como campos de estilo.

Captura de pantalla del campo del módulo de borde en el editor de páginas
// Border field { "id" : "styles.border", "name" : "border", "label" : "border", "required" : false, "locked" : false, "allow_custom_border_sides" : false, "type" : "border", "default" : { "top": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "bottom": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "left": null, "right": null } }
Campo del blog
ParámetroTipoDescription Default
default
Boolean

con teclas para el radio del borde, los lados superior, inferior, izquierdo y derecho.

{}

Choice

Los campos de elección son una especie de sinónimo de los elementos <select> y los botones de radio. Permiten al creador de contenido elegir un elemento de una lista de opciones. Pueden tomar dos formas visualmente en el editor de páginas. Puedes configurarlas para que aparezcan como un campo de selección o como botones de radio. Las opciones de un campo de elección pueden tener etiquetas separadas para sus valores. Después de que un módulo haya sido utilizado en una página, las etiquetas de las opciones pueden ser modificadas sin afectar negativamente a los sitios, ya que el valor sigue siendo el mismo. Sin embargo, si se cambia el valor, los módulos que antes tenían ese valor se desvinculan.

Los campos de elección son compatibles tanto con los temas como con los módulos. Los campos de elección pueden utilizarse como campos de estilo.

choice-field-dropdown
// Choice field { "name" : "img_position", "label" : "Image Position", "required" : false, "locked" : false, "display" : "select", "choices" : [ [ "img--left", "Image Left - Text Right" ], [ "img--right", "Text Left - Image Right" ] ], "type" : "choice", "default" : "img--left" }
Campo booleano
ParámetroTipoDescription Default
choices
Array

Matriz de pares de valores y etiquetas. Los valores aparecen en primer lugar.

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

Establece el valor seleccionado predeterminado de la matriz de elección.

display
String

Establece la forma en que el campo se muestra a los usuarios. Las dos opciones son "radio" y "select".

"select"

Color

Los campos de color proporcionan una interfaz de selección de colores para los creadores de contenido. Admiten tanto colores sólidos como transparencias. Son una opción perfecta para cuando se quiere dar a los creadores de contenido un control total sobre los colores dentro de un módulo.

Los campos de color son compatibles tanto con los temas como con los módulos.
Los campos de color pueden utilizarse como campos de estilo.

Campo de color

La opción de opacidad está desactivada para los módulos que tienen email incluido en el host_template_types.

// color field { "name" : "bg_color", "label" : "Background color", "required" : false, "locked" : false, "type" : "color", "default" : { "color" : "#ff0000", "opacity" : 100 } }
Campo de color
ParámetroTipoDescription Default
default
Object

Establece el color y la opacidad seleccionados por opción predeterminada.

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

CTA

Los campos de llamada a la acción (CTA) permiten a los usuarios elegir un CTA para mostrar. Los CTA son esencialmente botones o enlaces rastreables. Los creadores de contenido crean CTA que pueden utilizarse en todo el sitio. 

Los campos de CTA son compatibles con los módulos.
Los campos de CTA están disponibles en CMS Hub Pro y Enterprise.

Campo de llamada a la acción
// CTA field { "name" : "cta", "label" : "CTA", "required" : false, "locked" : false, "type" : "cta", "default" : null }
Campo de CTA
ParámetroTipoDescription Default
default
String

El CTA seleccionado por opción predeterminada. Espera un id de CTA que se puede encontrar en la URL al editar un CTA en el administrador de CTA.

null

Objeto del CRM

Los campos de objeto del CRM proporcionan una forma para que los usuarios elijan una instancia individual de un objeto del CRM para mostrarlo. 

module.fieldname.properties devuelve las propiedades obtenidas de esta 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 son compatibles con los módulos.
Los campos de objeto del CRM están disponibles en CMS Hub Pro y Enterprise.

Campo de objeto del CRM
// fields.json { "name" : "crmobject_field", "label" : "CRM object", "required" : false, "locked" : false, "object_type" : "CONTACT", "properties_to_fetch" : [ ], "type" : "crmobject", "default" : { "id" : 1 } }
Campo de objeto del CRM
ParámetroTipoDescription Default
object_type
Requerido
String

Tipo de objeto del CRM que el usuario puede elegir. Tipos de objetos del CRM admitidos

properties_to_fetch
Array

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
Object

Objeto con el id de la instancia del objeto seleccionado por opción predeterminada. ID de contacto, ID de la empresa, etc

null

Fecha

Los campos de fecha ofrecen una interfaz de selección de fecha para facilitar a los creadores de contenido la selección de una fecha. Devuelve una marca de tiempo que puedes utilizar en tu código.

Los campos de fecha son compatibles con los módulos.

Campo de fecha con selector de calendario abierto
// Date field { "name" : "event_start_date", "label" : "Event Date", "required" : false, "locked" : false, "type" : "date", "default" : 1577854800000 }
Campo de fecha
ParámetroTipoDescription Default
default
Timestamp

La marca de tiempo Unix Epoch para la fecha y la hora que deseas por opción predeterminada. Deja esto 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 hora del día. Devuelve una marca de tiempo que puedes utilizar en tu código.

Los campos de fecha y hora son compatibles con los módulos.

Inicio del evento
// Date and time field { "name" : "event_start", "label" : "Event Start", "required" : false, "locked" : false, "type" : "datetime", "default" : 1577854800000 }
Campo de fecha y hora
ParámetroTipoDescription Default
default
Timestamp

La marca de tiempo Unix Epoch para la fecha y la hora que deseas por opción predeterminada. Deja esto 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 al usuario seleccionar varias direcciones de correo electrónico. Puede utilizarse para mostrar información de contacto. El campo de correo electrónico devuelve una matriz de direcciones de correo electrónico seleccionadas que puede recorrer en bucle.

Los campos de correo electrónico son compatibles con los módulos.

email-field
// Email address field { "name" : "emails", "label" : "Email address", "required" : false, "locked" : false, "type" : "email", "default" : null }
Dirección de correo electrónico no válida
ParámetroTipoDescription Default
default
Array

Matriz de cadenas de direcciones de correo electrónico ["bob@example.com", "dennis@example.com"]

null

Incrustar

Los campos de incrustación permiten al usuario agregar una URL de un sitio habilitado para oEmbed o pegar un código de incrustación de otro sitio. Para saber más sobre el uso de oEmbed en HubSpot, y ver casos de uso, visita nuestro documento sobre oEmbed.

Incrustar campo
// embed field { "name" : "embed_field", "label" : "Embed", "required" : false, "locked" : false, "supported_source_types" : [ "oembed", "html" ], "supported_oembed_types" : [ "photo", "video", "link", "rich" ], "type" : "embed", "default" : { "source_type" : "oembed" } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
supported_source_types
Array

Tipos de fuente admitidos para las URL de oEmbed(oembed), el código HTML incrustado(html), o Media Bridge(media_bridge).

["oembed", "html"]
supported_oembed_types
Array

El tipo de oEmbed admitido incluye "photo", "video", "link", y "rich". No se aplica a los supported_source_types de html

[ "photo", "video", "link", "rich" ]
supported_media_bridge_providers
Array

Conjunto de ID de proveedores que determinan qué proveedores de Media Bridge están disponibles para seleccionar el contenido.

Nota: Este parámetro también se rellenará cuando se instale una aplicación de proveedor de Media Bridge

type
String

Este parámetro siempre se ajusta a "embed"

"embed"
default
Dict

Una matriz que contiene el parámetro "source_type". Este parámetro tiene un valor basado en una cadena de las opciones proporcionadas en el parámetro "supported_source_types".

oembed

Archivo

Los campos de archivo permiten al usuario cargar un archivo en el administrador de archivos, o en el administrador de documentos, y facilitan la tarea de adjuntar elementos que se encuentran en esas ubicaciones. Esto puede ser útil para enlazar con archivos PDF o de otros formatos. Para mostrar imágenes en una página debe utilizar el campo de imagen.

Los campos de archivo son compatibles con los módulos.

Campo de archivo
// Email address field { "name" : "file_field", "label" : "File", "required" : false, "locked" : false, "type" : "file", "picker" : "file", "default" : null }
Campo de archivo
ParámetroTipoDescription Default
default
String

URL del archivo

null
picker
String

Valores aceptables: "file", "document", "image".
El selector muestra los activos cargados en el 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 al creador de contenido designar un correo electrónico que se enviará en respuesta a un envío de formulario. Esto funciona en conjunto con la etiqueta de formulario HubL, a través del parámetro simple_email_campaign_id.

Los campos de correo electrónico de seguimiento son compatibles con los módulos.

campo de correo electrónico de seguimiento
// Followup email field { "name" : "followup_email", "label" : "Followup email", "required" : false, "locked" : false, "type" : "followupemail", "default" : null }
Dirección de correo electrónico no válida
ParámetroTipoDescription Default
default
String

Id del correo

null

Font

Los campos de fuente proporcionan a los creadores de contenido controles básicos de estilo de fuente. Los creadores de contenido pueden 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 de Google y fuentes estándar seguras para la web. 

Los campos de fuentes son compatibles tanto con los temas como con los módulos. Los campos de fuente pueden utilizarse como campos de estilo.

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

Nota: La familia de fuentes está determinada por la combinación de font y font_set. Debes tener ambos para cargar la fuente. Cuando se heredan campos, esto significa que hay que heredar ambos valores.

Campo de fuente
ParámetroTipoDescription Default
default
Object

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
Boolean

HubSpot carga automáticamente la fuente web seleccionada en la página si HubL selecciona y hace referencia a la fuente en una hoja de estilo o en un módulo. Establece esto en false, si ya estás cargando la fuente en la página, de esa manera la fuente no se cargará dos veces.

true
visibility
Object

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
String

Si utilizas una fuente de Google, la variante de la fuente que deseas utilizar. Por ejemplo, para utilizar la versión con peso de 700 de una fuente, configúrala como "700". Para utilizar la versión cursiva de un tipo de letra con un peso de 400, configúrala como "400i".

Formulario

Los campos de formulario permiten al creador de contenido designar un formulario en su cuenta. A continuación, puedes utilizar esto para renderizar un formulario en una página utilizando la etiqueta de formulario HubL

Los campos de formulario son compatibles con los módulos.

form field-Aug-21-2020-08-09-55-35-PM
// Form field { "name" : "form", "label" : "Form", "required" : false, "locked" : false, "type" : "form", "default" : { "form_id" : "f7110408-1935-4ed3-8a8e-293bb1c9d1ec", "response_type" : "inline", "message" : "Thanks for submitting the form.", "gotowebinar_webinar_key" : null, "form_type" : "HUBSPOT" } }
Dirección de correo electrónico no válida
ParámetroTipoDescription Default
default
Object

Objeto para formularios que contiene el id de formulario seleccionado, el tipo de respuesta y el mensaje.

{ "response_type" : "inline", "message" : "Thanks for submitting the form." }

Gradiente

Este campo permite a los creadores de contenido crear y configurar gradientes. En este momento los degradados lineales admiten hasta 5 paradas de color. Los campos de gradiente tienen una propiedad .css que devuelve el CSS basado en el valor del campo. Más información sobre la propiedad CSS generada.

Los campos de gradiente son compatibles con los módulos. Los campos de gradiente solo pueden utilizarse como campos de estilo.

Campo de gradiente
// Gradient field { "name": "bg_gradient", "label": "Background gradient", "help_text": "Sets a gradient behind the content", "required": false, "type": "gradient", "default": { "colors": [{ "color": { "r": 0, "g": 0, "b": 0, "a": 1 } }, { "color": { "r": 255, "g": 255, "b": 255, "a": 1 } }], "side_or_corner": { "verticalSide": "BOTTOM", "horizontalSide": null } } }
Dirección de correo electrónico no válida
ParámetroTipoDescription Default
default
Object

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 a un creador de contenido seleccionar una fila individual (o filas si se utilizan campos de repetición) de una tabla definida. A continuación, puedes utilizar este campo para crear listas, tablas y recursos definidos por el usuario, entre otros.

Los campos de fila de HubDB son compatibles con los módulos.
Los campos de fila de HubDB están disponibles en CMS Hub Pro y Enterprise.

hubdb-row-field
// HubDB Row field { "name" : "hubdbrow_field", "label" : "HubDB row", "required" : false, "locked" : false, "table_name_or_id" : "3096859", "columns_to_fetch" : [ "name", "price", "desc" ], "display_columns" : [ "name", "price", "desc" ], "display_format" : "%0 - %1 :::: %2", "type" : "hubdbrow", "default" : { "id" : 4450468943 } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
table_name_or_id
String

El nombre o ID de la tabla HubDB. Este campo es obligatorio.

columns_to_fetch
Array

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
Array

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
String

El formato en el que deseas 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
Object

Objeto que contiene "id" para establecer la fila de hubdb por opción predeterminada.

{ “id” : null }

Tabla de HubDb

Los campos de la tabla HubDB permiten al creador de contenido designar un HubDB en su cuenta. A continuación, puedes utilizar esto para renderizar un formulario en una página utilizando la etiqueta de formulario HubL. Devuelve el id de la tabla, que puedes utilizar con las funciones HubDB HubL.

Los campos de la tabla HubDB son compatibles con los módulos. Los campos de la tabla HubDB están disponibles en CMS HubPro y Enterprise.

Campo HubDB
// HubDB Table field { "name" : "recipe_table", "label" : "Recipe Table", "required" : false, "locked" : false, "type" : "hubdbtable", "default" : 2010782 }
Dirección de correo electrónico no válida
ParámetroTipoDescription Default
default
String

Tabla de HubDB

null

Icono

Los campos de iconos proporcionan una interfaz de usuario de selector de iconos para facilitar a los creadores de contenido la adición de iconos a sus módulos. El campo Icono está precargado con iconos de FontAwesome.

Los campos de iconos son compatibles con los módulos. Los campos de iconos pueden utilizarse como campos de estilo.

campo de icono
// Icon field { "name" : "icon_field", "label" : "Icon", "required" : false, "locked" : false, "icon_set" : "fontawesome-5.14.0", "type" : "icon", "default" : { "name" : "accessible-icon", "unicode" : "f368", "type" : "REGULAR" } }
Campo ie icono
ParámetroTipoDescription Default
default
Object

Objeto de icono

icon_set
String

El conjunto de iconos de FontAwesome a utilizar. Los valores posibles son:
fontawesome-5.14.0
fontawesome-5.0.10

fontawesome-5.14.0

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.

Campo de imagen

Los campos de imagen son compatibles con los módulos.
Las imágenes pueden utilizarse como campos de estilo 
Solo debes utilizar los campos de Imagen como campos de estilo, si la imagen va a ser puramente de presentación, no transmite significado y no es una imagen de fondo. Esto es para seguir las mejores prácticas de accesibilidad.

// Image field { "name" : "image_field", "label" : "Image", "required" : false, "locked" : false, "responsive" : true, "resizable" : true, "show_loading" : false, "type" : "image", "default" : { "size_type" : "exact", "src" : "", "alt" : "image-alt-text", "loading" : "lazy", "width" : 128, "height" : 128, "max_width" : 128, "max_height" : 128 } }
Campo de enlace
ParámetroTipoDescription Default
default
Object

Establece las propiedades para el tamaño de la imagen, el texto alternativo, etc. Puede contener las siguientes propiedades: 

  • size_type: si el tamaño de la imagen es automático o manual:
    • "auto": HubSpot ajustará automáticamente el tamaño de la imagen en función de sus dimensiones originales.
    • "auto_custom_max": HubSpot ajustará automáticamente el tamaño de la imagen con las dimensiones máximas establecidas mediante las propiedades "max_height" y "max_width ".
    • "exact": HubSpot dimensionará la imagen en base a las dimensiones establecidas mediante las propiedades "height" y "width".
  • src: la URL de la imagen predeterminada. Debe ser una ruta absoluta a una imagen.
  • alt: el texto alternativo predeterminado de la imagen.
  • loading: las opciones de carga diferida de la imagen. Puede establecerse como "disabled" (default), "eager", o "lazy".
{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }
responsive
Boolean

determina si la imagen debe actuar de forma responsiva o tener una altura y anchura fijas.

true
show_loading
Boolean

Determina si los controles para elegir la carga diferida 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 proporcionen enlaces a URL y direcciones de correo electrónico. Para los enlaces externos, los creadores de contenido eligen "externo". Para los enlaces de correo electrónico "dirección de correo electrónico". Por último, para 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.

Los campos de enlace son compatibles con los módulos.

campo de enlace
// Link field { "name" : "link", "label" : "Link", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "link", "show_advanced_rel_options" : false, "default" : { "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false } }
Campo de enlace
ParámetroTipoDescription Default
default
Object

Objetos del CRM

{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }
supported_types
Array

lista de los tipos de enlaces que este campo permite a los creadores de contenido seleccionar. Elimina de la lista los tipos que no quieres que los creadores de contenido tengan acceso a establecer.

[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]
show_advanced_rel_options
Boolean

Si los creadores de contenido pueden ver las opciones avanzadas de rel. 

false

Logotipo

Los campos de logotipos permiten a los creadores de contenido especificar las imágenes de los logotipos que se utilizarán en una página, estableciendo por opción predeterminada 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 del logotipo son compatibles con los módulos.

campo de logotipo
// Logo field { "name" : "logo", "label" : "Logo", "required" : false, "locked" : false, "type" : "logo", "default" : { "override_inherited_src" : false, "src" : null, "alt" : null } }
Campo de enlace
ParámetroTipoDescription Default
default
Object

Objeto de logotipo

{ "override_inherited_src" : false, "src" : null, "alt" : null }

Menú

Los campos de menú ofrecen una interfaz sencilla para que los creadores de contenido creen, editen y seleccionen un menú de navegación 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 y el pie de página y otro contenido global.  Utiliza este campo junto con la etiqueta menu o la función menu(), para mostrar un menú dentro de tu módulo.

Para los menús que no tienen sentido reutilizar en otras páginas, como un menú de índice, utiliza el campo de menú simple.

Los campos de menú son compatibles con los módulos.

campo de menú
// Menu field { "name" : "menu", "label" : "Menu", "required" : false, "locked" : false, "type" : "menu", "default" : 12345678911 }
Campo de enlace
ParámetroTipoDescription Default
default
Integer

El ID del menú. El valor por opción predeterminada 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 valores numéricos y opciones. Esto se puede utilizar para crear artículos basados en porcentajes o cualquier cosa en la que se necesiten números para la entrada.

Los campos numéricos son compatibles con los módulos. Los campos numéricos pueden utilizarse como campos de estilo.

Campo numérico
// Number field { "name" : "number_field", "label" : "Number", "required" : false, "locked" : false, "display" : "slider", "min" : 1, "max" : 10, "step" : 1, "type" : "number", "prefix": "", "suffix" : "", "default" : null }

Nota: El uso de los parámetros sufijo y prefijo no tiene ningún efecto sobre el valor numérico del campo. Son simplemente para mostrarlos en el editor de contenido.

Campo de enlace
ParámetroTipoDescription Default
default
Number

Un número predeterminado a utilizar.

null
prefix
String

Se agrega como prefijo al campo numérico.

suffix
String

Se agrega como sufijo al campo numérico.

Página

Los campos de página proporcionan una interfaz para que los creadores de contenido seleccionen las páginas del sitio y las páginas de destino.

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 o content_by_ids, puedes utilizar los datos de las páginas seleccionadas en la página actual.

Los campos de página son compatibles con los módulos.

// Page field { "name" : "page_field", "label" : "Page", "help_text" : "Pulls data from the selected page.", "required" : false, "locked" : false, "placeholder" : "Page to pull from", "type" : "page", "default" : null }
Campo de enlace
ParámetroTipoDescription Default
default
Integer

Un identificador de página predeterminado a 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 imprime como HTML. Si no deseas que los creadores de contenido tengan capacidades de formateo, utiliza los campos de texto.

Los campos de texto enriquecido son compatibles con los módulos.

Campo de texto enriquecido
// Rich text field { "name" : "description", "label" : "Description", "required" : false, "locked" : false, "type" : "richtext", "default" : null }
Campo de enlace
ParámetroTipoDescription Default
default
String

la cadena de contenido a mostrar admite HTML. 

Nota: No se puede utilizar la función get_asset_url dentro de esta propiedad predeterminada. 

""
enabled_features
Opcional
Array

Una serie de elementos que permiten configurar la barra de herramientas del editor de texto enriquecido y las opciones disponibles para los editores de contenido. 

Menú simple

Los campos de menú sencillos proporcionan una interfaz sencilla para que los creadores de contenido creen un menú de navegación que no sea reutilizable en otras páginas. Para los menús que deben ser reutilizables, utiliza el campo de menú. Un momento en el que posiblemente desees esto es para un menú de tabla de contenido que enlaza con los títulos en 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 son compatibles con los módulos.

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

Estructura JSON para el menú y las opciones secundarias del menú.

[]

Espaciado

Este campo proporciona una interfaz de usuario (UI) para que los creadores de contenido establezcan 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.

Los campos de espaciado son compatibles con los módulos.
Los campos de espaciado solo pueden utilizarse como campos de estilo.

captura de pantalla del campo de estilo de espaciado expandido en el editor de páginas
// Spacing field { "name": "img_spacing", "label": "Spacing around image", "required": false, "type": "spacing", "default": { "padding": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" }, "left": { "value": 10, "units": "px" }, "right": { "value": 10, "units": "px" } }, "margin": { "top": { "value": 10, "units": "px" }, "bottom": { "value": 10, "units": "px" } } } }
Campo de enlace
ParámetroTipoDescription Default
default
Object

que contiene un objeto de relleno y un objeto de margen. En este momento, el margen solo admite ajustes "superiores" e "inferiores".

{}

Etiqueta

Los campos de etiquetas ofrecen un selector de etiquetas para los creadores de contenido. Este selector de etiquetas devuelve un identificador de etiqueta de blog que puede utilizarse en las funciones relacionadas con las etiquetas de blog, como URL de la etiqueta de blog y Publicaciones recientes de la etiqueta de blog.

Los campos de etiquetas son compatibles con los módulos.

campo de etiqueta
// Tag field { "id" : "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9", "name" : "blog_tag", "label" : "Blog Tag", "required" : false, "locked" : false, "tag_value" : "SLUG", "type" : "tag", "default" : null }
Campo de etiqueta
ParámetroTipoDescription Default
default
String

ID de la etiqueta del blog

null

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

Los campos de texto son compatibles con los módulos.

campo de texto
// Text field { "name" : "product_name", "label" : "Product Name", "required" : false, "locked" : false, "validation_regex" : "", "allow_new_line" : false, "show_emoji_picker" : false, "type" : "text", "default" : "" }
Campo de enlace
ParámetroTipoDescription Default
default
String

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 materiales, ya que existe un tipo de campo específico para ello.

Los campos de alineación de texto son compatibles con los módulos. Los campos de alineación de texto solo pueden utilizarse como campos de estilo.

Campo de alineación del texto
// text alignment field { "name": "heading_align", "label": "Heading alignment", "required": false, "type": "textalignment", "default": { "text_align": "LEFT" } }
Campo del blog
ParámetroTipoDescription Default
default
Object

Objeto que contiene horizontal_align y vertical_align.

alignment_direction
String

Determina si se deben mostrar solo los controles de alineación horizontales, solo los verticales o ambos. Puede ser:

  • HORIZONTAL
  • VERTICAL
  • AMBOS
BOTH

URL

Los campos 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 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 dictar los valores para ello. Si quieres que el usuario tenga el control, utiliza campos de enlace en su lugar.

Los campos URL son compatibles con los módulos.

Campo URL
// URL field { "name" : "url", "label" : "URL", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "url", "default" : { "content_id" : null, "href" : "http://example.com", "type" : "EXTERNAL" } }
Campo de enlace
ParámetroTipoDescription Default
default
Object

Objeto 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
Array

lista de los tipos de enlaces que este campo permite seleccionar a los creadores de contenido. Elimina de la lista los tipos que no quieres que los creadores de contenido tengan acceso a establecer.

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

Campo de video
//Video field { "id" : "ca4a319e-5b58-422e-47ac-49ce1b51b507", "name" : "videoplayer_field", "label" : "Video", "required" : false, "locked" : false, "type" : "videoplayer", "show_advanced_options" : false, "default" : { "player_id" : 32173842991, "height" : 1224, "width" : 1872, "conversion_asset" : { "type" : "CTA", "id" : "c3e4fa03-2c69-461d-b9af-22b2fde86bc7", "position" : "POST" }, "loop_video" : false, "mute_by_default" : false, "autoplay" : false, "hide_control" : false } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
default
Object

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
Boolean

Si los creadores de contenido pueden ver las opciones avanzadas predeterminadas.

false

parámetros del objeto conversion_asset

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

Acepta "FORM", "CTA" o ""

""
id
String

El identificador del tipo de formulario o CTA

""
position
String

Si el material de conversión debe mostrarse antes de que comience el video o después de que termine. Acepta "PRE" o "POST".

""

¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.