`.
```shell theme={null}
hs watch my-theme my-theme
```
## Muestra preliminarmente los cambios locales en HubSpot
* En tu cuenta de HubSpot, dirígete a **Marketing** > **Archivos y plantillas** > **Administrador de diseño**.
* En la barra lateral izquierda, navega hasta el **tema** que has creado, luego abre la carpeta de **módulos** y selecciona el módulo de **Testimonios**.
* Con el módulo abierto, ahora deberías ver tus cambios en los paneles `module.html` y `module.css`.
* En la parte superior derecha, haz clic en **Vista preliminar**. Se abrirá una nueva pestaña para mostrar la vista preliminar del módulo.
Para recapitular en este tutorial, hasta ahora:
* Creaste un módulo en HubSpot.
* Bajaste ese módulo a tu entorno local.
* Realizaste cambios en el HubL + HTML y CSS utilizando tus herramientas de desarrollo locales.
En la siguiente parte de este tutorial, aprende a utilizar el módulo en una plantilla.
## Agregar el módulo a una plantilla
Para esta parte del tutorial, trabajarás principalmente con las carpetas de `modules` y `templates` dentro de los archivos de temas locales. 
Por su definición más básica, los módulos son áreas editables de las plantillas y páginas de HubSpot. Puedes insertar módulos en plantillas en HubSpot utilizando el administrador de diseño, pero aquí vas a utilizar HubL para agregar el módulo a la plantilla en tu entorno local.
* En tu editor de código, abre la carpeta `templates` y luego abre el archivo `home.html`.
* En el archivo `home.html`, ve hasta la `dnd_section` final, que comienza alrededor de la línea 28. En esta sección agregarás tu nuevo módulo.
* Dentro de esta `dnd_section` y encima de los otros `dnd_modules`, copia y pega la siguiente etiqueta de módulo HubL:
```hubl theme={null}
{% dnd_module
path= “../modules/Testimonial.module”,
offset=0,
width=4
%}
{% end_dnd_module %}
```
Esta etiqueta HubL hace referencia a tu nuevo módulo por su ruta de archivo relativa. Para lograr que el módulo encaje uniformemente con los otros dos módulos en la sección `dnd_section`, también asigna `width` y `offset` del módulo:
* El CMS de HubSpot utiliza un sistema de [cuadrícula de 12 columnas](https://developers.hubspot.com/docs#columns), por lo que para espaciar este módulo de manera uniforme con los otros dos, deberás actualizar cada módulo en la `dnd_section` para tener una anchura de `4`.
* Entonces, el primer `dnd_module` del grupo (`testimonial`) tendrá un desplazamiento de `0` para posicionarlo en primer lugar.
* El segundo `dnd_module` (`linked_image`) tendrá un desplazamiento de `4` para posicionarlo en segundo lugar.
* El segundo `dnd_module` (`rich_text`) tendrá un desplazamiento de `8` para posicionarlo en segundo lugar.
Tras los ajustes del `offset` y `width` de cada `dnd_module`, tu código será similar al siguiente:
```hubl theme={null}
{% dnd_section
background_color="#f8fafc",
vertical_alignment="MIDDLE"
%}
{% dnd_module
path= “../modules/Testimonial.module”,
offset=0,
width=4
%}
{% end_dnd_module %}
{% dnd_module
path="@hubspot/linked_image",
img={
"alt": "Stock placeholder image with grayscale geometrical mountain landscape",
"loading": "lazy",
"max_height": 451,
"max_width": 605,
"size_type": "auto_custom_max",
"src": get_asset_url("../images/grayscale-mountain.png")
},
offset=4,
width=4
%}
{% end_dnd_module %}
{% dnd_module
path="@hubspot/rich_text",
html="Provide more details here.
Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.
"
offset=8,
width=4
%}
{% end_dnd_module %}
{% end_dnd_section %}
```
Cuando se agrega un módulo a un área de arrastrar y soltar, la etiqueta del módulo no requiere un nombre único. Sin embargo, cuando se agrega un módulo a un archivo HTML fuera de las áreas de arrastrar y soltar, debes asignar al módulo un nombre único. También se utilizaría una sintaxis ligeramente diferente, por ejemplo:
`{% module "testimonial_one" path="../modules/Testimonial.module" %}`
Puedes aprender más sobre el [uso de módulos en las plantillas](/cms/reference/modules/using-modules-in-templates).
## Muestra preliminarmente tus cambios en HubSpot
* Si no has ejecutado el comando `watch` para hacer un seguimiento automático de tu trabajo guardado, ejecuta `hs watch `. Asegúrate de que este comando se siga ejecutando, mientras completas los siguientes pasos.
* En tu cuenta de HubSpot, abre administrador de diseño (**Marketing** > **Archivos y plantillas** > **Administrador de diseño**.
* En la barra lateral izquierda del administrador de diseño, selecciona el archivo **home.html**.
* En la parte superior derecha, haz clic en **Vista preliminar** y luego selecciona **Vista preliminar con opciones de visualización** para abrir la vista preliminar de la plantilla en una nueva ventana.
* En la nueva pestaña, consulta la vista preliminar de la plantilla que debería contener tu módulo de testimonios recién agregado.
## Personalizar el módulo en la plantilla localmente
Para hacer más interesante la plantilla de la página de inicio:
* Vuelve a tu editor de código y luego abre el archivo `home.html`.
* Agrega los siguientes parámetros a la etiqueta del módulo de testimonios:
```hubl theme={null}
{% dnd_module
path='../modules/Testimonial.module',
customer_name = "Mary",
profile_pic = {
src: "{{
get_asset_url('../images/profile-pic-mary.svg') }}",
alt: "Mary Profile Picture"
},
testimonial = "Wow, what a product! I can't wait to recommend this to all my family and friends!",
offset=0,
width=4
%}
{% end_dnd_module %}
```
Los parámetros anteriores anulan los valores predeterminados que asignaste originalmente a los tres campos. Cada parámetro utiliza el nombre de la variable HubL que asignaste a cada campo previamente:
* `customer_name`**:** este parámetro pasa el nombre `Mary` al campo del nombre del cliente y sobrescribe el valor de `Sally`.
* `profile_pic`**:** este parámetro es un objeto que contiene dos propiedades:
* La propiedad `src` utiliza la función HubL `get_asset_url` para obtener la URL de la nueva foto de perfil. Ten en cuenta que la ruta del archivo de la imagen es relativa a tu directorio de trabajo. Primero deberás agregar esta imagen a la carpeta `images` en tus archivos de tema locales. Puedes encontrar la imagen en la carpeta `images` de los [archivos de proyecto completados.](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea/images)
* La propiedad `alt` asigna el texto alternativo de la imagen.
* `testimonial`**:** este parámetro pasa un nuevo texto al campo de testimonio.
Alternativamente, para el campo de texto enriquecido, podrías utilizar la sintaxis de bloque de HubL para escribir un gran bloque de HTML o texto:
```hubl theme={null}
{% dnd_module
path='../modules/Testimonial.module',
customer_name = "Mary",
profile_pic = {
src: "{{
get_asset_url('../images/profile-pic-mary.svg') }}",
alt: "Mary Profile Picture"
},
offset=0,
width=4
%}
{% module_attribute "testimonial" %}
Wow, what a product! I can't wait to recommend this to all my family and friends!
{% end_module_attribute %}
{% end_dnd_module %}
```
Más información sobre [la sintaxis del bloque de módulos](/cms/reference/modules/using-modules-in-templates).
Si has mantenido el comando `watch` en ejecución en tu terminal, al guardar los cambios los enviará a HubSpot. Puedes volver por el administrador de diseño para obtener una vista preliminar de la plantilla.
## Agregar dos módulos de testimonios más a la plantilla
En este paso, agregarás otros dos módulos de testimonios a la plantilla siguiendo los mismos pasos que antes:
* Ve al editor de código y luego abre el archivo `home.html`.
* Debajo del módulo de testimonios que agregaste anteriormente, agrega otra instancia del módulo copiando y pegando el código de ese módulo. En el nuevo módulo de testimonios, especifica los siguientes detalles siguiendo los mismos pasos anteriores:
* El nombre del cliente es `Ollie`.
* El testimonio de Ollie dice: `I can't believe that I ever conducted business without the use of this product!`
* Para la imagen de Ollie, agrega la ruta relativa del archivo dentro de la carpeta `images`. Puedes obtener la imagen de los archivos de [proyecto terminados](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea). Entonces dale a la imagen de Ollie el atributo `alt` de `Ollie Profile Picture`.
* Para mantener el espaciado, fija `offset` en `4` y `width` en `4`.
* Debajo del segundo módulo de testimonios, agrega un tercero con los siguientes datos:
* El nombre del cliente es `Erin`.
* El testimonio de Erin dice: `My business has nearly tripled since I began to use this product! Don't wait, start now!`
* Para la imagen de Erin, agrega la ruta relativa del archivo dentro de la carpeta `images`. Luego dale a la imagen de Erin el atributo `alt` de `Erin Profile Picture`.
* Para mantener el espaciado, fija `offset` en `8` y `width` en `4`.
* Guarda los cambios.
Si has mantenido el comando `watch` en ejecución en tu terminal, puedes volver al administrador de diseño para previsualizar tus cambios en la plantilla. La vista preliminar de la plantilla debería contener ahora los tres módulos de testimonios.
Como paso final, prepararás el tema para usarlo en una página activa modificando el archivo `theme.json`.
## Modificar el nombre del tema
Si quieres modificar el nombre predeterminado del tema, puedes hacerlo configurando los campos `name` y `label` en el archivo `theme.json`.
```json theme={null}
// example theme.json
{
"name": "my_first_theme",
"label": "My first theme"
}
```
Después de agregar ese código, guarda los cambios para que el comando `watch` los envíe a HubSpot.
## Próximos pasos
Ahora que creaste un módulo personalizado, lo agregaste a la plantilla `home.html` y, opcionalmente, personalizaste el nombre del tema, puedes para crear una página activa desde el tema.
Si quieres seguir un tutorial similar que se centra en temas, echa un vistazo al tutorial de [Introducción a los temas](/cms/start-building/building-blocks/themes/getting-started) a continuación. De lo contrario, puedes obtener más información sobre cómo [crear y personalizar páginas](https://knowledge.hubspot.com/es/website-and-landing-pages/create-and-customize-pages) en la base de conocimientos de HubSpot.
O, si deseas obtener más información sobre los módulos, consulta las siguientes guías de módulos:
* [Configurar un módulo](/cms/reference/modules/configuration)
* [Usar módulos en plantillas](/cms/reference/modules/using-modules-in-templates)
* [Módulos predeterminados](/cms/reference/modules/default-modules)
## Otros tutoriales
* [Primeros pasos para usar temas](/cms/start-building/building-blocks/themes/getting-started)
* [Comenzar a usar las funciones sin servidor](https://developers.hubspot.com/docs)
* [Creación de un proceso de desarrollo eficiente](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow)
* [Empezar con la accesibilidad](/cms/best-practices/improve-existing-sites/accessibility)
* [Cómo utilizar los frameworks de JavaScript en CMS Hub](/cms/start-building/introduction/developer-environment/js-frameworks)
* [Cómo usar componentes web en módulos personalizados](https://developers.hubspot.com/blog/use-web-components-in-hubspot-cms-development)
* [Cómo crear un módulo basado en componentes web de bloques de código](https://developers.hubspot.com/blog/how-to-build-a-code-block-web-component)