Última modificación: 28 de agosto de 2025
Las plantillas HTML + HubL dan un mayor control a los desarrolladores que las plantillas de arrastrar y soltar del administrador de diseño visual. Los desarrolladores, a su vez, pueden ofrecer una mejor experiencia de uso a los creadores de contenido mediante la funcionalidad de arrastrar y soltar, lo que solo es posible con las plantillas HTML + HubL.
image1-2
La plantilla anterior es la plantilla base.html incluida en la biblioteca de recursos del CMS de HubSpot, que es una excelente manera de comenzar a desarrollar con HubSpot.

​
Familiaridad y herramientas

Dado que las plantillas HTML + HubL son archivos codificados, puedes usar tus herramientas preferidas para editarlas localmente. Recomendamos usar las herramientas de desarrollo local de HubSpot para que puedas subir, obtener, ver, crear y administrar de forma segura archivos en el sistema de archivos del desarrollador, así como en el administrador de archivos. Crear plantillas HTML + HubL con HubSpot es similar a usar otro lenguaje de plantillas que ya hayas usado antes. La diferencia clave es que HubSpot adopta un enfoque definido sobre las prácticas recomendadas para ciertas tareas con el fin de ofrecer la mejor experiencia a los creadores de contenido, además de encargarse de gran parte del mantenimiento y la optimización del rendimiento, reduciendo la carga de trabajo para los desarrolladores. Por ejemplo, si quieres cargar un archivo CSS en una página para ciertos módulos, en lugar de usar <link rel="stylesheet" type="text/css" href="https://developers.hubspot.es/docstheme.css">, debes incluir la hoja de estilo a través de css_assets en el archivo meta.json del módulo. Esto permite que HubSpot cargue CSS de forma condicional solo cuando el módulo está presente en una página, reduciendo la carga de CSS innecesario Más información sobre cómo optimizar el workflow de desarrollo de HubSpot.

​
Anotaciones de la plantilla

Las anotaciones de la plantilla, incluidas en la parte superior de una plantilla, configuran ajustes importantes de la plantilla, como el tipo de plantilla y si se puede usar para crear contenido nuevo. Las anotaciones de la plantilla se pueden cambiar en cualquier momento durante el proceso de desarrollo. A continuación, encuentra más información sobre las anotaciones de plantilla disponibles. 
<!--
  templateType: page
  isAvailableForNewContent: false
  enableDomainStylesheets: false
  label: Homepage
  screenshotPath: ../images/template-previews/home.png
-->

<!doctype html>

<html>
  ...
</html>
AnotaciónTipoDescripción
templateTypeCadenaEspecifica qué tipo de plantilla es un archivo. Los valores incluyen:
isAvailableForNewContentCadenaEspecifica si una plantilla está disponible para su selección en el proceso de creación de contenido. Los valores incluyen: true, false. Las plantillas definidas como false no necesitan incluir las variables requeridas. Las plantillas del tipo page que se definen como “false” también se pueden usar como parciales estándar.
enableDomainStylesheetsCadenaEspecifica si la plantilla debe cargar hojas de estilo del dominio. Los valores incluyen: true, false.
LabelCadenaDescripción sencilla de la plantilla, que se muestra en la pantalla de selección de plantillas. Por ejemplo, About Page, Homepage, Pricing.
screenshotPathCadenaLa captura de pantalla que se muestra cuando un creador de contenido está seleccionando una plantilla. Esta captura de pantalla debería facilitar la diferenciación de tus plantillas.

​
Incluye encabezado y pie de página

Las plantillas de HubSpot requieren la presencia de dos etiquetas a menos que el archivo sea una plantilla parcial. Estas son las etiquetas:
  • {{ standard_header_includes }}: se utiliza para agregar el CSS requerido de forma combinada y minimizada.
  • {{ standard_footer_includes }}: se utiliza para agregar de forma dinámica el javascript en la parte inferior de una página, para elementos como el script de seguimiento de HubSpot y los módulos.
Estas etiquetas deben estar presentes en una plantilla o en los elementos secundarios parciales para poder publicarse y utilizarse.

​
Parciales

Las plantillas parciales son archivos HTML + HubL que pueden incluirse en otros archivos codificados. Los parciales te permiten adoptar un enfoque más modular al compartir el marcador entre múltiples plantillas. Por ejemplo, un encabezado se puede convertir en parcial para que puedas incluirlo fácilmente como componente sin necesidad de volver a codificarlo.

​
Parciales estándar

Un parcial estándar es una plantilla o componente reutilizable con contenido que se puede editar en páginas individuales. Esto permite a los creadores de contenido cambiar el contenido según sea necesario, a diferencia de los parciales globales que siempre comparten contenido. Por ejemplo, el siguiente código arrastraría el módulo de la barra lateral a otro archivo de plantilla. Los parciales estándar deben incluir las siguientes anotaciones en la parte superior del archivo de plantilla:
  • templateType: page
  • isAvailableForNewContent: false
{% include "../partial/sidebar.html" %}

​
Parciales globales

Un parcial global es un tipo de contenido global que se puede usar en múltiples plantillas con contenido que se comparte en todas las instancias del parcial. Los parciales globales a menudo se usan para encabezados y pies de página, que puedes ver un ejemplo en el encabezado y el pie de página de la biblioteca de recursos del CMS de HubSpot. Estos parciales se llaman en el base.html utilizando la etiqueta global_partial. Los parciales globales deben incluir la anotación templateType: global_partial en la parte superior del archivo. 
{% global_partial path="../partials/header.html" %}

​
Bloques y extensiones

Al crear plantillas complejas, puedes crear bloques compartimentados que amplíen una plantilla principal. Por ejemplo, puedes crear una plantilla principal que incluya las variables requeridas standard_header_includes y standard_footer_includes. Dentro de esa plantilla, se define un bloque único utilizando la siguiente sintaxis, donde el body es un nombre único: 
{% block body %}
<!-- Content to display -->
{% endblock body %}
En la plantilla secundaria, puedes extender la plantilla principal e insertar más contenido en el bloque body. 
{% extends "./layouts/base.html" %}
{% block body %}
<h3>Page Content</h3>
<ul>
  <li>Bullet 1<li>
  <li>Bullet 2<li>
  <li>Bullet 3<li>
</ul>
{% endblock %}
Este método se utiliza en la plantilla base.html de la biblioteca de recursos del CMS de HubSpot, que luego se extiende por las otras plantillas en la carpeta de plantillas.

​
Grupos globales

También se pueden incluir los grupos globales creados con el creador de plantillas de arrastrar y soltar en el administrador de diseño. La sintaxis se muestra a continuación: 
{% include "/path/to/global_header.template.json" %}