Última modificación: 28 de agosto de 2025
Un tema es una colección portátil y contenida de materiales para desarrolladores diseñada para permitir una experiencia de edición de contenido flexible. Estos materiales pueden incluir plantillas, módulos, archivos CSS, archivos JavaScript, imágenes y más. Los temas permiten a los desarrolladores crear un conjunto de campos temáticos, similares a los campos de los módulos, que permiten a los creadores de contenidos controlar los estilos globales del sitio web sin tener que editar el CSS. Puedes utilizar HubL para acceder a los valores de los campos del tema a través del CSS del tema. Los creadores de contenido utilizan el editor de temas para modificar los campos del tema, previsualizar esos cambios con las plantillas existentes dentro de un tema y publicar sus cambios.
Animación de la UI de edición de la configuración del tema que muestra la selección de un color para los elementos de un tema.
Este documento te guiará en la creación de tu primer tema basado en la Boilerplate de CMS Hub. Para más información sobre los temas, consulta la documentación de referencia de los temas.
Si esta es tu primera experiencia con el desarrollo del Hub CMS, se recomienda que sigas:Inicio rápido del desarrollo de CMS Hub

​
Nota:

Antes de empezar, necesitarás instalar la CLI de HubSpot.
1

Comenzar un proyecto de tema de plantilla

Ejecuta hs create website-theme my-website-theme para crear un directorio poblado my-website-theme con archivos de la boilerplate del tema CMS.
2

Sube el CMS Boilerplate a tu cuenta de HubSpot

Ejecutar hs upload my-website-theme my-website-theme. Esto subirá la plantilla al administrador de diseño de tu cuenta, en una carpeta titulada my-website-theme.
3

Crea una página

Para crear una página a partir del tema cargado:
  • En tu cuenta de HubSpot, navega a Marketing > Sitio web > Páginas del sitio web.
  • En la parte superior derecha, haz clic en Crear y luego selecciona Página del sitio web.
  • En el cuadro de diálogo, selecciona el dominio en el que se publicará la página y luego introduce un nombre de página. Haz clic en Crear página.
create-page-from-dashboard
  • En la pantalla de selección de plantillas, las plantillas de tu tema activo aparecerán en la parte superior de la página.
    • Si no has seleccionado un tema activo, coloca el cursor sobre Boilerplate de tema CMS y haz clic en** Establecer como tema activo**.
    • Si ya has establecido un tema activo, selecciona tu nuevo tema haciendo clic en el menú desplegable del selector de temas y luego seleccionando Cambiar tema. Luego, coloca el cursor sobre Boilerplate de tema CMS y haz clic en Establecer como tema activo. En la página siguiente, selecciona una plantilla.
theme-selector
A continuación, se te dirigirá al editor de páginas donde puedes editar los campos del tema.
4

Editar campos del tema

  • En la barra lateral izquierda del editor de páginas, haz clic en la pestaña Temas.
    • En la pestaña Temas, haz clic en Editar configuración del tema. Aquí es donde puedes modificar la configuración de tu tema existente. La publicación de los cambios en la configuración del tema actualizará los estilos en todas las páginas que utilicen este tema actualizado.
edit-theme-settings
5

Prepárate para realizar cambios locales

Vuelve a tu terminal y ejecuta hs watch my-website-theme my-website-theme. Este comando vigila tu directorio local y sube automáticamente los cambios a tu cuenta de HubSpot al guardar los archivos.
6

Agregar un campo de tema

Ahora que estamos escuchando los cambios locales, agrega un nuevo campo de tema:
  • Abra el archivo fields.json en su editor. Este archivo controla los campos disponibles en la barra lateral del editor de temas. Vamos a agregar un nuevo campo para especificar la altura del pie de página.
  • Cerca de la parte inferior del archivo, localiza el grupo de footer.
  • Copia el código de abajo y pega el JSON en el archivo por encima del primer elemento de la matriz de elementos secundarios para el grupo de pie de página.
// fields.json
      {
      "id" : "",
      "name" : "height",
      "label" : "Footer height",
      "required" : false,
      "locked" : false,
      "display" : "text",
      "step" : 1,
      "type" : "number",
      "min" : 10,
      "max" : 900,
      "help_text":"This footer will expand in height to accomodate any content added to the footer. You are setting the minimum height in px",
      "default" : 100
      },
  • Guarda fields.json y actualiza la vista previa del tema en HubSpot. Tu nuevo campo debería aparecer en la barra lateral izquierda.
7

Haz referencia al campo en tu CSS

  • En tu editor de código, abre el archivo theme-overrides.css. Luego, localiza el selector css para .footer. Ahora vamos a agregar una min-height a este selector.
    • Para acceder a un valor en un tema, utiliza el objeto theme. Por ejemplo, se utilizaría {{ theme.footer.height }} para acceder al valor de altura establecido en nuestro campo de altura.
    • Reemplaza la declaración .footer en theme-overrides.css con lo siguiente:
    .footer {
  background-color: {{ footer_bg_color }};
  min-height: {{theme.footer.height}}px;
}
    • Guarda el archivo theme-overrides.css para subirlo a tu cuenta de HubSpot.
8

Cambios en las pruebas

Vuelve al editor de temas, y actualiza la página para ver tu nuevo campo aparecer bajo el pie de página. Actualiza el valor de la altura para que se refleje inmediatamente en la vista previa. Podría ser útil establecer un color de fondo para el pie de página para que puedas ver el cambio más fácilmente.

​
Pasos siguientes

Ahora que has creado y actualizado tu tema, puedes crear más campos temáticos y personalizarlos para tus proyectos. Para obtener más opciones de personalización, consulta el resumen de temas. Mientras construyes tu tema, puede ser útil ver las mejores prácticas para optimizar sitios web en el CMS de HubSpot. HubSpot tiene varios temas predeterminados que vienen con CMS Hub. Estos temas están disponibles para que los veas, los clones y los actualices, para aprender cómo podrías usar un tema en un escenario del mundo real. Una vez que tengas un control sobre los temas, aprende a construir tu primer módulo personalizado.