Etiquetas estándar de HubL
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 construyendo áreas de arrastrar y soltar, descubre más información sobre las etiquetas de área 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ódulo predeterminado. Los módulos se pueden utilizar dentro de dnd_areas y columnas flexibles lo que los hace más potentes y fáciles de usar que las etiquetas que se ven aquí.
Una etiqueta de comentarios del blog muestra el código de incrustación de los comentarios en una plantilla de blog. Este código Javascript incrustado carga el formulario de comentarios y los comentarios, según la configuración de su sitio web.
| Parameter | Type | Description | Default |
|---|---|---|---|
limit
| Number | Establece el número máximo de comentarios. |
5000
|
select_blog
| "predeterminado" o ID del blog | Especifica qué blog está conectado a los comentarios incrustados. Este parámetro acepta como argumentos |
default
|
skip_css
| Boolean | Si se establece esta opción como True, el CSS de los comentarios del blog dejará de cargarse. |
false
|
message
| String | El mensaje a mostrar cuando no hay comentarios. De forma predeterminada, aparece como vacío (no se muestra texto). |
""
|
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. En su lugar, utilizan la lógica condicional para definir cómo debe presentarse un post y un listado de blog. Puedes obtener más información sobre la codificación de plantillas para blogs aquí.
Crea un listado enlazado de posts por tema, mensajes por mes o mensajes por autor.
Nota: este módulo solo se puede utilizar en plantillas de posts de blog.
| Parameter | Type | Description | Default |
|---|---|---|---|
select_blog
| "predeterminado" o ID del blog | Selecciona el blog de HubSpot a utilizar. Este parámetro utiliza un ID de blog o un valor "default". |
"default"
|
expand_link_text
| String | Enlace de texto que se mostrará si hay más posts que el número de max_links disponibles. Parámetro de exclusión para omitir el enlace. |
"see all"
|
list_title
| String | Lista de títulos por mostrar. |
""
|
list_tag
| String | Establece la etiqueta utilizada para la lista. El valor debe ser generalmente |
"ul"
|
title_tag
| String | Establece la etiqueta utilizada para el título de la lista. |
"h3"
|
max_links
| Number | Número máximo de valores de filtro que se mostrarán. Parámetro de excusión para mostrar todo. |
5
|
filter_type
| Enumeración | Selecciona el tipo de filtro. Los valores posibles son |
"topic"
|
Agrega un listado de los posts más populares o más importantes.
Nota: esta etiqueta solo se puede utilizar en las plantillas de los posts del blog. El contenido de la etiqueta se carga de forma asíncrona en el lado del cliente. Como resultado, si quieres manipular el feed después de que se haya cargado, tendrás que definir una función JS global para manejar esa manipulación. Utiliza la función hsPostListingComplete(feeds), donde feeds es el selector jQuery de todos los feeds que se han completado. Se recomienda manipular directamente el objeto DOM en esa función.
| Parameter | Type | Description | Default |
|---|---|---|---|
select_blog
| "predeterminado" 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"
|
list_title
| String | Lista de títulos por mostrar. |
""
|
list_tag
| String | Establece la etiqueta utilizada para la lista. El valor debe ser generalmente |
"ul"
|
title_tag
| String | Establece la etiqueta utilizada para el título de la lista. |
"h3"
|
listing_type
| String | Enumerar los posts del blog por las más recientes o las más populares en un rango de tiempo. Los valores posibles son recent, popular_all_time, popular_past_year, popular_past_six_months y popular_past_month. |
"recent"
|
max_links
| Number | Número máximo de posts en la lista |
5
|
include_featured_image
| Boolean | Mostrar la imagen destacada junto con el enlace del post. |
False
|
Agrega un listado de posts de blog basado en un conjunto de parámetros compartidos por los posts de todos los blogs. Los posts se seleccionan en función de su relevancia con respecto a los parámetros establecidos.
Ten en cuenta que esta etiqueta no genera un módulo editable a nivel de página/publicación, se configura completamente con HubL.
| Parameter | Type | Description | Default |
|---|---|---|---|
blog_ids
| Number | Los ID de los blogs desde los que se incluirán las publicaciones. Si no se especifica, incluirá publicaciones del blog predeterminado. | |
blog_post_ids
| String | Los ID de las publicaciones de blog que se utilizarán al encontrar publicaciones de blog relevantes para enumerar, separadas por comas. Utiliza este parámetro solo cuando el widget aparezca en las páginas. Cuando se usa en publicaciones de blog, buscará publicaciones relevantes basadas en la publicación de blog que se muestra actualmente. | |
blog_post_override
| String | Los ID de las publicaciones de un blog que deben aparecer siempre en el listado devuelto, a pesar de todos los demás valores de parámetros y filtros (separados por comas). | |
limit
| Number | Número máximo de publicaciones de blog en la lista |
3
|
tags
| String | Las etiquetas que deben 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 relevancia. | |
tag_boost
| Number | Aumenta el peso dado a las etiquetas especificadas en el parámetro de | |
start_date
| datetime | Fecha de publicación más temprana. Consulta el ejemplo siguiente. | |
end_date
| datetime | Última fecha de publicación. Consulta el ejemplo siguiente. | |
blog_authors
| String | Los nombres de los autores de los que se incluirán las publicaciones (separados por comas) Consulta el ejemplo siguiente. | |
path_prefixes
| String | Rutas de URLs o subdirectorios desde los que incluir los posts (separadas por comas). Si un post de blog tiene un prefijo similar en tu ruta, la relevancia del post aumenta, mejorando su clasificación en el listado. | |
callback
| String | El nombre de una función javascript para renderizar los posts de blog devueltos. A la función se le pasa una matriz de objetos de posts de blog para formatear. Si no se especifican los parámetros Consulta el ejemplo siguiente. |
none
|
post_formatter
| String | El nombre de una macro personalizada para renderizar los posts de blog devueltos. A la macro se le pasan tres parámetros que son el objeto de post de blog a formatear, el recuento en la iteración de posts de blog, y el recuento total de posts de blog en los resultados. Si no se especifica o se establece como |
default
|
allow_any_language
| Boolean | Si se establece en |
False
|
Recomendamos utilizar el parámetro callback en lugar de post_formatter para mejorar la velocidad de carga de la página.
En este ejemplo se genera una lista de publicaciones escritas por uno de los tres blog_authors especificados en dos blogs diferentes.
{% related_blog_posts blog_ids="3241539189,3261083894", limit=6, blog_authors="John Smith,Joe Smith,Frank Smith" %}En este ejemplo se genera una lista de 10 publicaciones relacionadas con una publicación de blog específica, con la etiqueta "habilitación de ventas" y restringida a un marco de tiempo de fecha de publicación específico. En este ejemplo se especifica el parámetro blog_post_ids, por lo que se usaría en una página:
{% related_blog_posts blog_post_ids="3267910554", limit=10, tags="sales enablement", start_date="2018-02-05", end_date="2018-06-10" %}En este ejemplo se genera una lista de 5 publicaciones utilizando el parámetro callback para controlar la salida HTML de la publicación.
{% related_blog_posts limit=5, callback="blog_post_formatter" %}
<script>
var blog_post_formatter = function(blogposts) {
var formatted = "<div>";
for (var i = 0; i < blogposts.length; i++) {
var blogpost = blogposts[i];
formatted += '<div class="related-blog-item">';
formatted += `<span>Related Post ${i + 1}/${blogposts.length}</span><br>`;
formatted += `<a class="related-blog-title" href="${blogpost.url}"><span>${blogpost.name}</span></a>`;
formatted += `<div class="hs-related-blog-byline">by <span class="related-blog-author">${blogpost.blogAuthor.fullName}</span><span class="related-blog-posted-at"> posted on </span><span class="related-blog-date">${new Date(blogpost.publishDate).toLocaleDateString()}</span></div>`;
formatted += `<p class="related-blog-post-summary">${blogpost.postSummary}<a href="${blogpost.url}">Read more</a></p>`;
formatted += '<div class="related-blog-tags">';
if (blogpost.tagList.length > 0) {
formatted += `Tags: ${blogpost.tagList.map(tag => tag.label).join(", ")}`;
}
formatted += '</div>';
if (blogpost.featuredImage) {
formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`;
}
formatted += '</div>';
}
formatted += '</div>';
return formatted;
}
</script>Compartir el blog en redes sociales muestra los contadores de contenido compartido de los posts de tu blog (si están activados en la Configuración del contenido).
| Parameter | Type | Description | Default |
|---|---|---|---|
select_blog
| "predeterminado" o ID del blog | Especifica qué blog está conectado a los contadores de acciones. Este parámetro acepta como argumentos |
default
|
downgrade_shared_url
| Boolean | Utiliza HTTP en la url enviada a las redes sociales. Se utiliza para conservar los recuentos cuando se actualizan los dominios a solo HTTPS. |
false
|
Una etiqueta de suscripción a un blog muestra el formulario de suscripción a un blog determinado. Este formulario se crea automáticamente cada vez que se crea un blog en la Configuración de contenidos, y siempre hay un formulario de suscripción por blog. Ten en cuenta que los campos del formulario de suscripción se configuran en la interfaz de usuario del editor de formularios.
| Parameter | Type | Description | Default |
|---|---|---|---|
select_blog
| "predeterminado" o ID del blog | Selecciona el formulario de suscripción al blog que se va a mostrar. Este parámetro acepta como argumentos |
default
|
title
| String | Define el texto de una etiqueta h3 sobre el formulario de suscripción. |
"Subscribe Here!"
|
no_title
| Boolean | Si es True, se elimina la etiqueta h3 que está encima del título. |
false
|
response_message
| String | Define el mensaje de agradecimiento en línea que se muestra cuando un usuario envía un formulario. Soporta HTML. |
"Thanks for Subscribing!"
|
edit_form_link
| String | 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 la interfaz del editor si los módulos tienen el parámetro overrideable=True. Por ejemplo, para sustituir HubID y el ID del formulario por la información de la URL de tu formulario de suscripción al blog predeterminado: \n deja el código en una nueva línea. |
Una etiqueta booleana crea una casilla de comprobació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ámetro export_to_template_context.
| Parameter | Type | Description | Default |
|---|---|---|---|
value
| Boolean | Determina si la casilla de comprobación está marcada o desmarcada. |
False
|
Una etiqueta de elección crea una lista desplegable en la UI del editor de contenidos que imprime el valor seleccionado por el usuario. Las etiquetas de elección son ideales para dar a los usuarios un conjunto de opciones preestablecidas, como la impresión del tipo de página como encabezado de página.
Además de imprimir el valor de la elección, esta etiqueta es útil para definir la lógica condicional de la plantilla, cuando se combina con el parámetro export_to_template_context.
| Parameter | Type | Description |
|---|---|---|
value
| Boolean | El valor predeterminado del campo para la lista desplegable |
choices
| Secuencia | Una lista de valores separada por comas, o una lista de pares valor-etiqueta. La sintaxis de los pares de etiquetas de valores es la siguiente: |
La etiqueta de color genera un selector de color en la interfaz de usuario del editor de páginas que imprime un valor de color HEX en una plantilla. Ten en cuenta que este módulo solo puede utilizarse en plantillas, no en archivos CSS. Si utilizas esta etiqueta en un <style> o en un CSS en línea, querrás utilizar el parámetro no_wrapper=True para eliminar la envoltura <span>.
| Parameter | Type | Description |
|---|---|---|
color
| String | Un valor predeterminado de color HEX para el selector de color |
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.
| Parameter | Type | Description |
|---|---|---|
embed_code
| String | El código de incrustación para la CTA. \n diferencia los saltos de línea. |
full_html
| String | El código de incrustación para la CTA (Igual que embed_code). \n diferencia los saltos de línea. |
image_src
| String | Url de la imagen src que define la imagen de vista previa en el editor de contenidos. |
image_editor
| String | Marcación de la vista previa del editor de imágenes |
guid
| String | El número de identificación único de la CTA. Este número de identificación está disponible en la URL de la pantalla de detalles de una CTA concreta. Este parámetro se utiliza para elegir qué CTA mostrar por opción predeterminada. |
image_html
| String | Imagen CTA HTML sin el script CTA.* |
image_email
| String | Versión del código CTA apta para el correo electrónico.* |
*Si bien estos parámetros se incluyen aquí en aras de ser exhaustivos, el código generado por HubSpot para rellenarlos es muy específico. Si necesita una CTA predeterminada seleccionada, en lugar de intentar desarrollar los parámetros de la CTA desde cero, se recomienda configurar la CTA en un diseño de plantilla, y luego clonar al archivo. A continuación, puedes copiar el módulo HubL CTA de la CTA con todos los parámetros establecidos correctamente para ti.
También hay una función CTA que genera un CTA a partir del ID.
Un módulo de HTML personalizado permite a los usuarios introducir HTML en bruto en el editor de contenidos. Si necesitas agregar un extenso HTML predeterminado a la etiqueta, puedes utilizar la sintaxis de bloque.
| Parameter | Type | Description |
|---|---|---|
value
| String | Establece el contenido HTML predeterminado del módulo. |
Los módulos personalizados permiten a los diseñadores de HubSpot 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. Puedes aprender más sobre los módulos personalizados y su sintaxis simplificada de HubL, aquí.
Los módulos personalizados deben construirse 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 más abajo:
| Parameter | Type | Description |
|---|---|---|
module_id
| String | El id del módulo a renderizar. |
path
| String | La ruta del módulo a renderizar. Incluye la barra inclinada para la ruta absoluta, de lo contrario la ruta es relativa a la plantilla. Haz referencia a los módulos predeterminados de HubSpot con las rutas correspondientes a sus etiquetas HubL, como @hubspot/rich_text, @hubspot/linked_image, etc. |
Cuando construyas un módulo, puedes agregar contenido predeterminado a tus campos o una etiqueta HubL editor_placeholder al archivo HTML + HubL para representar el contenido del marcador de posición. Esta etiqueta muestra el icono y el nombre del módulo como marcadores de posición vacíos en el editor.
Esta etiqueta puede ser útil cuando el módulo no tiene o necesita contenido predeterminado, o para agilizar la construcción del módulo.
Para agregar un marcador de posición a un módulo personalizado, puedes agregar una sentencia if al archivo HTML + HubL para mostrar el marcador de posición cuando no haya contenido seleccionado. Por ejemplo, puedes hacer lo siguiente:
Aunque no puedes editar el estilo del marcador de posición, puedes agregar las siguientes propiedades al archivo meta.json del módulo para personalizar su contenido:
| Parameter | Type | Description |
|---|---|---|
show_module_icon
| Boolean | Si se muestra el icono del módulo. |
title
| String | El título que aparece en el marcador de posición. |
description
| String | La descripción que aparece en el marcador de posición. |
Por ejemplo, tu archivo meta.json podría tener el siguiente aspecto:
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 envolver 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, 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 usas esta etiqueta, la label debe seguir el valor del name de la columna flexible para funcionar en el editor de contenido. Por ejemplo, la siguiente sintaxis no es válida:
[% widget_container label="Mi etiqueta" "my_flexible_column" %}
Permite a los usuarios seleccionar un formulario de HubSpot para agregarlo a su página.
| Parameter | Type | Description | Default |
|---|---|---|---|
form_key
| String | Especifica un identificador único para el formulario a nivel de página. | |
form_to_use
| String | Especifica qué formulario cargar por opción predeterminada, basándose en el ID del formulario. Este ID está disponible en la URL del editor de formularios de cada formulario. | |
title
| String | Rellena una etiqueta de cabecera h3 encima del formulario. | |
no_title
| Boolean | Si es |
False
|
form_follow_ups_follow_up_type
| Enumeración | Especifica las acciones de seguimiento, como la inscripción de un contacto en un workflow o el envío de un simple correo electrónico de seguimiento. Los valores posibles son: | |
simple_email_for_live_id
| Number | Especifica el ID del correo electrónico de seguimiento simple para la página en vivo. | |
simple_email_for_buffer_id
| Number | Especifica el ID del correo electrónico de seguimiento simple para la versión de guardado automático de una página. | |
follow_up_type_simple
| Boolean | Si es cierto, permite un simple correo electrónico de seguimiento. Alternativa a | |
follow_up_type_automation
| Boolean | Si es verdadero, inscribe los envíos en un workflow. Alternativa a | |
simple_email_campaign_id
| Number | Especifica el ID del correo electrónico de seguimiento simple. Alternativa a | |
form_follow_ups_workflow_id
| Number | Especifica el ID del workflow en el que se inscriben los envíos. | |
response_redirect_url
| String | Si se redirige a una página externa, este parámetro especifica la URL a la que se debe redirigir. | |
response_redirect_id
| Number | Si se redirige 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 redirige a otra página o si se muestra un mensaje de agradecimiento en línea cuando se envía. El valor de este parámetro debe ser |
inline
|
response_message
| String | Establece un mensaje de agradecimiento en línea. Este parámetro es compatible con HTML. | |
notifications_are_overridden
| Boolean | Si es True, el formulario enviará notificaciones a las direcciones de correo electrónico seleccionadas en el campo |
False
|
notifications_override_guid_buffer
| String | ID de la configuración de anulación en la versión de autoguardado de la página. | |
notifications_override_guid
| String | ID de la configuración de anulación en la versión en vivo de la página. | |
notifications_override_email_addresses
| JSON | La sintaxis del bloque admite una lista JSON de destinatarios de correo electrónico que serán notificados al enviar el formulario. Estas direcciones de correo electrónico anulan la configuración de notificación por correo electrónico establecida en el formulario. | |
gotowebinar_webinar_key
| String | Especifica el seminario web de GoToWebinar en el que se inscribirán los contactos que envíen el formulario. Solo disponible para los portales que utilizan la integración de GoToWebinar. | |
sfdc_campaign
| String | 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 están integrados con Salesforce. |
Presenta la información de derechos de autor con el año y el nombre de la empresa especificados en la configuración de contenido (Email > Footer Information).
Genera una etiqueta de galería de HubSpot. Esta etiqueta de la galería se basa 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 bloque. A continuación se muestran ambos métodos. Las imágenes de la galería se cargan de forma perezosa mediante JavaScript.
| Parameter | Type | Description | Default |
|---|---|---|---|
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. Consulta la sintaxis del bloque anterior. | |
loop_slides
| Boolean | Cuando es Verdadero, hace un bucle continuo a través de las diapositivas. |
True
|
num_seconds
| Number | Tiempo en segundos de pausa entre diapositivas. |
5
|
show_pagination
| Boolean | Proporcionar botones debajo del deslizador para navegar entre las diapositivas. |
True
|
sizing
| Enumeración | Determina si el deslizador cambia de tamaño, en función de la altura de las diapositivas. Los valores posibles son: "estático" o "redimensionado». |
"static"
|
auto_advance
| Boolean | Avanza automáticamente las diapositivas después del tiempo establecido en num_seconds. |
False
|
transition
| Enumeración | Establece el tipo de transición de la diapositiva. Los valores posibles son: "fade" o "slide". |
"slide"
|
caption_position
| Enumeración | Afecta a la posición de los subtítulos en o debajo 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
| Number | Si "display_mode" se establece como "lightbox", este parámetro controlará el número de filas mostradas dentro de la caja de luz. |
3
|
Genera un módulo de cabecera que mostrará el texto como una etiqueta h1-h6.
| Parameter | Type | Description | Default |
|---|---|---|---|
header_tag
| String | Selecciona la etiqueta de encabezamiento que se va a representar. Los valores posibles son: h1, h2, h3, h4, h5, h6. |
h1
|
value
| String | Renderiza el texto predeterminado dentro del módulo de encabezamiento. |
"A clear bold header"
|
| Parameter | Type | Description | Default |
|---|---|---|---|
name
| String | Nombre del icono. | |
style
| String | Estilo del icono. Valores posibles: |
REGULAR
|
unicode
| String | La representación en caracteres Unicode del icono. | |
icon_set
| String | El conjunto de iconos de FontAwesome a utilizar. Los valores posibles son:
| |
purpose
| String | El propósito del icono, utilizado para la accesibilidad. Los valores posibles son |
decorative
|
title
| String | El elemento del título del svg del icono, junto con un atributo |
Crea una etiqueta de imagen que permite a los usuarios seleccionar una imagen desde el editor de contenidos. Si deseas que la imagen esté vinculada a una URL de destino, debes utilizar linked_image a continuación.
| Parameter | Type | Description | Default |
|---|---|---|---|
alt
| String | Establece el texto alternativo predeterminado para la imagen. | |
src
| String | Rellena el atributo src de la etiqueta img. | |
width
| Number | Establece el atributo de ancho de la etiqueta img. |
The width of the image
|
height
| Number | Establece una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo electrónico. |
The height of the image
|
hspace
| Number | Establece el atributo hspace de la etiqueta img. | |
align
| String | Establece el atributo align de la etiqueta img. Los valores posibles son: izquierda, derecha y centro. | |
style
| String | Agrega declaraciones CSS en línea a la etiqueta img. Por ejemplo style="border:1px solid blue; margin:10px" | |
loading
| String | Controla el atributo de carga del elemento img. Se utiliza para la carga lenta basada en el navegador. |
Un módulo image src 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 utiliza generalmente con el parámetro no_wrapper=True, de modo que el src de la imagen puede agregarse al CSS en línea o a otras marcas. Una alternativa al uso de esta etiqueta es utilizar el parámetro export_to_template_context.
| Parameter | Type | Description | Default |
|---|---|---|---|
src
| String | Especifica el src de la imagen de la URL predeterminada. |
Agrega un Icono del Globo con enlaces a las versiones traducidas de una determinada página del CMS. Más información sobre los contenidos multilingües aquí.
| Parameter | Type | Description | Default |
|---|---|---|---|
display_mode
| Enumeración | El idioma del texto en el conmutador de idiomas. Los valores son:
|
Localized
|
Crea una imagen seleccionable por el usuario que se envuelve en un enlace. Este módulo 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.
| Parameter | Type | Description | Default |
|---|---|---|---|
alt
| String | Establece el texto alternativo predeterminado para la imagen. | |
src
| String | Rellena el atributo src de la etiqueta img. | |
width
| Number | Establece el atributo de ancho de la etiqueta img. |
The width of the image
|
height
| Number | Establece una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo electrónico. |
The height of the image
|
hspace
| Number | Establece el atributo hspace de la etiqueta img. | |
align
| String | Establece el atributo align de la etiqueta img. Los valores posibles son: izquierda, derecha y centro. | |
style
| String | Agrega declaraciones CSS en línea a la etiqueta img. Por ejemplo style="border:1px solid blue; margin:10px" | |
open_in_new_tab
| Boolean | Selecciona si se abre o no la URL de destino en otra pestaña. |
False
|
link
| String | Establece la URL de destino del enlace que envuelve la etiqueta img. | |
target
| String | Establece el atributo de destino de la etiqueta de enlace. | |
loading
| String | Controla el atributo de carga del elemento img. Se utiliza para la carga lenta basada en el navegador. |
Un módulo de logotipos muestra la imagen del logotipo de su empresa desde la configuración de contenidos.
| Parameter | Type | Description | Default |
|---|---|---|---|
suppress_company_name
| Boolean | Oculta el nombre de la empresa si no se establece un logotipo de imagen. |
False
|
alt
| String | Establece el texto alternativo predeterminado para la imagen. |
Value in Content Settings
|
src
| String | Rellena el atributo src de la etiqueta img. |
Value in Content Settings
|
width
| Number | Establece el atributo de ancho de la etiqueta img. |
The width of the image
|
height
| Number | Establece una altura mínima en un atributo de estilo de la etiqueta img solo para las plantillas de correo electrónico. |
The height of the image
|
hspace
| Number | Establece el atributo hspace de la etiqueta img. | |
align
| String | Establece el atributo align de la etiqueta img. Los valores posibles son: izquierda, derecha y centro. | |
style
| String | Agrega declaraciones CSS en línea a la etiqueta img. Por ejemplo style="border:1px solid blue; margin:10px" | |
open_in_new_tab
| Boolean | Selecciona si se abre o no la URL de destino en otra pestaña. |
False
|
link
| String | Establece la URL de destino del enlace que envuelve la etiqueta img. | |
override_inherited_src
| Boolean | Si es verdadero, usa el src del widget del logo en lugar del src heredado de la configuración o de la plantilla. |
True
|
heading_level
| String | Cuando se utilizan logotipos basados en texto no enlazados, esto envuelve el logotipo basado en texto en una de las siguientes opciones disponibles como etiqueta HTML: |
h1
|
loading
| String | Controla el atributo de carga del elemento img. Se utiliza para la carga lenta basada en el navegador. |
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. Si el id es nulo, la etiqueta de menú mostrará el menú predeterminado de la cuenta de HubSpot.
| Parameter | Type | Description | Default |
|---|---|---|---|
id
| Number | ID del árbol de menús desde los menús avanzados en la configuración de contenidos. | |
site_map_name
| String | 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
| String | Cuando es verdadero, se agrega una clase al árbol de menús que puede ser estilizada para permitir que los elementos del menú secundario aparezcan cuando se coloca el cursor encima del menú principal. Si es falso, los elementos del menú secundario aparecerán siempre. |
"true"
|
max_levels
| Number | Determina el número de niveles de menús anidados que se muestran en el marcado. Este parámetro determina el número de opciones secundarias del árbol de menú que se pueden expandir en el menú. |
2
|
flow
| Enumeración | Establece la orientación de los elementos del menú. Esto agrega clases al árbol de menús, para que puedan ser estilizados en consecuencia. Los valores posibles son "horizontal", "vertical" o "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
| String | Se utiliza para encontrar la raíz del menú. Cuando root_type se establece 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
| String | Algunos contenidos enriquecidos para describir esta entidad |
False
|
label
| String | Algunos contenidos enriquecidos para describir esta entidad |
False
|
Una etiqueta HubL que pone en cola un elemento de estilo para ser representado en el <head>.
Esta etiqueta es similar a la función require_css, excepto que esta etiqueta inserta el estilo en línea en lugar de desde una hoja de estilos. Esta etiqueta tampoco se desduplica contra otras instancias del CSS en la misma página. Si estás creando un módulo y deseas insertar una hoja de estilos, pero puedes usar ese módulo varias veces en una sola página, es posible que desees usar la función require_css en su lugar.
Una etiqueta HubL que encola todo lo que se coloca dentro de ella en el standard_header_includes que está en la plantilla <head>. Para la mayoría de Javascript y CSS ver require_js y require_css. Algunos casos de uso de require_head incluyen el suministro de meta etiquetas y etiquetas de enlace especiales (como prefetch y preconnect) de los módulos.
Una etiqueta HubL que pone en cola un elemento de script para ser renderizado. Para poner en cola un script para renderizar 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) en su lugar.
| Parameter | Type | Description | Default |
|---|---|---|---|
position
| String | Establece la posición en la que se renderizará el script en línea. Las opciones son: |
"footer"
|
Crea un editor de contenidos WYSIWYG.
| Parameter | Type | Description | Default |
|---|---|---|---|
html
| String | 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 <a href="#">benefits</a> and</li> <li>Turning visitors into leads.</li> </ul>
|
hsRssFeedComplete(feeds), donde feeds es el selector jQuery de todos los feeds que se han completado. Puedes manipular directamente el objeto DOM en esa función.
| Parameter | Type | Description | Default |
|---|---|---|---|
show_title
| Boolean | Muestra u oculta el título del canal RSS. |
True
|
show_date
| Boolean | Muestra la fecha del post. |
True
|
show_author
| Boolean | Muestra el nombre del autor. |
True
|
show_detail
| Boolean | Mostrar el resumen del post hasta el número de caracteres establecido por el parámetro |
True
|
title
| String | Rellena un encabezado sobre el listado de canales RSS. | |
limit_to_chars
| Number | Número máximo de caracteres a mostrar en el resumen. |
200
|
publish_date_format
| String | Formato de la fecha de publicación. Los valores posibles son |
"short"
|
attribution_text
| String | El texto que atribuye un autor a un post. |
"by"
|
click_through_text
| String | El texto que se mostrará al hacer clic en el enlace al final de un resumen del post. |
"Read more"
|
publish_date_text
| String | El texto que indica cuando fue publicada un post. |
"posted at"
|
include_featured_image
| Boolean | Muestra la imagen destacada con el enlace del post para los canales RSS generados por HubSpot. |
False
|
item_title_tag
| String | Especifica la etiqueta HTML del título de cada post. |
span
|
is_external
| Boolean | El feed RSS es de un blog externo. |
False
|
number_of_items
| Number | Número máximo de posts que se mostrarán. |
5
|
publish_date_language
| String | Especifica el idioma de la fecha de publicación. |
en_US
|
rss_url
| String | La URL donde se encuentra el feed RSS. | |
content_group_id
| String | ID para el blog cuando la fuente de feed es un blog interno. | |
select_blog
| String | Se puede utilizar para seleccionar un feed de blog interno de HubSpot. |
default
|
feed_source
| String | Establecer la fuente de feed de RSS. Cuando es interno, el formato general es | |
tag_id
| Number | ID para la etiqueta cuando la fuente de feed es un blog interno. |
Genera un título html y un subtítulo <p>.
| Parameter | Type | Description | Default |
|---|---|---|---|
header
| String | Texto a mostrar en la cabecera. |
"A clear and bold header"
|
subheader
| String | Texto a mostrar en el subtítulo. |
"A more subdued subheader"
|
heading_level
| String | El nivel de encabezamiento HTML semántico. Se admiten de h1 a h6. |
"h1"
|
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.
| Parameter | Type | Description | Default |
|---|---|---|---|
orientation
| Enumeración | Define clases de marcado de menú para permitir estilizar la orientación de los elementos de menú en la página. Los valores posibles son |
"horizontal"
|
menu_tree
| JSON | Estructura de los menús, incluidos los nombres de los enlaces de las páginas y las URL de destino. |
[]
|
Las etiquetas de contenido compartido en redes sociales generan iconos 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 iconos y mucho más.
| Parameter | Type | Description | Default |
|---|---|---|---|
use_page_url
| Boolean | Si es verdadero, el módulo comparte la URL de la página por opción predeterminada. |
True
|
link
| String | Especifica una URL diferente para compartir, si | |
pinterest
| JSON | Parámetros para el formato del enlace de Pinterest y la fuente de la imagen del icono. |
See block syntax example, above
|
twitter
| JSON | Parámetros para el formato del enlace de Twitter y la fuente de la imagen del icono. |
See block syntax example, above
|
linked_in
| JSON | Parámetros para el formato del enlace de LinkedIn y la fuente de la imagen del icono. |
See block syntax example, above
|
facebook
| JSON | Parámetros para el formato del enlace de Facebook y la fuente de la imagen del icono. |
See block syntax example, above
|
email
| JSON | Parámetros para el formato del enlace para compartir el correo electrónico y la fuente de la imagen del icono. |
See block syntax example, above
|
Una etiqueta espaciadora genera una etiqueta span vacía. Esta etiqueta puede ser estilizada para actuar como espaciador. En los diseños de arrastrar y soltar, el módulo espaciador se envuelve en un contenedor con una clase de span1-span12 para determinar cuánto espacio debe ocupar el módulo en la rejilla responsiva de doce columnas.
Las siguientes etiquetas se pueden utilizar en las páginas del sistema, como las páginas de restablecimiento de la contraseña o de suscripción por correo electrónico.
La plantilla de cancelación de suscripción con copia de seguridad sirve para recuperar destinatarios de correo electrónico si HubSpot no puede determinar la dirección de correo cuando un destinatario intenta cancelar la suscripción. Esta etiqueta muestra un formulario para que el contacto introduzca su dirección de correo electrónico para cancelar 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.
| Parameter | Type | Description | Default |
|---|---|---|---|
header
| String | Muestra el texto en una etiqueta h1 sobre el formulario de cancelación de la suscripción. |
"Email Unsubscribe"
|
input_help_text
| String | Muestra el texto de ayuda en una etiqueta h3 sobre el campo del formulario de cancelación de la suscripción por correo electrónico. |
"Your email address:"
|
input_placeholder
| String | Agrega un texto de marcador de posición en el campo de la dirección de correo electrónico. |
"email@example.com"
|
button_text
| String | Cambia el texto del botón de envío del formulario de cancelación de suscripción. |
"Unsubscribe"
|
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.
| Parameter | Type | Description | Default |
|---|---|---|---|
header
| String | Muestra el texto en una etiqueta h1 sobre el formulario de preferencias de suscripción. |
"Communication Preferences"
|
subheader_text
| String | Rellena el texto debajo del encabezado sobre las preferencias de cancelación de la suscripción. |
"<p>\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n</p>"
|
unsubscribe_single_text
| String | Muestra el texto <p class="header"> por encima de las opciones de suscripción. |
"Uncheck the types of emails you do not want to receive:"
|
unsubscribe_all_text
| String | Muestra el texto en una entrada <p class="header"> sobre la entrada de la casilla de comprobación para cancelar la suscripción a todos los correos electrónicos. |
"Or check here to never receive any emails:"
|
unsubscribe_all_unsubbed_text
| String | Rellena el texto dentro de un <p> que muestra, si la suscripción de un contacto está actualmente cancelada de 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
| String | Establece el texto junto a la entrada de la casilla de comprobación de cancelar la suscripción a todos los correos electrónicos. |
"Unsubscribe me from all mailing lists."
|
button_text
| String | Establece el texto del botón de envío que actualiza las preferencias de suscripción. |
"Update email preferences"
|
resubscribe_button_text
| String | Establece el texto del botón de envío para cuando los contactos se vuelvan a suscribir. |
"Yes, resubscribe me!"
|
La confirmación de actualización de suscripciones por 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 la cancela. Debe utilizarse en una plantilla del sistema de preferencias de suscripción.
| Parameter | Type | Description | Default |
|---|---|---|---|
header
| String | Muestra el texto en una etiqueta h1 sobre el formulario de cancelación de la suscripción. |
"Communication Preferences"
|
subheader_text
| String | Rellena el texto por encima del mensaje de confirmación. |
"<p>\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n</p>"
|
unsubscribe_all_success
| String | Establece el texto que se mostrará cuando alguien cancela la suscripción de todas las comunicaciones por correo electrónico. |
"You have successfully unsubscribed from all email communications."
|
subscription_update_success
| String | Establece el texto cuando un destinatario actualiza sus preferencias de suscripción. |
"You have successfully updated your email preferences."
|
Crea un formulario de inicio de sesión para dar acceso a contenidos privados.
| Parameter | Type | Description | Default |
|---|---|---|---|
email_label
| String | La etiqueta para el campo de entrada de correo electrónico. |
"Email"
|
password_label
| String | La etiqueta para el campo de entrada de la contraseña. |
"Password"
|
remember_me_label
| String | La etiqueta de la casilla de comprobación "Recordarme". |
"Remember Me"
|
reset_password_text
| String | El texto para el hipervínculo de restablecimiento de la contraseña. |
"Forgot your password?"
|
submit_button_text
| String | El texto para el botón de envío. |
"Login"
|
show_password
| String | El texto del enlace para revelar la contraseña. |
"Show password"
|
Crea un formulario de registro para acceder a contenidos privados.
| Parameter | Type | Description | Default |
|---|---|---|---|
email_label
| String | La etiqueta para el campo de entrada de correo electrónico. |
"Email"
|
password_label
| String | La etiqueta para el campo de entrada de la contraseña. |
"Password"
|
password_confirm_label
| String | La etiqueta para el campo de confirmación de la contraseña. |
"Confirm Password"
|
submit_button_text
| String | El texto para el botón de envío. |
"Save Password"
|
show_password
| String | El texto del enlace para revelar la contraseña. |
"Show password"
|
Crea un formulario para enviar un correo electrónico de restablecimiento de contraseña para acceder a páginas protegidas por contraseña.
| Parameter | Type | Description | Default |
|---|---|---|---|
email_label
| String | La etiqueta para el campo de entrada de correo electrónico. |
"Email"
|
submit_button_text
| String | El texto para el botón de envío. |
"Send Reset Email"
|
password_reset_message
| String | El mensaje que aparece después de solicitar el correo electrónico de restablecimiento de contraseña. |
False
|
Representa un formulario de restablecimiento de contraseña para acceder a páginas protegidas por contraseña.
| Parameter | Type | Description | Default |
|---|---|---|---|
password_label
| String | La etiqueta de texto para el campo de entrada de contraseña. |
"Email"
|
password_confirm_label
| String | La etiqueta de texto para el campo de entrada de confirmación de contraseña. |
"Send Reset Email"
|
submit_button_text
| String | La etiqueta de texto para el botón de envío del formulario. |
False
|
show_password
| String | La etiqueta de texto del botón para mostrar el valor de la contraseña introducida. |
False
|
password_requirements
| String | La etiqueta de texto que describe los requisitos de contraseña. |
False
|
Agrega un aviso de contraseña a las páginas protegidas con contraseña.
| Parameter | Type | Description | Default |
|---|---|---|---|
submit_button_text
| String | Etiqueta para el botón debajo del campo de entrada de la contraseña. |
"Submit"
|
bad_password_message
| String | Se muestra un mensaje si se introduce una contraseña incorrecta. |
"<p>Sorry, please try again.</p>"
|
password_placeholder
| String | Define el texto del marcador de posición dentro del campo de la contraseña. |
"Password"
|
Crea una sola línea de texto. Esta etiqueta puede ser útil para ser mezclada en tu marcado, cuando se utiliza junto con el parámetro no_wrapper=True. Por ejemplo, si quiere que sus usuarios finales puedan definir el destino de un ancla predefinida, podría rellenar el href con un módulo de texto con no_wrapper=True.
| Parameter | Type | Description | Default |
|---|---|---|---|
value
| String | Establece el texto predeterminado del campo de texto de una línea. |
Un textarea es similar a un módulo de texto en el sentido de 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 desea utilizarlo directamente dentro de una etiqueta de envoltura predefinida, agrega el parámetro no_wrapper=true.
| Parameter | Type | Description | Default |
|---|---|---|---|
value
| String | Establece el texto predeterminado del textarea. |
Muestra un reproductor de vídeo para un archivo de video desde el gestor de archivos que tiene activada la opción Permitir incrustar, compartir y rastrear.
| Parameter | Type | Description | Default |
|---|---|---|---|
hide_playlist
| Boolean | Ocultar la lista de reproducción de videos. |
True
|
playlist_color
| String | Un valor de color HEX para la lista de reproducción. | |
play_button_color
| String | Un valor de color HEX para los botones de reproducción y pausa. |
#2A2A2A
|
embed_button
| Boolean | Mostrar el botón de incrustación en el reproductor |
False
|
viral_sharing
| Boolean | Mostrar el botón para compartir en redes sociales en el reproductor. |
False
|
width
| Number | Ancho del reproductor de video incrustado. |
Auto
|
height
| Number | Altura del reproductor de video incrustado. |
Auto
|
player_id
| Number | El | |
style
| String | Estilo adicional para el jugador. | |
conversion_asset
| JSON | Ajuste del evento para el jugador. Puede mostrar 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 objeto tipo), posición (POST o PRE). |
See above example
|
placeholder_alt_text
| String | El texto alternativo del video. |
Gracias por tus comentarios, son muy importantes para nosotros.