Marketplace de modelos | Requisitos para módulos

​

Restrições de módulo

• 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

​

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 (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.
• 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.

​

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 para ajudar o criador de conteúdo a visualizar o espaço que ele preencherá com conteúdo.

​

Ícones do módulo

​

Módulos que exigem contas de terceiros

​

Campos do módulo

• 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 deve herdar da conta configurações de marca. 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

​

Qualidade do código do módulo

​

Os módulos devem ser autônomos

​

Módulos do tema

​

Módulos independentes

document.addEventListener('DOMContentLoaded', function () {
  // Put Javascript here
});

​

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

• É recomendado usar Vanilla JS 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 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.

{% 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.

​

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.

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

​

Organização de campo

​

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

• Predefinições
• 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

• Alinhamento
• Imagem de fundo
• Borda
• Cor
• Fonte
• Gradiente
• Espaçamento
• Alinhamento de texto

• 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

​

Agrupamento multinível

​

Agrupamento de campos individuais