Última modificación: 22 de agosto de 2025
Esta página es una guía de referencia completa de la sintaxis y los parámetros disponibles para todas las etiquetas HubL, incluyendo las etiquetas para las páginas del sistema, como la página de suscripción de correo electrónico. Cada etiqueta que aparece a continuación contiene una muestra de la sintaxis básica, así como un ejemplo con parámetros y salida de código.
Si estás creando áreas de arrastrar y soltar, descubre más información sobre las etiquetas de las áreas de arrastrar y soltar. Si mantienes un sitio web antiguo, también puedes consultar la lista de funciones de HubL obsoletas.
La mayoría de las etiquetas de esta página tienen equivalentes de módulos predeterminados. Los módulos se pueden utilizar dentro de las áreas de arrastrar y soltar dnd_areas y columnas flexibles, lo que los hace más potentes y fáciles de usar que las etiquetas que ves aquí.
Comentarios del blog
Renderiza el código de inserción de comentarios en una plantilla de blog, incluyendo los comentarios y el formulario para comentar. Obtén más información sobre cómo personalizar las configuraciones y formularios de los comentarios del blog en este artículo de la base de conocimientos.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
limit | Número | Fija el número máximo de comentarios. | 5000 |
select_blog | ”default”, predeterminado o ID del blog | Especifica qué blog está conectado a los comentarios que se insertan. Este parámetro acepta como argumentos "default" o un ID de blog (disponible en la URL del panel del blog). Si quieres utilizar el blog predeterminado, este parámetro es innecesario. | default |
skip_css | Booleano | Si se define esta opción como verdadera, el CSS de los comentarios del blog dejará de cargarse. | false |
message | Cadena | El mensaje que se mostrará cuando no haya comentarios. De forma predeterminada, aparece como vacío (no se muestra el texto). | "" |
Contenido del blog
Mientras que los diseños de arrastrar y soltar incluyen un módulo de contenido de blog, estos módulos no se crean con una sola etiqueta. Por el contrario, utilizan la lógica condicional para definir cómo debe presentarse una publicación y un listado de blog. Puedes obtener más información sobre la codificación de plantillas para blogs aquí.Filtro de publicación de blog
Crea un listado enlazado de posts por tema, mensajes por mes o mensajes por autor.Nota:
Este módulo solo se puede utilizar en las plantillas de publicaciones de blog.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
select_blog | ”default” o ID del blog | Selecciona el blog de HubSpot que se va a utilizar. Este parámetro utiliza un ID de blog o un valor “default”. | "default" |
expand_link_text | Cadena | Enlace de texto que se mostrará si hay más publicaciones que el número definido en max_links. Excluye el parámetro para omitir el enlace. | "see all" |
list_title | Cadena | Título de la lista para mostrar. | "" |
list_tag | Cadena | Define la etiqueta utilizada para la lista. Por lo general, el valor debe ser "ul" o "ol" . | "ul" |
title_tag | Cadena | Define la etiqueta utilizada para el título de la lista. | "h3" |
max_links | Número | Número máximo de valores de filtro que se mostrarán. Excluye el parámetro para mostrar todo. | 5 |
filter_type | Enumeración | Selecciona el tipo de filtro. Los valores posibles son "topic" , "month" y "author" . | "topic" |
Listado de publicaciones de blog
Agrega un listado de las publicaciones más populares o más importantes.Nota:
Esta etiqueta solo se puede utilizar en las plantillas de publicaciones de blog. El contenido de la etiqueta se carga de forma asíncrona en el lado del cliente. Como resultado, si quieres modificar la sección de publicaciones después de que se haya cargado, tendrás que definir una función JS global para manejar esa manipulación. Utiliza la funciónhsPostListingComplete(feeds)
, donde feeds
es el selector de jQuery de todas las secciones que se han completado. Se recomienda modificar directamente el objeto DOM en esa función.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
select_blog | ”default” o ID del blog | Selecciona el blog de HubSpot que se utilizará para el listado. Este parámetro utiliza un ID de blog o un valor "default" . | "default" |
list_title | Cadena | Título de la lista para mostrar. | "" |
list_tag | Cadena | Define la etiqueta utilizada para la lista. Por lo general, el valor debe ser "ul" o "ol" . | "ul" |
title_tag | Cadena | Define la etiqueta utilizada para el título de la lista. | "h3" |
listing_type | Cadena | Muestra las publicaciones del blog según las más recientes o las más populares en un período de tiempo. Los valores posibles incluyen: recent, popular_all_time, popular_past_year, popular_past_six_months y popular_past_month. | "recent" |
max_links | Número | Número máximo de entradas que se publicarán en la lista. | 5 |
include_featured_image | Booleano | Mostrar la imagen destacada junto con el enlace de la publicación. | False |
Publicaciones relacionadas con el blog
Agrega un listado de publicaciones de blog basado en un conjunto de parámetros comunes a todas las entradas de todos los blogs. Las publicaciones se seleccionan según su nivel de relevancia con respecto a los parámetros establecidos. Ten en cuenta que esta etiqueta no genera un módulo editable para la página o la publicación y se configura completamente con HubL.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
blog_ids | Número | Los ID de los blogs de los que se incluirán publicaciones. Si no se especifica, incluirá publicaciones del blog predeterminado. | |
blog_post_ids | Cadena | Los ID de las publicaciones de blog que se usarán para encontrar publicaciones relacionadas que mostrar, separados por comas. Utiliza este parámetro solo cuando el widget se muestre en páginas. Cuando se usa en las publicaciones de blog, buscará publicaciones relevantes basadas en la publicación de blog que se muestra actualmente. | |
blog_post_override | Cadena | Los ID de las publicaciones de blog que siempre deben aparecer en el listado devuelto, sin importar los demás parámetros o filtros (separados por comas). | |
limit | Número | El número máximo de publicaciones que se incluirán en la lista. | 3 |
tags | Cadena | Las etiquetas del blog que deberían utilizarse para determinar si una publicación es relevante (separadas por comas). Las publicaciones de blog con las etiquetas especificadas tendrán una clasificación más alta en cuanto a la relevancia. | |
tag_boost | Número | Aumenta la relevancia de las etiquetas especificadas en el parámetro tags para generar publicaciones relacionadas. Incluye este parámetro para extraer publicaciones más relacionadas con las publicaciones que se muestran actualmente o las publicaciones especificadas. Acepta números positivos. | |
start_date | fecha y hora | Fecha de publicación más temprana. Puedes ver un ejemplo a continuación. | |
end_date | fecha y hora | Fecha de publicación más reciente. Puedes ver un ejemplo a continuación. | |
blog_authors | Cadena | Los nombres de los autores de los que se incluirán los mensajes (separados por comas). Puedes ver un ejemplo a continuación. | |
path_prefixes | Cadena | Rutas de URL o subdirectorios desde los que incluir las publicaciones (separadas por comas). Si una publicación de blog tiene un prefijo similar en la ruta, la relevancia de la publicación aumenta, mejorando su clasificación en el listado. | |
callback | Cadena | El nombre de una función de JavaScript para renderizar las publicaciones de blog devueltas. A la función se le pasa una matriz de objetos de publicación de blog para darle formato. Si no se especifica el parámetro callback ni el parámetro post_formatter , la etiqueta generará HTML en un formato predeterminado. Puedes ver un ejemplo a continuación. | none |
post_formatter | Cadena | El nombre de una macro personalizada para renderizar las publicaciones de blog devueltas. A la macro se le pasan tres parámetros que son el objeto de la publicación de blog a dar formato, el recuento en la iteración de publicaciones de blog y el recuento total de publicaciones de blog en los resultados. Si no se especifica o se define como default , se utilizará el formateador incorporado para dar formato a cada publicación. | default |
allow_any_language | Booleano | Cuando se define como false , solo aparecerán las publicaciones en el mismo idioma que la página en la que se utiliza la etiqueta. Cuando se define como true , la restricción de idioma se ignora y todas las publicaciones relacionadas se extraen independientemente del idioma de la página. | False |
Recomendamos utilizar el parámetro
callback
en lugar de post_formatter
para mejorar la velocidad de carga de la página.Ejemplos
El siguiente ejemplo genera una lista de publicaciones escritas por uno de los tresblog_authors
especificados en dos blogs diferentes:
blog_post_ids
, por lo que se puede usar en una página:
callback
para controlar la salida HTML de la lista de publicaciones:
Compartir el blog en redes sociales
Compartir el blog en redes sociales muestra los contadores de contenido compartido de las publicaciones de blog (si están activos en la configuración del contenido).Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
select_blog | ”default” o el ID del blog | Especifica con qué blog están conectados los contadores de compartidos. Este parámetro acepta como argumentos "default" o un ID de blog (disponible en la URL del panel del blog). Si quieres utilizar tu blog predeterminado, este parámetro es innecesario. | default |
downgrade_shared_url | Booleano | Usa HTTP en la URL enviada a las redes sociales. Se utiliza para mantener los recuentos cuando se actualizan los dominios a solo HTTPS. | false |
Suscripción al blog
Una etiqueta de suscripción a un blog muestra el formulario de suscripción para un blog determinado. Este formulario se genera automáticamente cada vez que se crea un blog en la configuración de contenido, y cada blog cuenta con su propio formulario de suscripción. Ten en cuenta que los campos del formulario de suscripción se configuran en el editor de formularios de la interfaz de usuario.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
select_blog | ”default” o ID del blog | Selecciona el formulario de suscripción al blog que se va a mostrar. Este parámetro acepta como argumentos "default" o un ID de blog (disponible en la URL del panel del blog). Si quieres utilizar el blog predeterminado, este parámetro es innecesario. | default |
title | Cadena | Define el texto de una etiqueta h3 encima del formulario de suscripción. | "Subscribe Here!" |
no_title | Booleano | Si es “True”, se elimina la etiqueta h3 que está encima del título. | false |
response_message | Cadena | Define el mensaje de agradecimiento que se muestra cuando un usuario envía un formulario. Es compatible con HTML. | "Thanks for Subscribing!" |
edit_form_link | Cadena | Este parámetro genera un enlace que permite a los usuarios hacer clic en la pantalla del editor de formularios correspondiente. Esta opción solo se mostrará en el editor de la interfaz del usuario si los módulos tienen el parámetro overrideable=True .Por ejemplo, para reemplazar Hub ID y el ID del formulario con la información de la URL de tu formulario de suscripción al blog predeterminado: edit_form_link=" <ul>\n <li><a href="https://developers.hubspot.es/docs/forms/HubID/FormID/edit/" target="_blank">Default Blog</a></li> \n</ul> " Ten en cuenta que los caracteres de nueva línea \n agregan una línea adicional de espacio antes y después del enlace. |
Booleano
Una etiqueta booleana crea una casilla de verificación en la interfaz de usuario que imprime “verdadero” o “falso”. Además de imprimir el valor, este módulo es útil para definir la lógica condicional de la plantilla, cuando se combina con el parámetroexport_to_template_context
.
Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
value | Booleano | Determina si la casilla de verificación está marcada o desmarcada. | False |
Elección
Una etiqueta de elección crea una lista desplegable en el editor de contenidos de la interfaz del usuario que imprime el valor seleccionado por el usuario. Las etiquetas de opción son ideales para dar a los usuarios un conjunto de ajustes preestablecidos, como la impresión del tipo de página como el encabezado de la página. Además de imprimir el valor de la opción, esta etiqueta es útil para definir la lógica condicional de la plantilla cuando se combina con el parámetroexport_to_template_context
.
Parámetro | Tipo | Descripción |
---|---|---|
value | Booleano | El valor predeterminado del campo para el menú desplegable |
choices | Secuencia | Una lista de valores separados por comas o una lista de pares valor-etiqueta. La sintaxis de los pares de etiquetas de valores es la siguiente: choices="[[\"value1\", \"Label 1\"], [\"value2\", \"Label 2\"]]" . El editor mostrará la etiqueta, mientras que imprimirá el valor en la página. |
Color
La etiqueta de color genera un selector de color en el editor de las páginas de la interfaz de usuario que imprime un valor de color HEX en una plantilla. Ten en cuenta que este módulo solo puede utilizarse en las plantillas, no en los archivos CSS. Si utilizas esta etiqueta en un<style>
o en un CSS en línea, es recomendable usar el parámetro no_wrapper=True
para eliminar el contenedor <span>
.
Parámetro | Tipo | Descripción |
---|---|---|
color | Cadena | Un valor predeterminado de color HEX para el selector de color |
CTA
Una etiqueta de llamada a la acción o CTA permite a los usuarios agregar un botón de llamada a la acción de HubSpot a un área predefinida de una página.Parámetro | Tipo | Descripción |
---|---|---|
embed_code | Cadena | El código de inserción para la CTA. \n diferencia los saltos de línea. |
full_html | Cadena | El código de inserción para la CTA (igual que embed_code). \n diferencia los saltos de línea. |
image_src | Cadena | URL de la imagen src que define la imagen de vista previa en el editor de contenido. |
image_editor | Cadena | Marcador para la vista previa del editor de imágenes |
guid | Cadena | El número único de ID de la CTA. Este número de identificación está disponible en la URL de la pantalla de detalles de una CTA en particular. Este parámetro se utiliza para elegir qué CTA mostrar de forma predeterminada. |
image_html | Cadena | HTML de la imagen de la CTA sin el script de la CTA.* |
image_email | Cadena | Versión del código de la CTA apta para correo electrónico.* |
*Si bien estos parámetros se incluyen aquí para ofrecer una visión completa, el código que HubSpot genera para completarlos es muy específico. Si necesitas seleccionar una CTA predeterminada, en lugar de desarrollar los parámetros desde cero, se recomienda configurar la CTA en un diseño de plantilla y luego clonar al archivo. Así, podrás copiar el módulo HubL de la CTA con todos los parámetros correctamente definidos.También hay una función de CTA que permite generar una CTA a partir de su ID.
HTML personalizado
Un módulo de HTML personalizado permite a los usuarios introducir HTML sin formato en el editor de contenidos. Si necesitas agregar una gran cantidad de HTML predeterminado a la etiqueta, puedes utilizar la sintaxis de bloques.Parámetro | Tipo | Descripción |
---|---|---|
value | Cadena | Define el contenido HTML predeterminado del módulo. |
Módulos personalizados
Los módulos personalizados permiten a los diseñadores crear un grupo personalizado de objetos de contenido editables que se utilizarán en las plantillas y páginas del CMS, al tiempo que permiten a los profesionales del marketing controlar el contenido específico que aparece en esos módulos página por página. Más información sobre los módulos personalizados y su sintaxis simplificada de HubL, aquí. Los módulos personalizados deben crearse en el editor de módulos personalizados, pero pueden incluirse en plantillas codificadas y módulos HubL. Verás un “fragmento de uso” en la barra lateral derecha del editor de módulos personalizados en “Uso de plantillas”. Los módulos personalizados requieren el ID del módulo como una cadena, así como un parámetro de ruta para especificar qué módulo cargar. El fragmento de uso también incluirá un parámetro de etiqueta. Consulta la sintaxis a continuación:Parámetro | Tipo | Descripción |
---|---|---|
module_id | Cadena | El ID del módulo que se renderizará. |
path | Cadena | La ruta del módulo que se renderizará. Incluye la barra inclinada para la ruta absoluta, de lo contrario la ruta es relativa a la plantilla. Consulta los módulos predeterminados de HubSpot con rutas correspondientes a sus etiquetas de HubL, como @hubspot/rich_text, @hubspot/linked_image, etc. |
Marcadores de posición del editor
Para mostrar el contenido del marcador de posición de un módulo en el editor, puedes añadir el contenido predeterminado a los campos del módulo o utilizar la etiqueta de HubLeditor_placeholder
. Esta etiqueta puede ser útil cuando el módulo no tiene o necesita contenido predeterminado, o bien para optimizar la construcción del módulo.

