> ## Documentation Index > Fetch the complete documentation index at: https://br.developers.hubspot.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Configurar um módulo > Saiba como configurar um módulo personalizado.
Ao criar um módulo, há várias opções disponíveis que afetam onde um módulo está visível, como ele é identificado e como é editado. Ao [desenvolver localmente](/developer-tooling/local-development/hubspot-cli/install-the-cli), os módulos são armazenados como pastas com o sufixo `.module` Essas pastas contêm os arquivos que compõem as configurações do módulo e o código usado para processá-lo. A configuração de um módulo é mantida no arquivo [meta.json](#meta-json), enquanto os campos são configurados separadamente em um arquivo [fields.json](https://br.developers.hubspot.com/docs/guides/cms/content/modules/overview#fields-json). A maioria da configuração também pode ser modificada usando o editor de módulo no [Gerenciador de design](/cms/start-building/introduction/developer-environment/design-manager).
Estrutura de pastas do módulo exibida localmente Em um nível alto, você configura as opções do módulo localmente no arquivo `meta.json`, que pode incluir as seguintes propriedades: | Parameter | Type | Description | Default | | ------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | | `icon` | String | URL para uma imagem a ser usada como o ícone de um módulo. | | | `label` | String | Rótulo usado quando os módulos são exibidos nos editores de conteúdo | | | `module_id` | Número | ID exclusivo para o módulo que é independente do caminho. | | | `is_available_for_new_content` | Booleano | O valor para a alternância no canto superior direito do editor de módulos no HubSpot. Determina se o módulo pode ser usado no conteúdo. | `true` | | `global` | Booleano | Indica se o módulo é global ou não | `false` | | `host_template_types` | Array | Uma `array` de [tipos de conteúdo](https://br.developers.hubspot.com/docs/guides/cms/content/templates/overview) nos quais o módulo pode ser usado. Um ou mais de `["PAGE", "BLOG_POST", "BLOG_LISTING", "EMAIL"]`. | | | `css_assets` | Array | Uma `array` de arquivos CSS da qual o módulo depende. Dá suporte a caminhos relativos.por exemplo, `"css_assets": [{ "path": "../path/to/file.css" }]` | `[]` | | `css_render_options` | Objeto | Defina se o módulo CSS renderiza de forma assíncrona com `async`: `true`, `false` | `{"async": false}` | | `js_assets` | Array | Uma `array` de arquivos JavaScript da qual o módulo depende. Dá suporte a caminhos relativos.por exemplo, `"js_assets": [{ "path": "../path/to/file.js" }]` | `[]` | | `js_render_options` | Objeto | Modifica a tag JavaScript do módulo adicionada à página renderizada. As opções incluem: | `{"position":"footer"}` | | `inline_help_text` | String | Texto de ajuda que será exibido na parte superior do módulo em uma caixa de informações azul (limite de 300 caracteres).Fornece as informações necessárias para usar o módulo. Se você tiver informações de texto de ajuda específicas que deve transmitir, consulte a [documentação do campo de texto de ajuda](/cms/reference/fields/module-theme-fields#properties-used-by-all-fields). | `null` | | `master_language` | String | Com as[traduções ativadas](https://knowledge.hubspot.com/design-manager/create-translations-of-your-modules#:~:text=To%20create%20translations%20of%20a,the%20right%2C%20click%20Add%20translations.), o código do idioma no qual os campos do módulo foram originalmente escritos.por exemplo, `pt-br` | | | `placeholder` | Objeto | Define o [conteúdo do espaço reservado](/cms/reference/hubl/tags/standard-tags#editor-placeholders) para o módulo. Inclui as seguintes propriedades: | | | `categories` | Matriz | Uma matriz contendo até três [categorias de módulos](#add-categories).Por exemplo: `"categories":["FORMS_AND_BUTTONS"]` | | | `content_tags` | Matriz | Uma matriz de [objetos de tag de módulo](#adding-categories-and-tags) que contém o nome da tag e `source` igual a `"USER"`.Por exemplo: `"content_tags": [{` `"name" : "BUTTONS",` `"source" : "USER"``}]` | | Abaixo, saiba mais sobre as opções de configuração de módulos individuais. ## Adicionar um ícone Os módulos podem incluir um ícone que aparece no [Gerenciador de design](/cms/start-building/introduction/developer-environment/design-manager) e nos editores de página e e-mail para fornecer contexto visual aos criadores de conteúdo. É recomendado ter ícones diferentes para os diferentes tipos de módulos em seu tema. Os ícones são [obrigatórios para provedores do marketplace](/cms/marketplace/template-guidelines). Há duas maneiras de adicionar um ícone, através do [gerenciador de design](#add-an-icon-using-the-design-manager) ou do [CMS CLI](#add-an-icon-using-the-cli). Os ícones do módulo devem ser um arquivo `.svg` e ter tamanho inferior a 10 Kb. Para obter melhores resultados, o ícone deve ser simples e usar apenas uma cor. Os ícones que usam mais de uma cor serão convertidos automaticamente para você. O ícone do módulo padrão exibido é um ícone de chave inglesa e pincel. Para adicionar um ícone usando o gerenciador de design:
1. In your HubSpot account, navigate to **Marketing** > **Files and Templates** > **Design Tools**. 2. Use the left sidebar to locate the **module** you want to edit, then click the **module name**. 3. In the right sidebar of the module editor, click the **icon** next to the module title. 4. Upload/select your icon. After publishing your changes, the icon will appear within the page editors and design manager.
edit-module-icon-crop Para adicionar um ícone ao desenvolver localmente, abra o arquivo `meta.json` do módulo e adicione ou edite o valor do parâmetro `icon` para ser um SVG do gerenciador de arquivos. ```json theme={null} // meta.json { "global": false, "host_template_types": ["PAGE"], "icon": "http://example.com/hubfs/code.svg", "label": "Code block", "smart_type": "NOT_SMART", "is_available_for_new_content": true, "inline_help_text": "This module is for code snippets." } ``` ## Alterar o rótulo
O rótulo usado quando os módulos são exibidos no editor pode ser ajustado separadamente do nome do módulo. Isso é útil ao desenvolver localmente, pois você pode ter um nome que faz sentido enquanto tem um criador de conteúdo diferente. Localmente, você altera o parâmetro `label` para definir o rótulo. No gerenciador de design há um campo no editor de módulo abaixo do nome do módulo.
edit-module-label ## Tornar um módulo global Para módulos normais, o conteúdo de cada instância de um módulo em uma página, e-mail ou modelo é independente. Para alguns casos de uso, é útil poder fazer com que todas as instâncias de um módulo compartilhem o mesmo conteúdo. Ao desenvolver localmente, você pode tornar um módulo global definindo `global` como `true`. Você também pode [converter módulos como globais em um modelo de arrastar e soltar](https://knowledge.hubspot.com/design-manager/use-global-content-across-multiple-templates#create-new-global-content-in-the-design-manager:~:text=To%20convert%20an%20existing%20local%20module%20or%20group) usando o gerenciador de design. ## Controlar onde um módulo está disponível para uso Ao desenvolver localmente, você pode controlar em quais tipos de conteúdo um módulo pode ser usado por meio da propriedade `hostTemplateTypes`. Saiba mais sobre os [tipos de modelos disponíveis](https://br.developers.hubspot.com/docs/guides/cms/content/templates/overview#template-types). Os módulos também podem ficar ocultos para que não possam ser adicionados diretamente às páginas por meio da configuração `is_available_for_new_content` para `false`. Por exemplo, isso pode ser útil para módulos criados para menus de navegação e pesquisa. Você pode atualizar isso no gerenciador de design clicando na opção **Tipo de modelo** na barra lateral direita. edit-module-template-type ## Adicionar dependências de CSS e JavaScript Além de usar `module.css` e `module.js` para adicionar CSS e JavaScript que serão adicionados a todas as páginas que incluem uma instância de módulo, as dependências que são compartilhadas entre os módulos podem ser anexadas usando `css_assets` e `js_assets`. Os caminhos podem ser absolutos ou relativos ao arquivo `meta.json`. ```json theme={null} // meta.json { "css_assets": [{ "path": "../path/to/file.css" }], "js_assets": [{ "path": "../path/to/file.js" }] } ``` **Aviso:** ao usar caminhos relativos a dependências de referência, executar `hs fetch --overwrite` para atualizar o módulo para desenvolvimento local substituirá os caminhos relativos com caminhos absolutos. Usando o gerenciador de design, você pode vincular arquivos CSS e JavaScript a um módulo usando a seção *Arquivos vinculados* na barra lateral direita do editor de módulos. edit-module-linked-files ## Adicionar categorias e tags Você pode atribuir categorias e tags aos módulos para organizá-los nas ferramentas da HubSpot: * [Categorias](#categories): atribua categorias a um módulo para organizá-los em grupos dentro da interface do usuário do editor de conteúdo. Isso permite que os criadores de conteúdo encontrem módulos com mais facilidade ao criar conteúdo no HubSpot. Observe o seguinte sobre as categorias: * Um módulo pode ter até três categorias, que são pré-definidas e não podem ser personalizadas. * Atualmente, as categorias não são exibidas na interface do usuário do editor de conteúdo. No entanto, você pode atribuir categorias para quando a categorização for disponibilizada nos editores. * Módulos não categorizados estarão disponíveis em *todas* as categorias. * [Tags](#tags): atribua tags para organizar os módulos dentro do gerenciador de design. Isso permite que você encontre módulos com mais facilidade ao criar modelos. No gerenciador de design, você pode atribuir categorias e tags usando a seção *Filtrar tags* da barra lateral direita no editor de módulos. Saiba mais sobre as categorias e tags disponíveis abaixo. edit-module-filter-tags Localmente, você pode adicionar categorias e tags ao arquivo `meta.json` de um módulo da seguinte forma: ```json theme={null} // meta.json { "label": "Custom module", "categories": ["image_and_video", "commerce"], "content_tags": [ { "name": "BUTTONS", "source": "USER" }, { "name": "CTA", "source": "USER" } ], "is_available_for_new_content": true } ``` ### Categorias A matriz `categories` de um módulo pode conter até três das seguintes categorias (não diferencia maiúsculas de minúsculas): | Categoria | Descrição | | ------------------- | ------------------------------------------------------------------------------- | | `blog` | Módulos específicos do blog, como uma listagem de posts recentes. | | `body_content` | Módulos formatados para exibir conteúdo gráfico, como uma galeria de imagens. | | `commerce` | Módulos específicos de comércio, como cartões de preços. | | `design` | Módulos que afetam a estrutura e o layout do conteúdo, como accordions. | | `functionality` | Módulos que incluem respostas dinâmicas ou comportamento na página, como menus. | | `forms_and_buttons` | Módulos que permitem que os visitantes do site insiram e enviem dados. | | `media` | Módulos que contêm elementos como imagens, ícones, vídeos e banners. | | `social` | Módulos específicos para redes sociais, como compartilhamento social. | | `text` | Módulos que contêm apenas texto. | ### Tags A matriz `content_tags` de um módulo pode conter um dos seguintes objetos de tag de módulo (diferencia maiúsculas de minúsculas): **Tipos de conteúdo:** * `ACCORDION` * `ANIMATION` * `BLOG_POST` * `BUTTONS` * `CODE` * `CTA` * `FEED` * `FORM` * `ICON` * `IMAGE` * `LISTS` * `LOGO` * `MENU` * `RICH_TEXT` * `SLIDER` * `TEXT` * `VIDEO` **Funções:** * `BANNER` * `BLOG` * `BRANDING` * `CALCULATOR` * `CONVERSION` * `EMAIL` * `GALLERY` * `HEADERS` * `INTERACTION` * `LAYOUT` * `MAP` * `MULTIMEDIA` * `NAVIGATION` * `PROGRESS_BAR` * `SEARCH` * `SETTINGS` * `SOCIAL` * `TRANSLATION`