Primeros pasos para usar temas

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.

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.

Ejecuta hs create website-theme my-website-theme para crear un directoriomy-website-themepoblado con archivos de la boilerplate de tema de CMS.

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.

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.

• 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 CMS theme boilerplate 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.

A continuación, se te dirigirá al editor de páginas donde puedes editar los 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. 

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.

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. 

•  Guarda fields.json y actualiza la vista previa del tema en HubSpot. Tu nuevo campo debería aparecer en la barra lateral izquierda.

• 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:

• Guarda el archivo theme-overrides.css para subirlo a tu cuenta de HubSpot.

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.

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.