Primeros pasos para usar temas

Last updated:

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:

Quick start to CMS Hub development

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 directoriomy-website-themepoblado con archivos de la boilerplate de tema de CMS.

2. Sube el CMS Boilerplate a tu cuenta de HubSpot

Ejecuta 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
  • En Tus temas, selecciona el tema CMS Theme Boilerplate, y luego selecciona una plantilla
Captura de pantalla de la experiencia de creación de páginas para una plantilla en un tema

4. Editar campos del tema

  • En la barra lateral izquierda del editor de páginas, haz clic en la pestaña Diseño.
  • Selecciona Editar la configuración de 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. 
Abrir la configuración del tema desde el editor de páginas

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:

  • Abre el archivo fields.json en tu 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.

Próximos pasos

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.


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