> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.es/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Primeros pasos para usar temas

> Primeros pasos con los temas en el CMS de HubSpot. 

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.

<Frame>
  <img src="https://www.hubspot.com/hubfs/cms-themes-animation.gif" alt="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." />
</Frame>

Este documento te guiará en la creación de tu primer tema basado en la [Boilerplate de CMS Hub](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate). Para más información sobre los temas, consulta la[ documentación de referencia de los temas](/cms/start-building/building-blocks/overview).

<Tip>
  Si esta es tu primera experiencia con el desarrollo del Hub CMS, se recomienda que sigas:

  [Inicio rápido del desarrollo de CMS Hub](https://developers.hubspot.com/docs/cms/start-building/introduction/classic-hubl-quickstart)
</Tip>

<Warning>
  ### Nota:

  Antes de empezar, necesitarás instalar la [CLI de HubSpot](/developer-tooling/local-development/hubspot-cli/install-the-cli).
</Warning>

<Steps>
  <Step title="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](https://github.com/HubSpot/cms-theme-boilerplate).
  </Step>

  <Step title="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*.
  </Step>

  <Step title="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**.

    <Frame>
      <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023/create-page-from-dashboard.gif" alt="create-page-from-dashboard" />
    </Frame>

    * En la pantalla de selección de plantillas, las plantillas de tu [tema activo](https://knowledge.hubspot.com/website-and-landing-pages/use-themes#use-an-active-theme) 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**.

    <Frame>
      <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023/theme-selector.gif" alt="theme-selector" />
    </Frame>

    A continuación, se te dirigirá al editor de páginas donde puedes editar los campos del tema.
  </Step>

  <Step title="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.

    <Frame>
      <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023/edit-theme-settings.gif" alt="edit-theme-settings" />
    </Frame>
  </Step>

  <Step title="Prepárate para realizar cambios locales">
    Vuelve a tu terminal y ejecuta `hs watch my-website-theme my-website-theme`. Este [comando](/developer-tooling/local-development/hubspot-cli/install-the-cli) vigila tu directorio local y sube automáticamente los cambios a tu cuenta de HubSpot al guardar los archivos.
  </Step>

  <Step title="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](/cms/start-building/building-blocks/overview#fields-json) 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.

    ```json theme={null}
    // 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.
  </Step>

  <Step title="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:

      ```css theme={null}
      .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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## 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](/cms/start-building/building-blocks/overview). Mientras construyes tu tema, puede ser útil ver las mejores prácticas para [optimizar sitios web en el CMS de HubSpot](/cms/best-practices/testing-staging-performance/speed).

HubSpot tiene varios [temas predeterminados](/cms/start-building/building-blocks/themes/default-themes) 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](/cms/start-building/building-blocks/modules/overview).