`.
```shell theme={null}
hs watch my-theme my-theme
```
## Visualizar suas alterações locais no HubSpot
* Na sua conta da HubSpot, vá em **Marketing** > **Arquivos e Modelos** > **Ferramentas de design**.
* Na barra lateral esquerda, acesse o **tema** que você criou, abra a pasta de **módulos** e selecione o módulo **Depoimentos**.
* Com o módulo aberto, você deve ver suas alterações nos painéis `module.html` e `module.css`
* No canto superior direito, clique em **Visualizar**. Uma nova guia será aberta para exibir a visualização do módulo.
Recapitulando este tutorial até agora, você:
* criou um módulo no HubSpot.
* Baixou esse módulo para o seu ambiente local.
* Fez alterações no HubL + HTML e CSS usando suas ferramentas de desenvolvimento local.
Na próxima parte deste tutorial, saiba como usar o módulo em um modelo.
## Adicionar o módulo a um modelo
Para esta parte do tutorial, você trabalhará principalmente dentro das pastas `modules` e `templates` nos arquivos de tema locais. 
Por sua definição mais básica, os módulos são áreas editáveis de modelos e páginas da HubSpot. Você pode inserir módulos em modelos no HubSpot usando o gerenciador de design, mas aqui usaremos o HubL para adicionar módulos a um modelo em seu ambiente local.
* No editor de código, abra a pasta `templates` e, em seguida, abra o arquivo `home.html`.
* No arquivo `home.html`, acesse a `dnd_section` final, que começa na linha 28. Você adicionará o seu novo módulo a esta seção.
* Em `dnd_section` e acima dos outros `dnd_modules`, copie e cole a seguinte tag de módulo HubL:
```hubl theme={null}
{% dnd_module
path= “../modules/Testimonial.module”,
offset=0,
width=4
%}
{% end_dnd_module %}
```
Essa tag HubL faz referência ao seu novo módulo pelo caminho relativo de arquivo. Para que o módulo se ajuste de forma uniforme aos outros dois módulos na `dnd_section`, também atribui valores de `width` e `offset` ao módulo:
* O CMS da HubSpot usa um [sistema de grade de 12 colunas](https://developers.hubspot.com/docs#columns); portanto, para espaçar este módulo de forma uniforme com os outros dois, você precisará atualizar a `dnd_section` de cada módulo para uma largura igual a `4`.
* Em seguida, o primeiro `dnd_module` no grupo (`testimonial`) terá um deslocamento de `0` para posicioná-lo primeiro em lugar.
* O segundo `dnd_module` (`linked_image`) terá um deslocamento de `4` para posicioná-lo em segundo lugar.
* O terceiro `dnd_module` (`rich_text`) terá um deslocamento de `8` para posicioná-lo em terceiro lugar.
Depois de definir `offset` e `width` para cada `dnd_module`, seu código será semelhante ao seguinte:
```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 %}
```
Ao adicionar um módulo a uma área de arrastar e soltar, a tag do módulo não exige um nome exclusivo. No entanto, ao adicionar um módulo a um arquivo HTML fora das áreas de arrastar e soltar, você deve atribuir ao módulo um nome exclusivo. Você também usaria uma sintaxe ligeiramente diferente, por exemplo:
`{% module "testimonial_one" path="../modules/Testimonial.module" %}`
Saiba mais sobre como [usar módulos em modelos](/cms/reference/modules/using-modules-in-templates).
## Visualizar suas alterações no HubSpot
* Se você não tiver mantido o comando `watch` em execução para rastrear seu trabalho automaticamente, execute `hs watch `. Certifique-se de que esse comando continue em execução ao concluir as próximas etapas.
* Na sua conta da HubSpot, abra o gerenciador de design (**Marketing** > **Arquivos e modelos** > **Ferramentas de design**.
* Na barra lateral esquerda do gerenciador de design, selecione o arquivo **home.html**.
* No canto superior direito, clique em **Visualizar** e selecione **Visualização em tempo real com opções de exibição** para abrir a visualização do modelo em uma nova janela.
* Na nova guia, confira a visualização do modelo, que deve conter o módulo de depoimentos recém-adicionado.
## Personalizar o módulo no modelo localmente
Para tornar o modelo da página inicial mais interessante:
* Retorne ao editor de códigos e abra o arquivo `home.html`.
* Adicione os seguintes parâmetros à tag do módulo de depoimentos:
```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 %}
```
Os parâmetros acima substituem os valores padrão que você atribuiu originalmente aos três campos. Cada parâmetro usa o nome da variável do HubL que você atribuiu a cada campo anteriormente:
* `customer_name`**:** este parâmetro passa o nome `Mary` para o campo de nome do cliente, substituindo o valor de `Sally`.
* `profile_pic`\*\*: \*\*este parâmetro é um objeto que contém duas propriedades.
* A propriedade `src` usa a função do HubL `get_asset_url` para recuperar o URL da nova imagem de perfil. Observe que o caminho do arquivo de imagem é relativo ao seu diretório de trabalho. Primeiro, você precisará adicionar essa imagem à pasta `images` nos arquivos do tema local. Você pode encontrar a imagem na pasta `images` nos[arquivos do projeto concluído.](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea/images)
* A propriedade `alt` atribui o texto alternativo da imagem.
* `testimonial`**:** este parâmetro passa um novo texto para o campo de depoimentos.
Alternativamente, para o campo de rich text, você pode usar a sintaxe de bloco do HubL para escrever um grande bloco de HTML ou 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 %}
```
Saiba mais sobre a [sintaxe de bloco do módulo](/cms/reference/modules/using-modules-in-templates).
Se você manteve o comando `watch` em execução no seu terminal, salve as alterações para enviá-las para o HubSpot. Você pode voltar ao gerenciador de design para visualizar o modelo.
## Adicionar mais dois módulos de depoimentos ao modelo
Nesta etapa, você adicionará mais dois módulos de depoimentos ao modelo usando as mesmas etapas anteriores:
* Acesse o editor de códigos e, em seguida, abra o arquivo `home.html`.
* No módulo de depoimentos que você adicionou anteriormente, adicione outra instância do módulo, copiando e colando o código desse módulo. No novo módulo de depoimentos, especifique os seguintes detalhes usando as mesmas etapas acima:
* O nome do cliente é `Ollie`.
* O depoimento de Ollie diz: `I can't believe that I ever conducted business without the use of this product!`
* Para a imagem de Ollie, adicione o caminho de arquivo relativo para o arquivo dentro da pasta `images`. Você pode obter a imagem nos [arquivos do projeto concluído](https://github.com/HubSpot/cms-modules-getting-started/tree/3b9159334f8c6204c7d2d34d8945d71b6ba402ea). Em seguida, dê à imagem de Ollie o atributo `alt` de `Ollie Profile Picture`.
* Para manter o espaçamento, defina `offset` como `4` e `width` como `4`.
* Abaixo do segundo módulo de depoimento, adicione um terceiro com os seguintes detalhes:
* O nome do cliente é `Erin`.
* O depoimento de Erin diz: `My business has nearly tripled since I began to use this product! Don't wait, start now!`
* Para a imagem de Erin, adicione o caminho de arquivo relativo para o arquivo dentro da pasta `images`. Em seguida, dê à imagem de Erin o atributo `alt` de `Erin Profile Picture`.
* Para manter o espaçamento, defina `offset` como `8` e `width` como `4`.
* Salve suas alterações.
Se você manteve o comando `watch` em execução no seu terminal, volte ao Gerenciador de design para visualizar as alterações no modelo. A visualização do modelo deve conter todos os três módulos de depoimentos.
Como etapa final, você preparará o tema para uso em uma página ativa, modificando o arquivo `theme.json`.
## Modificar o nome do tema
Se quiser modificar o nome padrão do tema, você pode fazer isso configurando os campos `name` e `label` no arquivo `theme.json`.
```json theme={null}
// example theme.json
{
"name": "my_first_theme",
"label": "My first theme"
}
```
Depois de adicionar esse código, salve suas alterações para que o comando `watch` envie suas alterações para o HubSpot.
## Próximas etapas
Agora que você criou um módulo personalizado, adicionou-o ao modelo `home.html` e, opcionalmente, personalizou o nome do tema, está pronto para criar uma página ativa a partir do tema.
Se quiser seguir um tutorial semelhante criado especificamente para temas, confira o tutorial [Introdução aos temas](/cms/start-building/building-blocks/themes/getting-started) a seguir. Caso contrário, você pode saber mais sobre como [criar e personalizar páginas](https://knowledge.hubspot.com/pt/website-and-landing-pages/create-and-customize-pages) na Central de conhecimento da HubSpot.
Ou, se você quiser saber mais sobre os módulos, confira os seguintes guias:
* [Configurando um módulo](/cms/reference/modules/configuration)
* [Usar módulos em modelos](/cms/reference/modules/using-modules-in-templates)
* [Módulos padrão](/cms/reference/modules/default-modules)
## Outros tutoriais
* [Introdução aos temas](/cms/start-building/building-blocks/themes/getting-started)
* [Introdução às funções sem servidor](https://developers.hubspot.com/docs)
* [Criar um fluxo de trabalho de desenvolvedor eficaz](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow)
* [Introdução à acessibilidade](/cms/best-practices/improve-existing-sites/accessibility)
* [Como usar estruturas JavaScript no CMS Hub](/cms/start-building/introduction/developer-environment/js-frameworks)
* [Como usar componentes da Web em módulos personalizados](https://developers.hubspot.com/blog/use-web-components-in-hubspot-cms-development)
* [Como criar um módulo baseado em componentes da Web com bloco de código](https://developers.hubspot.com/blog/how-to-build-a-code-block-web-component)