> ## 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.

# Marketplace de modelos | Requisitos para módulos

> Saiba mais sobre os requisitos que os módulos de um tema devem cumprir para serem enviados para o Marketplace de ativos da HubSpot.

'Saiba mais sobre os requisitos que os módulos de um tema devem cumprir para serem enviados para o Marketplace de ativos da HubSpot.';

Saiba mais sobre os requisitos para enviar um módulo para o Marketplace de modelos. Esses requisitos se aplicam aos módulos de um tema e aos módulos independentes.

## Restrições de módulo

Os módulos não devem conter [HubDB](https://developers.hubspot.com/docs), chamadas para [funções sem servidor](https://developers.hubspot.com/docs) ou o [campo de objeto do CRM](/cms/reference/fields/module-theme-fields#crm-object).

Os seguintes tipos de módulos não devem ser criados como módulos independentes

* HTML
* Módulos de largura inteira
* Formulários e formulários de várias etapas
* Módulos espaçadores ou que criam uma estrutura de página não relacionada à interface do usuário
* Módulos que duplicam a funcionalidade do módulo padrão
* Módulos específicos de comércio
* Módulos específicos de e-mail

## Conteúdo do módulo

Saiba mais sobre os requisitos para rótulos do módulo e texto de ajuda, campos e conteúdo padrão.

### Rótulos do módulo e texto de ajuda

* Os módulos devem ter rótulos descritivos que transmitam sua finalidade. O rótulo *Hero Banner com rolagem Parallax* é descritivo, ao contrário dos rótulos *Hero Banner* e *Galeria*.
* Os rótulos do módulo não devem conter números, como em *Hero Banner 01*.
* Os rótulos dos módulos não devem conter sublinhados.
* Os rótulos do módulo não devem conter abreviações, como *Col* em vez de *Coluna*.
* Os módulos devem conter [texto de ajuda em linha](/cms/reference/modules/configuration#meta-json) (quando aplicável) para informar melhor como usar o módulo.
* Os módulos não devem ser nomeados da mesma forma que um [módulo padrão](/cms/reference/modules/default-modules).
* Para módulos independentes, o rótulo do módulo deve corresponder ao nome na listagem do modelo. Por exemplo, se a listagem do seu modelo for *SuperAwesome Banner with Scrolling*, o rótulo do módulo deverá ser o mesmo.

<DndSection>
  ![listing-name](https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/listing-name.png)

  ![module-label](https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/module-label.png)
</DndSection>

### Conteúdo padrão

* O campo padrão não pode incluir texto *Lorem ipsum*.
* O conteúdo padrão do campo deve representar o propósito do campo:
  * Ao incluir campos de menu, os módulos devem usar *Selecionar um menu* como opção de conteúdo padrão.
  * Ao incluir campos de formulário, os módulos devem usar *Selecionar um formulário* como opção de conteúdo padrão.
  * Ao incluir campos de seletor de blog, os módulos devem usar *Selecionar um blog* como a opção de conteúdo padrão.
* Se não fizer sentido adicionar conteúdo padrão a um módulo, use um [espaço reservado](/cms/reference/hubl/tags/standard-tags#editor-placeholders) para ajudar o criador de conteúdo a visualizar o espaço que ele preencherá com conteúdo.

### Ícones do módulo

Os módulos devem incluir um ícone personalizado atribuído ao módulo (substituindo o ícone padrão). Não use logotipos de empresas como ícones, como logotipos da Apple ou da Amazon. Para módulos incluídos em um tema, cada módulo deve ter um ícone exclusivo e relevante.

Saiba mais sobre [ícones do módulo](/cms/reference/modules/configuration#adding-an-icon).

### Módulos que exigem contas de terceiros

Para módulos individuais, se o módulo exigir uma conta de terceiros, isso deve ser incluído na descrição do modelo. Por exemplo, se o seu módulo usar a Plataforma do Google Maps, você precisará incluir uma observação: *"O uso deste módulo requer uma conta do Google Cloud (Plataforma do Google Maps)".*

## Campos do módulo

Revise os requisitos específicos para os módulos de um tema e os módulos independentes abaixo

* Para módulos de um tema:
  * Por exemplo, os módulos devem conter texto de ajuda integrado e conteúdo padrão específico para determinados campos.
  * Pelo menos um [campo de logotipo](/cms/reference/fields/module-theme-fields#logo) deve herdar da conta [configurações de marca](/cms/start-building/building-blocks/fields/brand-and-settings-inheritance). Se estiver usando um campo de imagem para renderizar um logotipo, o campo de imagem não precisa ser herdado das configurações da marca.
* Para ambos os módulos em um tema e módulos independentes:
  * Os nomes dos campos do módulo devem descrever a intenção do campo. Por exemplo, se um campo de texto é usado para incluir o cargo de uma pessoa, *Cargo* seria uma descrição adequada, ao contrário de *Título*.
  * Todos os módulos padrão da HubSpot devem ser estilizados e exibidos corretamente em todos os modelos enviados.

### Configuração de fields.json e module.html

Para garantir uma funcionalidade compatível entre temas e módulos independentes, os módulos devem [herdar](/cms/reference/fields/overview#inherited-fields) os campos de cor e fonte com a definição de `default_value_path` ou `property_value_paths`, ou ambos, no arquivo `fields.json`, e uma referência aos campos do tema no arquivo `module.html` deve ser adicionada. [Saiba mais sobre esses requisitos.](https://developers.hubspot.com/docs#module-compatibility-with-themes)

## Qualidade do código do módulo

### Os módulos devem ser autônomos

#### Módulos do tema

Todos os arquivos necessários para o módulo do tema, como CSS ou JavaScript, devem estar contidos na pasta do tema e incluídos no diretório do tema. Você pode usar o recurso Arquivados vinculados no Gerenciador de design. Ou inclua os arquivos usando as funções [require\_js()](/cms/reference/hubl/functions#require-js) ou [require\_css()](/cms/reference/hubl/functions#require-css) com um caminho relativo para o arquivo.

Para bibliotecas comuns, como slick.js, você pode incluí-las usando as funções `require_js()` ou `require_css()` com um URL absoluto para a CDN onde estão hospedadas.

<Alert type="warning" titleText="Observação:">
  Não use URLs absolutas para ativos contidos no seu portal de desenvolvimento, pois referências entre portais não serão resolvidas.
</Alert>

#### Módulos independentes

Para módulos independentes, todos os arquivos CSS e Javascript devem estar contidos em `module.css` ou `module.js`. Como alternativa, inclua os arquivos usando as funções `require_js()` ou `require_css()` com um URL absoluto para a CDN onde eles estão hospedados. Não é possível usar o recurso Arquivos vinculados no Gerenciador de design, pois ele está disponível apenas para módulos de tema.

Como `module.js` está incluído no DOM antes de qualquer arquivo `require_js` ou `require_css`, o JavaScript contido na seção `module.js` deve ser adiado usando a anotação abaixo:

```js theme={null}
document.addEventListener("DOMContentLoaded", function () {
  // Put Javascript here
});
```

Todos os scripts e arquivos devem ser renderizados no cabeçalho do [HTML](/cms/reference/hubl/functions#require-js) do módulo.

### Restrições de código para módulos independentes

As restrições a seguir se aplicam apenas a módulos independentes:

* É recomendado usar [Vanilla JS](http://vanilla-js.com/) sempre que possível. Adicionar uma biblioteca jQuery a um site que não usa jQuery pode causar conflitos e tornar a página mais lenta.
* Ao usar uma biblioteca jQuery, use a função [require\_js ](/cms/reference/hubl/functions#require-js)para incluir a biblioteca, caso a caixa de seleção (Booleano) para jQuery esteja desmarcada nas configurações do portal, para evitar conflitos de várias bibliotecas jQuery.

```js theme={null}
{% if not site_settings.include_jquery %}
{{ require_js("https://code.jquery.com/jquery-3.7.0.min.js", "footer") }}
{% endif %}
```

### Categorias

* Todos os módulos independentes devem ter pelo menos uma categoria. Os módulos enviados como parte de um tema não precisam ter categorias, mas é recomendado incluir pelo menos uma. Saiba mais sobre como [adicionar categorias aos módulos](/cms/reference/modules/configuration).

### Seletores de nome de classe

* Qualquer seletor de nome de classe deve incluir como prefixo o nome do módulo, substituindo espaços por hifens. Por exemplo, abaixo está o arquivo `module.html` de um botão chamado `example-button`, com cada nome de classe e seletor CSS refletindo seu nome.

```hubl theme={null}
<style>
{% scope_css %}
{# Button wrapper #}
 {% if module.styles.group_alignment.alignment %}
  .example-button-wrapper {
   text-align: {{ module.styles.group_alignment.alignment.horizontal_align }};
   }
 {% endif %}

{# Button #}

.example-button {
 {% if module.styles.group_background.color.color %}
  background-color: rgba({{ module.styles.group_background.color.color|convert_rgb }}, {{ module.styles.group_background.color.opacity / 100 }});
 {% endif %}
 }
 {% end_scope_css %}
</style>
{% end_require_css %}

{##### Module HTML #####}

<div class="example-button-wrapper">
 <a href="{{ href }}" class="example-button"
 {% if module.button_link.open_in_new_tab %}target="_blank"{% endif %}
 {% if rel %}rel="{{ rel|join(" ") }}"{% endif %}
 >
  {{ module.button_text }}
 </a>
</div>
```

### Estilos e JavaScript

* Estilos:
  * Os módulos devem ter um grupo de estilos não vazio.
  * Não é recomendável codificar estilos inline dentro de módulos. Em vez disso, use estilos inline dinâmicos, permitindo que os campos controlem o estilo.
* JavaScript
  * O JavaScript deve poder representar as várias instâncias de um módulo. O Javascript no Painel JS só carregará uma vez por página, independentemente do número de ocorrências do módulo.
  * O Javascript deve fazer referência aos elementos DOM pelos nomes de classe específicos do módulo para garantir que os elementos externos não sejam afetados acidentalmente.

Ao criar módulos, você pode usar uma variável interna chamada `{{name}}`. Essa variável obtém o ID da instância do módulo (que pode ser usado somente no painel HTML+HubL) para ajudar na marcação CSS e JS em módulos complexos. [Saiba mais sobre isso na documentação para desenvolvedores.](/cms/reference/modules/files#require-css-block)

## Organização de campo

Os requisitos de organização e agrupamento de campos a seguir devem ser atendidos.

### Guia Conteúdo

* Quando houver pelo menos um controle dentro de um grupo de campos, todos os controles devem ser agrupados em categorias rotuladas por função.
* Os campos do módulo adicionados à guia *Conteúdo* devem permitir personalizar o conteúdo de um módulo. Por exemplo, controles para imagem, ícone, texto alternativo e controles de link.

### Guia Estilos

Os grupos de campos de estilo do módulo devem ser consistentes e seguir um padrão. Veja abaixo uma ordem recomendada para grupos de campos de estilo. Esses grupos podem estar no nível superior ou [aninhados em um grupo](#multi-level-grouping). Grupos vazios também podem ser removidos:

* [Predefinições](#presets)
* Texto
* Plano de fundo
* Borda
* Passar o mouse
* Canto
* Espaçamento
* Alinhamento
* Grupos de estilos personalizados que não se encaixam nos itens acima
* Avançado

Os seguintes tipos de campos devem estar contidos na guia de *Estilos*, se presente:

* [Alinhamento](/cms/reference/fields/module-theme-fields#alignment)
* [Imagem de fundo](/cms/reference/fields/module-theme-fields#background-image)
* [Borda](/cms/reference/fields/module-theme-fields#border)
* [Cor](/cms/reference/fields/module-theme-fields#color)
* [Fonte](/cms/reference/fields/module-theme-fields#font)
* [Gradiente](/cms/reference/fields/module-theme-fields#gradient)
* [Espaçamento](/cms/reference/fields/module-theme-fields#spacing)
* [Alinhamento de texto](/cms/reference/fields/module-theme-fields#text-alignment)

<Alert type="info">
  Ao mover campos da guia *Conteúdo* para a guia *Estilos*, aprenda como [usar o mapeamento de alias](/cms/start-building/building-blocks/fields/alias-mapping) para preservar o estilo dos módulos que já estão em uso nas páginas ativas.
</Alert>

* As opções de animação devem estar sempre posicionadas na parte inferior da lista de grupos de campos.

* As opções que permitem que os criadores de conteúdo adicionem snippets de código ou CSS devem ser agrupadas no final da lista de grupos de campos em um campo rotulado como *Avançado*.

* Os controles devem ser padronizados em todos os módulos. Por exemplo, todos os elementos que podem ter um controle de raio de borda devem oferecer esse controle. Evite oferecer controles em alguns módulos que estão ausentes em outros.

* Os campos do módulo adicionados à guia *Estilo* devem permitir adicionar estilos ao módulo. Por exemplo:
  * Opções de estilo, como cor, estilo de texto, alinhamento, espaçamento, borda e raio de canto.
  * Animações como, por exemplo, efeitos deslizantes e ao passar o mouse.
  * Predefinições como temas escuros e claros que devem alterar muitos estilos ao mesmo tempo.

### Exemplos de organização de campo

#### Predefinições

As predefinições podem ser usadas para fornecer aos criadores de conteúdo um conjunto limitado de opções, muitas vezes vinculadas às configurações do tema. Por exemplo, o módulo *Ícone* incluído no tema Crescimento contém predefinições para cores *Escuras* e *Claras*, o que permite manter a consistência quando usado em todo o site.

#### Agrupamento multinível

Ao decidir se deseja manter os campos de estilo no nível superior ou aninhá-los, considere o exemplo a seguir.

<DndSection>
  <DndModule numCols={6}>
    <div>
      O módulo *Ícone* incluído no tema Crescimento lista todos os estilos no nível superior porque trata-se de um componente e, portanto, suas opções de estilo afetam somente ele.
    </div>
  </DndModule>

  <DndModule numCols={6}>
    ![growth-theme-icon-module](https://br.hubspot.com/hubfs/Knowledge_Base_2021/Developer/growth-theme-icon-module.png)
  </DndModule>
</DndSection>

<DndSection>
  <DndModule numCols={6}>
    <div>
      O módulo de *Cartão do palestrante* incluído no tema Crescimento contém vários componentes: a imagem do cartão e seu conteúdo de texto. Os estilos dos módulos são, portanto, agrupados por componente para que o criador de conteúdo tenha um processo mais claro para aplicar estilos a cada componente.
    </div>
  </DndModule>

  <DndModule numCols={6}>
    ![growth-theme-speaker-card](https://br.hubspot.com/hubfs/Knowledge_Base_2021/Developer/growth-theme-speaker-card.png)
  </DndModule>
</DndSection>

#### Agrupamento de campos individuais

O módulo de botão abaixo contém agrupamentos para *Predefinições*, *Texto*, *Plano de fundo* e muito mais. Embora o grupo de campos *Canto* contenha apenas o controle de raio do canto, ele ainda está agrupado para criar uma experiência de criação de conteúdo uniforme.

![module-requirements-2\_1](https://br.hubspot.com/hubfs/Knowledge_Base_2021/Developer/module-requirements-2_1.png)![button-styles](https://br.hubspot.com/hubfs/Knowledge_Base_2023/button-styles.png)