La primera instrucción
if
identifica si el módulo está presente. Luego, la
instrucción elif
identifica si el módulo se renderiza en el contexto del
editor utilizando la variable is_in_editor
. Esta variable devuelve true
si
el contenido se está renderizando en cualquier editor de contenidos, pero
puedes especificar aún más con las variables del editor y la vista previa
.meta.json
del módulo.
Parámetro | Tipo | Descripción |
---|---|---|
show_module_icon | Booleano | Determina si se debe mostrar el ícono del módulo. |
title | Cadena | El título que aparece en el marcador de posición. |
description | Cadena | La descripción que aparece en el marcador de posición. |
Columna flexible
Las columnas flexibles son columnas verticales en una plantilla que permiten a los creadores de contenido insertar y eliminar módulos en la página utilizando el editor de contenido. Al codificar una columna flexible con HubL, puedes elegir otros módulos de HubL para que aparezcan en la columna flexible por opción predeterminada. El código de ejemplo que aparece a continuación muestra la sintaxis básica y una columna flexible de ejemplo con un módulo de texto enriquecido y un formulario como contenido predeterminado. Ten en cuenta que las columnas flexibles solo pueden agregarse a las plantillas de página, pero no a las plantillas de blog o de correo electrónico. Los módulos no pueden contener columnas flexibles, pero pueden contener campos y grupos repetibles, lo que proporciona una funcionalidad similar.Nota:
Cuando uses esta etiqueta, lalabel
debe seguir el valor name
de la columna flexible para funcionar en el editor de contenido. Por ejemplo, la siguiente sintaxis no es válida:[% widget_container label="My label" "my_flexible_column" %}
Formulario
Permite a los usuarios seleccionar un formulario de HubSpot para agregarlo a su página. El siguiente código incluye un ejemplo de uso de la sintaxis estándar de etiquetas HubL y un ejemplo de uso de la sintaxis de bloques.Parámetro | Tipo | Descripción |
---|---|---|
form_key | Cadena | Especifica un ID único para el formulario a nivel de página. |
form_to_use | Cadena | Especifica qué formulario cargar de forma predeterminada, basándose en el ID del formulario. Este ID está disponible en la URL del editor de formularios de cada formulario. |
title | Cadena | Rellena una etiqueta h3 en el encabezado del formulario. |
no_title | Booleano | Si es True , se elimina la etiqueta h3 que está encima del título. |
form_follow_ups_follow_up_type | Enumeración | Especifica las acciones de seguimiento, como inscribir a un contacto en un workflow o enviar un correo de seguimiento simple. Los valores posibles son no_action , simple y automation . |
simple_email_for_live_id | Número | Especifica el ID del correo de seguimiento simple para la página publicada. |
simple_email_for_buffer_id | Número | Especifica el ID del correo de seguimiento simple para la versión de guardado automático de una página. |
follow_up_type_simple | Booleano | Si es “True”, permite un correo de seguimiento simple. Alternativa de form_follow_ups_follow_up_type . |
follow_up_type_automation | Booleano | Si es “True”, inscribe los envíos de formularios en un workflow. Alternativa de form_follow_ups_follow_up_type . |
simple_email_campaign_id | Número | Especifica el ID del correo de seguimiento simple. Alternativa de simple_email_for_live_id . |
form_follow_ups_workflow_id | Número | Especifica el ID del workflow en el que se inscriben los envíos de formularios. |
response_redirect_url | Cadena | Si se redirecciona a una página externa, este parámetro especifica la URL a la que se debe redireccionar. |
response_redirect_id | Número | Si se redirecciona a una página alojada en HubSpot, este parámetro especifica el ID de la página. El ID de la página está disponible en la URL del editor de páginas de cada página. |
response_response_type | Enumeración | Determina si se redirecciona a otra página o si se muestra un mensaje de agradecimiento en línea cuando se envía el formulario. El valor de este parámetro debe ser "redirect" o "inline" (predeterminado). |
response_message | Cadena | Establece un mensaje de agradecimiento en línea. Este parámetro es compatible con HTML. |
notifications_are_overridden | Booleano | Si es True , el formulario enviará notificaciones a las direcciones de correo electrónico seleccionadas en el parámetro notifications_override_email_addresses , en lugar de a los valores predeterminados del formulario. Por opción predeterminada es False . |
notifications_override_guid_buffer | Cadena | ID de la configuración de anulación en la versión de autoguardado de la página. |
notifications_override_guid | Cadena | ID de la configuración de anulación en la versión publicada de la página. |
notifications_override_email_addresses | JSON | La sintaxis de bloques admite una lista JSON de destinatarios de correo electrónico que serán notificados al enviar los formularios. Estas direcciones de correo electrónico anulan la configuración de notificación por correo electrónico establecida en el formulario. |
sfdc_campaign | Cadena | Especifica la campaña de Salesforce en la que se inscribirán los contactos que envíen el formulario. El valor de este parámetro debe ser el ID de la campaña de SFDC y solo está disponible para los portales que tienen la integración con Salesforce. |
gotowebinar_webinar_key | Cadena | Especifica el webinario de GoToWebinar en el que se inscribirán los contactos tras enviar el formulario. Solo disponible para las cuentas que utilizan la integración de GoToWebinar. |
webinar_id | Cadena | Un campo más genérico que especifica el ID del webinario de Microsoft Teams o GoToWebinar en el que inscribir a los contactos tras enviar el formulario. Solo disponible en cuentas que utilicen las integraciones GoToWebinar o Microsoft Teams, y cuando support_all_webinar_types esté configurado como true en la definición de campos de formulario. |
webinar_source | Cadena | El ID de la app de integración, ya sea GoToWebinar (35161 ) o Microsoft Teams (221635 ). |
Pie de página
Presenta la información de derechos de autor con el año y el nombre de la empresa especificados en la configuración de correos de marketing de la cuenta.Galería
Genera una etiqueta de galería de HubSpot. Esta etiqueta de la galería está basada en Slick. Mientras que puedes crear un módulo de galería con la sintaxis estándar de HubL, si quieres predefinir diapositivas predeterminadas usando HubL, debes usar la sintaxis de bloques. A continuación se muestran ambos métodos. Las imágenes de la galería se cargan de forma diferida mediante JavaScript.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
slides | JSON | Una lista JSON con el título predeterminado, la URL del enlace, el texto alt, el src de la imagen y si se abre en una nueva pestaña o no. Consulta la sintaxis de bloques anterior. | |
loop_slides | Booleano | Cuando es “True”, muestra las diapositivas en un bucle continuo. | True |
num_seconds | Número | Tiempo en segundos de pausa entre diapositivas. | 5 |
show_pagination | Booleano | Proporciona botones debajo del deslizador para navegar entre las diapositivas. | True |
sizing | Enumeración | Determina si el deslizador cambia de tamaño según la altura de las diapositivas. Los valores posibles son: “static” o “resize”. | "static" |
auto_advance | Booleano | Avanza automáticamente las diapositivas después del tiempo establecido en num_seconds. | False |
transition | Enumeración | Define el tipo de transición de las diapositivas. Los valores posibles son: “fade” o “slide”. | "slide" |
caption_position | Enumeración | Modifica la posición de los subtítulos en la parte superior o inferior de la diapositiva. Los valores posibles son “below” o “superimpose”. | "below" |
display_mode | Enumeración | Determina cómo se mostrará la galería de imágenes. Los valores posibles son: “standard”, “lightbox”, “thumbnail”. | "standard" |
lightboxRows | Número | Si “display_mode” se define como “lightbox”, este parámetro controlará el número de filas mostradas dentro del lightbox. | 3 |
Encabezado
Genera un módulo de encabezado que mostrará el texto como una etiqueta h1 a h6.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
header_tag | Cadena | Selecciona la etiqueta de encabezado que se va a renderizar. Los valores posibles son: h1, h2, h3, h4, h5, h6. | h1 |
value | Cadena | Representa el texto predeterminado dentro del módulo del encabezado. | "A clear bold header" |
Ícono
Agrega una etiqueta de ícono que permite a los usuarios seleccionar un ícono para usarlo. Los conjuntos de íconos compatibles son FontAwesome 5.0.10, 5.14.0 y 6.4.2. Esta etiqueta no puede utilizarse en los módulos habilitados para correo electrónico.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
name | Cadena | Nombre del ícono. | |
style | Cadena | Estilo del ícono. Valores posibles: REGULAR o SOLID | REGULAR |
unicode | Cadena | La representación en caracteres Unicode del ícono. | |
icon_set | Cadena | El conjunto de íconos de FontAwesome que se va a utilizar. Los valores posibles son:
| |
purpose | Cadena | El propósito del ícono, utilizado para la accesibilidad. Los valores posibles son decorative o semantic . Si se define como decorative , se agregará un atributo adicional de aria-hidden="true" al ícono. | decorative |
title | Cadena | El elemento de título del svg del ícono, junto con un atributo labelledby que apunta al título. |
Imagen
Crea una etiqueta de imagen que permite a los usuarios seleccionar una imagen desde el editor de contenidos. Si quieres que la imagen se vincule a una URL de destino, debes usar linked_image debajo.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
alt | Cadena | Define el texto alternativo predeterminado para la imagen. | |
src | Cadena | Rellena el atributo src de la etiqueta img. | |
width | Número | Define el atributo de anchura de la etiqueta img. | The width of the image |
height | Número | Fija una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo. | The height of the image |
hspace | Número | Define el atributo hspace de la etiqueta img. | |
align | Cadena | Define el atributo align de la etiqueta img. Los valores posibles son: izquierda (left), derecha (right) y centro (center). | |
style | Cadena | Agrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo style=“border:1px solid blue; margin:10px” | |
loading | Cadena | Controla el atributo de carga del elemento img. Se utiliza para la carga diferida en el navegador. |
Src de la imagen
Un módulo src de la imagen crea un selector de imágenes en el editor de contenidos, pero en lugar de imprimir una etiqueta img, muestra la URL de la imagen. Esta etiqueta se usa generalmente con el parámetrono_wrapper=True
, de modo que la imagen src se puede agregar al CSS en línea o a otros marcadores. Una alternativa al uso de esta etiqueta es utilizar el parámetro export_to_template_context
.
Parámetro | Tipo | Descripción |
---|---|---|
src | Cadena | Especifica el src de la imagen de la URL predeterminada. |
Selector de idiomas
Agrega un ícono de globo con enlaces a las versiones traducidas de una determinada página del CMS. Más información sobre los contenidos multilingües aquí.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
display_mode | Enumeración | El idioma del texto en el selector de idiomas. Los valores son:
| Localized |
Imagen enlazada
Genera una imagen seleccionable por el usuario dentro de un enlace. Esta etiqueta tiene todos los parámetros de un módulo de imagen con dos parámetros adicionales que especifican la URL de destino del enlace y si el enlace se abre en una nueva ventana.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
alt | Cadena | Define el texto alternativo predeterminado para la imagen. | |
src | Cadena | Rellena el atributo src de la etiqueta img. | |
width | Número | Define el atributo de anchura de la etiqueta img. | The width of the image |
height | Número | Fija una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo. | The height of the image |
hspace | Número | Define el atributo hspace de la etiqueta img. | |
align | Cadena | Define el atributo align de la etiqueta img. Los valores posibles son: izquierda (left), derecha (right) y centro (center). | |
style | Cadena | Agrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo style=“border:1px solid blue; margin:10px” | |
open_in_new_tab | Booleano | Selecciona si se abre o no la URL de destino en otra pestaña. | False |
link | Cadena | Define la URL de destino del enlace que envuelve la etiqueta img. | |
target | Cadena | Define el atributo de destino de la etiqueta del enlace. | |
loading | Cadena | Controla el atributo de carga del elemento img. Se utiliza para la carga diferida en el navegador. |
Logotipo
Una etiqueta de logotipo muestra el logotipo de tu empresa desde la configuración del kit de marca de la cuenta.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
alt | Cadena | Define el texto alternativo predeterminado para la imagen. | Value in brand kit settings |
src | Cadena | Rellena el atributo src de la etiqueta img. | Value in brand kit settings |
link | Cadena | Define la URL de destino del enlace que envuelve la etiqueta img. | |
width | Número | Define el atributo de anchura de la etiqueta img. | The width of the image |
height | Número | Fija una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo. | The height of the image |
hspace | Número | Define el atributo hspace de la etiqueta img . | |
align | Cadena | Define el atributo align de la etiqueta img . Los valores posibles son left , right y center . | |
style | Cadena | Agrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo:style="border:1px solid blue; margin:10px" | |
suppress_company_name | Booleano | Oculta el nombre de la empresa si no se elige un logotipo de imagen. | False |
use_account_default | Booleano | Se establece como true para utilizar el nombre de la empresa desde la configuración predeterminada de la cuenta. | False |
open_in_new_tab | Booleano | Selecciona si se abre o no la URL de destino en otra pestaña. | False |
override_inherited_src | Booleano | Cuando se define como true , utiliza el src del widget del logotipo en lugar del src heredado de la configuración o de la plantilla. | True |
heading_level | Cadena | Cuando se utilizan logotipos basados en texto no enlazados, se envuelve el logotipo basado en texto en una de las siguientes opciones disponibles como etiqueta HTML: h1 , h2 , h3 , h4 . | h1 |
loading | Cadena | Controla el atributo de carga del elemento img de la carga diferida en el navegador. |
Menú
Genera un menú avanzado basado en un árbol de menús en Configuración de contenido > Menús avanzados. Consulta los menús y la navegación para obtener más información sobre el uso de los menús en las plantillas y los módulos. Siid
se define como null
, la etiqueta de menú mostrará el menú predeterminado de la cuenta de HubSpot.
Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
id | Número | ID del árbol de menús desde los menús avanzados en la configuración de contenido. | |
site_map_name | Cadena | Nombre del árbol de menús de los menús avanzados en la configuración del contenido. | "default" |
root_type | Enumeración | Especifica el tipo de menús avanzados. Las opciones son: “site_root”, “top_parent”, “parent”, “page_name”, “page_id”, y “breadcrumb”. Estos valores corresponden a estático, dinámico por sección, dinámico por página y breadcrumb. | "site_root" |
flyouts | Cadena | Cuando es “True”, se agrega una clase al árbol de menús que se puede adaptar para permitir que los elementos del menú secundario aparezcan cuando se coloca el cursor encima del menú principal. Si es “False”, los elementos del menú secundario aparecerán siempre. | "true" |
max_levels | Número | Determina el número de niveles de menús anidados que se muestran en el marcado. Este parámetro define cuántas opciones secundarias del árbol de menú se pueden expandir dentro del menú. | 2 |
flow | Enumeración | Define la orientación de los elementos del menú. Esto agrega clases al árbol de menú para que puedan aplicarse estilos personalizados. Los valores posibles son “horizontal”, “vertical” or “vertical_flyouts”. Los menús horizontales muestran los elementos de lado a lado, y los menús verticales los muestran de arriba hacia abajo. | "horizontal" |
root_key | Cadena | Se utiliza para encontrar la raíz del menú. Cuando root_type se define como page_id o page_name, este parámetro debe ser el ID de la página o la etiqueta de la página, respectivamente. | "horizontal" |
label | Cadena | Contenido enriquecido para describir esta entidad | False |
label | Cadena | Contenido enriquecido para describir esta entidad | False |
Require_css
Una etiqueta HubL que pone en cola un elemento de estilo para ser representado en el<head>
.
Esta etiqueta es similar a la require_css función , excepto que esta etiqueta inserta el estilo en línea en lugar de hacerlo desde una hoja de estilo. Esta etiqueta tampoco se desduplica con otras instancias del CSS en la misma página. Si estás creando un módulo y quieres insertar una hoja de estilos, pero planeas usar ese módulo varias veces en una misma página, es posible que prefieras utilizar la función require_css
.
Require_head
Una etiqueta HubL que pone en cola todo lo que se coloca dentro de ella en elstandard_header_includes
, que se encuentra en el <head>
de la plantilla. Para la mayoría de Javascript y CSS, consulta require_js
y require_css
. Algunos casos de uso de require_head
incluyen el suministro de metaetiquetas y etiquetas de enlace especiales (como prefetch y preconnect) de los módulos.
Require_js
Una etiqueta HubL que pone en cola un elemento de script para ser renderizado. Para poner en cola un script para renderizarlo en el<head />
desde un archivo diferente a través de un elemento <script />
(en lugar de en línea como se muestra aquí), utiliza la función HubL require_js(absolute_url)
.
Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
position | Cadena | Establece la posición en la que se renderizará el script en línea. Las opciones incluyen: "head" y "footer" . | "footer" |
Texto enriquecido
Crea un editor de contenidos WYSIWYG.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
html | Cadena | Contenido de texto enriquecido predeterminado para el módulo. | <h2>Something Powerful</h2> <h3>Tell The Reader More</h3> <p>The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p> <p>Remember:</p> <ul><li>Bullets are great</li><li>For spelling out [benefits](#) and</li><li>Turning visitors into leads.</li></ul> |
Listado de RSS
Carga una lista de contenidos desde un canal RSS interno o externo.Nota:
Este módulo se carga de forma asíncrona en el lado del cliente. Como resultado, si quieres modificar la sección de publicaciones después de que se haya cargado, tendrás que definir una función JS global para manejar esa manipulación. Utiliza la funciónhsRssFeedComplete(feeds)
, donde feeds
es el selector de jQuery de todos los listados de publicaciones que se han completado. Puedes modificar directamente el objeto DOM en esa función.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
show_title | Booleano | Muestra u oculta el título del listado de publicaciones RSS. | True |
show_date | Booleano | Muestra la fecha de la publicación. | True |
show_author | Booleano | Muestra el nombre del autor. | True |
show_detail | Booleano | Muestra el resumen de la publicación hasta el número de caracteres fijado por el parámetro limit_to_chars . | True |
title | Cadena | Rellena el encabezado del listado de publicaciones RSS. | |
limit_to_chars | Número | Número máximo de caracteres que se mostrarán en el resumen. | 200 |
publish_date_format | Cadena | Formato de la fecha de publicación. Los valores posibles son "short" , "medium" y "long" . También acepta formatos personalizados, como "MMMM d, yyyy 'at' h:mm a" . | "short" |
attribution_text | Cadena | El texto que atribuye un autor a una publicación. | "by" |
click_through_text | Cadena | El texto que se mostrará como enlace de redirección al final del resumen de una publicación. | "Read more" |
publish_date_text | Cadena | El texto que indica cuándo se publicó una entrada de blog. | "posted at" |
include_featured_image | Booleano | Muestra una imagen destacada con el enlace de la publicación para los listados de publicaciones RSS generados por HubSpot. | False |
item_title_tag | Cadena | Especifica la etiqueta HTML del título de cada publicación. | span |
is_external | Booleano | El listado de publicaciones RSS es de un blog externo. | False |
number_of_items | Número | Número máximo de publicaciones que se mostrarán. | 5 |
publish_date_language | Cadena | Especifica el idioma de la fecha de publicación. | en_US |
rss_url | Cadena | La URL donde se encuentra el listado de publicaciones RSS. | |
content_group_id | Cadena | ID del blog cuando la fuente del listado de publicaciones es un blog interno. | |
select_blog | Cadena | Se puede utilizar para seleccionar un listado de publicaciones del blog interno de HubSpot. | default |
feed_source | Cadena | Definir la fuente del listado de publicaciones RSS. Cuando es interno, el formato general es {rss_url="", is_external=False, content_group_id="2502431580"} . Cuando es externo, el formato general es {rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True} . | |
tag_id | Número | ID de la etiqueta cuando la fuente del listado de publicaciones es un blog interno. |
Encabezado de la sección
Genera un título html y un subtítulo<p>
.
Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
header | Cadena | Texto para mostrar en el encabezado. | "A clear and bold header" |
subheader | Cadena | Texto para mostrar en el subtítulo. | "A more subdued subheader" |
heading_level | Cadena | Nivel de encabezado HTML semántico. Se admiten los niveles de h1 a h6. | "h1" |
Menú simple
Los menús simples permiten crear menús de navegación básicos que pueden modificarse a nivel de página. A diferencia de los módulos de menú normales, los menús simples no se gestionan desde la pantalla de navegación en la configuración del sitio web, sino desde los editores de plantillas y páginas. Puedes utilizar la sintaxis de bloques para configurar un árbol de menús predeterminado.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
orientation | Enumeración | Define las clases de marcadores de menú para permitir adaptar la orientación de los elementos del menú en la página. Los valores posibles son "horizontal" y "vertical" . | "horizontal" |
menu_tree | JSON | Estructura del menú, incluidos los nombres de los enlaces de las páginas y las URL de destino. | [] |
Compartir en redes sociales
Las etiquetas de contenido compartido en redes sociales generan íconos de redes sociales que pueden utilizarse para compartir una página determinada. Este módulo se puede utilizar con la sintaxis de bloques para personalizar las imágenes de los íconos y mucho más.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
use_page_url | Booleano | Si es “True”, el módulo comparte la URL de la página de forma predeterminada. | True |
link | Cadena | Especifica una URL diferente para compartirla, si use_page_url es “False”. | |
pinterest | JSON | Parámetros para el formato del enlace de Pinterest y la fuente de la imagen del ícono. | See block syntax example, above |
twitter | JSON | Parámetros para el formato del enlace de Twitter y la fuente de la imagen del ícono. | See block syntax example, above |
linked_in | JSON | Parámetros para el formato del enlace de LinkedIn y la fuente de la imagen del ícono. | See block syntax example, above |
facebook | JSON | Parámetros para el formato del enlace de Facebook y la fuente de la imagen del ícono. | See block syntax example, above |
email | JSON | Parámetros para el formato del enlace para compartir el correo y la fuente de la imagen del ícono. | See block syntax example, above |
Separador
Una etiqueta espaciadora genera una etiqueta span vacía. Esta etiqueta se puede estilizar para actuar como espaciador. En los diseños de arrastrar y soltar, el módulo de espacio se encuentra dentro de un contenedor con una clase de span1 a span12, que determina cuánto espacio debe ocupar el módulo dentro de la cuadrícula responsiva de doce columnas.Etiquetas de la página del sistema
Las siguientes etiquetas se pueden utilizar en las páginas del sistema, como las páginas de restablecimiento de contraseñas o de suscripción por correo electrónico.Copia de seguridad de cancelaciones de suscripción por correo electrónico
La etiqueta de cancelación de suscripción con copia de seguridad se muestra a los destinatarios de correo electrónico si HubSpot no puede determinar su dirección de correo, cuando el destinatario intenta cancelar la suscripción. Esta etiqueta muestra un formulario para que el contacto ingrese su dirección de correo electrónico y cancele la suscripción de las comunicaciones por correo electrónico. Se debe utilizar en una plantilla del sistema de respaldo de cancelación de la suscripción.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
header | Cadena | Muestra el texto en una etiqueta h1 encima del formulario de cancelación de suscripción. | "Email Unsubscribe" |
input_help_text | Cadena | Muestra el texto de ayuda en una etiqueta h3 encima del campo del formulario de cancelación de suscripción a los correos. | "Your email address:" |
input_placeholder | Cadena | Agrega el texto de marcador de posición en el campo de dirección de correo electrónico. | "email@example.com" |
button_text | Cadena | Cambia el texto del botón de envío del formulario de cancelación de suscripción. | "Unsubscribe" |
Suscripciones a correos
Este módulo se muestra cuando un destinatario de correo electrónico va a editar sus preferencias de suscripción. Debe utilizarse en una plantilla del sistema de preferencias de suscripción.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
header | Cadena | Muestra el texto en una etiqueta h1 encima del formulario de preferencias de suscripción. | "Communication Preferences" |
subheader_text | Cadena | Introduce el texto debajo del encabezado y encima de las preferencias de cancelación de suscripción. | "<p>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>" |
unsubscribe_single_text | Cadena | Muestra el texto en un <p class="header"> encima de las opciones de suscripción. | "Uncheck the types of emails you do not want to receive:" |
unsubscribe_all_text | Cadena | Muestra el texto en un <p class="header"> encima de la entrada de la casilla de verificación para cancelar la suscripción a todos los correos electrónicos. | "Or check here to never receive any emails:" |
unsubscribe_all_unsubbed_text | Cadena | Introduce el texto dentro de un <p> que se muestra si la suscripción de un contacto está actualmente cancelada para todos los correos electrónicos. | "You are presently unsubscribed from all of our emails. Would you like to receive our emails again?" |
unsubscribe_all_option | Cadena | Define el texto que está junto a la entrada de la casilla de verificación de cancelación de suscripción a todos los correos electrónicos. | "Unsubscribe me from all mailing lists." |
button_text | Cadena | Define el texto del botón de envío que actualiza las preferencias de suscripción. | "Update email preferences" |
resubscribe_button_text | Cadena | Define el texto del botón de envío para cuando los contactos se vuelvan a suscribir. | "Yes, resubscribe me!" |
Confirmación de suscripción a correos
La actualización de confirmación de suscripción al correo electrónico es un módulo que puede agregarse a la plantilla de agradecimiento para cuando un destinatario actualiza sus preferencias de suscripción o las cancela. Debe utilizarse en una plantilla del sistema de preferencias de suscripción.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
header | Cadena | Muestra el texto en una etiqueta h1 encima del formulario de cancelación de suscripción. | "Communication Preferences" |
subheader_text | Cadena | Muestra el texto encima del mensaje de confirmación. | "<p>If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.</p>" |
unsubscribe_all_success | Cadena | Define el texto que se mostrará cuando alguien cancele la suscripción a todas las comunicaciones por correo electrónico. | "You have successfully unsubscribed from all email communications." |
subscription_update_success | Cadena | Define el texto cuando un destinatario actualiza sus preferencias de suscripción. | "You have successfully updated your email preferences." |
Inicio de sesión de membresías
Crea un formulario de inicio de sesión para dar acceso a contenido privado.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
email_label | Cadena | La etiqueta para el campo del correo electrónico. | "Email" |
password_label | Cadena | La etiqueta para el campo de la contraseña. | "Password" |
remember_me_label | Cadena | La etiqueta de la casilla de verificación “Recordarme”. | "Remember Me" |
reset_password_text | Cadena | El texto para el hipervínculo de cambio de contraseña. | "Forgot your password?" |
submit_button_text | Cadena | El texto para el botón de envío. | "Login" |
show_password | Cadena | El texto del enlace para revelar la contraseña. | "Show password" |
Registro de membresías
Crea un formulario de registro para acceder a contenido privado.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
email_label | Cadena | La etiqueta para el campo del correo electrónico. | "Email" |
password_label | Cadena | La etiqueta para el campo de la contraseña. | "Password" |
password_confirm_label | Cadena | La etiqueta para el campo de confirmación de la contraseña. | "Confirm Password" |
submit_button_text | Cadena | El texto para el botón de envío. | "Save Password" |
show_password | Cadena | El texto del enlace para revelar la contraseña. | "Show password" |
Solicitud de restablecimiento de contraseña
Crea un formulario para enviar un correo electrónico de restablecimiento de contraseña para acceder a páginas protegidas por contraseña.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
email_label | Cadena | La etiqueta para el campo del correo electrónico. | "Email" |
submit_button_text | Cadena | El texto para el botón de envío. | "Send Reset Email" |
password_reset_message | Cadena | El mensaje que aparece después de solicitar el correo de cambio de contraseña. | False |
Restablecimiento de contraseña
Renderiza un formulario de restablecimiento de contraseña para acceder a páginas protegidas por contraseña.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
password_label | Cadena | La etiqueta de texto para el campo de la contraseña. | "Email" |
password_confirm_label | Cadena | La etiqueta de texto para el campo de confirmación de contraseña. | "Send Reset Email" |
submit_button_text | Cadena | La etiqueta de texto para el botón de envío del formulario. | False |
show_password | Cadena | La etiqueta de texto del botón para mostrar el valor de la contraseña introducida. | False |
password_requirements | Cadena | La etiqueta de texto que describe los requisitos de la contraseña. | False |
Solicitud de la contraseña
Agrega un solicitud de contraseña a las páginas protegidas con contraseña.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
submit_button_text | Cadena | Etiqueta para el botón que está debajo del campo de la contraseña. | "Submit" |
bad_password_message | Cadena | Se muestra un mensaje si se introduce una contraseña incorrecta. | "<p>Sorry, please try again.</p>" |
password_placeholder | Cadena | Define el texto del marcador de posición dentro del campo de la contraseña. | "Password" |
Texto
Crea una sola línea de texto. Esta etiqueta puede ser útil para combinarse con el marcador cuando se utiliza junto con el parámetrono_wrapper=True
. Por ejemplo, si quieres que los usuarios finales puedan definir el destino de un ancla predefinida, podrías rellenar el href
con un módulo de texto con no_wrapper=True
.
Parámetro | Tipo | Descripción |
---|---|---|
value | Cadena | Define el texto predeterminado del campo de texto de una línea. |
Textarea
Un textarea es similar a un módulo de texto ya que permite a los usuarios introducir texto sin formato, pero les da un área más grande para trabajar en el editor de contenidos. Este módulo no es compatible con HTML. Si quieres utilizarlo directamente dentro de una etiqueta de contenedor predefinida, agrega el parámetrono_wrapper=true
.
Parámetro | Tipo | Descripción |
---|---|---|
value | Cadena | Define el texto predeterminado del textarea. |
Reproductor de video
Renderiza un reproductor de video para un archivo de video desde el administrador de archivos que tiene activa la opción Permitir incrustar, compartir y rastrear.Parámetro | Tipo | Descripción | Predeterminado |
---|---|---|---|
hide_playlist | Booleano | Oculta la lista de reproducción de videos. | True |
playlist_color | Cadena | Un valor de color HEX para la lista de reproducción. | |
play_button_color | Cadena | Un valor de color HEX para los botones de reproducción y pausa. | #2A2A2A |
embed_button | Booleano | Muestra el botón de inserción en el reproductor | False |
viral_sharing | Booleano | Mostrar el botón para compartir en las redes sociales en el reproductor. | False |
width | Número | Anchura del reproductor de video insertado. | Auto |
height | Número | Altura del reproductor de video insertado. | Auto |
player_id | Número | El player_id del video que se insertará. | |
style | Cadena | Estilo adicional del reproductor. | |
conversion_asset | JSON | Configuración de eventos para el reproductor. Puede renderizar una CTA o un formulario antes o después de la reproducción del video. Este parámetro toma un objeto JSON con tres parámetros: tipo (FORM o CTA), id (El guid del tipo de objeto), posición (POST o PRE). | See above example |
placeholder_alt_text | Cadena | El texto alternativo del video. |