Requisitos para temas do Marketplace de modelos da HubSpot

Saiba mais sobre os requisitos que um tema deve atender para ser enviado ao Marketplace de modelos da HubSpot. 

Lembre-se dos seguintes limites por tema:

• As contas gratuitas do CMS Hub não podem usar a pesquisa do site ou a funcionalidade de CTA. Saiba mais sobre o que está incluído nas assinaturas do CMS Hub no catálogo de produtos e serviços da HubSpot.
• Os temas não podem conter mais de:
  • 50 modelos
  • 50 módulos
  • 50 seções

• Os temas não devem conter:
  • Modelos de e-mail
  • Funcionalidades do HubDB
  • Funções sem servidor
  • Campos de objeto do CRM.
  • Modelos de associação
  • Colunas flexíveis em modelos

Usando o Google Lighthouse, um tema deve ter uma pontuação superior aos seguintes limites:

• Acessibilidade em desktops: 65
• Práticas recomendadas para desktops: 80
• Desempenho em desktops: 70
• Desempenho em dispositivos móveis: 40

Saiba como gerar um relatório do Google Lighthouse para seu tema usando a CLI.

Além disso, os ativos do tema devem atender aos seguintes requisitos de desempenho e acessibilidade:

• Os arquivos do tema devem poder ser minificados com sucesso.
• Todos os arquivos de imagem devem ter menos de 1 MB.
• Todas as tags de imagem devem ter um atributo alt (um valor "" é aceitável).
• Todas as tags de imagem devem ter um atributo loading (um valor "" é aceitável).

Os temas no marketplace devem atender aos seguintes requisitos:

• Todos os temas enviados devem ser distintos. Por exemplo, o mesmo tema com conteúdo de texto ou espaços reservados diferentes não conta como um tema distinto. 
• Um tema deve ser criado com modelos HTML + HubL e tags dnd_area.
• Você deve usar seções sempre que aplicável. Deve haver um mínimo de cinco seções em um tema. 
• Você deve incorporar áreas utilizáveis de arrastar e soltar em cabeçalhos e rodapés. 
• Os temas devem respeitar uma grade de 12 colunas.

Além disso, os temas devem atender aos seguintes requisitos mínimos em seus modelos, opções de campo de tema, configurações theme.json e field.json e campos de módulo.

Um tema deve incluir no mínimo os seguintes tipos de modelos:

• Um modelo de página de site ou landing page.
  • Ao incluir vários modelos de página, cada modelo deve ter um propósito diferente. Por exemplo, uma página principal, uma página Sobre, uma landing page de largura inteira e uma landing page com uma barra lateral direita.
  • É recomendado incluir pelo menos oito modelos de página em um tema. 

• Modelos separados de listagem de blog e de post de blog.
  • Modelo de listagem de blog: a página que mostra todos os posts de blog em formato de listagem (conhecido como a rolagem de blog). O título do modelo deve indicar que se trata de uma página de listagem.
  • Modelo de post de blog: a página de detalhes do post de blog que exibe posts de blog individuais. O título do modelo deve indicar que se trata de uma página de post de blog.
  • Além disso, as caixas de comentários e autor do blog devem ser estilizadas para corresponder ao tema.

• Os seguintes modelos de página do sistema:
  • Modelo de erro 404: exibido quando os visitantes acessam uma página que não existe.
  • Modelo de erro 500: exibido quando o site encontra um erro interno.
  • Modelo de solicitação de senha: exibido quando uma página é protegida por senha.
  • Modelo de assinatura: uma página de preferências de assinatura onde os destinatários de e-mail podem gerenciar os tipos de e-mails que assinaram.
  • Modelo de atualização de assinatura: uma página de confirmação exibida quando um destinatário de e-mail atualiza suas preferências de assinatura.
  • Modelo de cancelamento de assinatura de backup: a página que aparecerá para destinatários de e-mail que estão tentando cancelar a assinatura, caso o HubSpot não possa determinar seu endereço de e-mail.
  • Modelo de resultados de pesquisa: exibe os resultados de pesquisa que são retornados ao usar a pesquisa do site. Disponível somente para contas pagas do CMS Hub.

Um tema deve incluir no mínimo os seguintes campos: 

• Campos de tipografia:
  • Campos de fonte do corpo (tags p)
  • Campos de fonte h1 a h6
  • Cor do hiperlink (tags a), incluindo estilo ao passar o mouse
• Campos de formulário:
  • Fundo do título
  • Texto do título, incluindo pelo menos estilos de cores de fonte
  • Cor do plano de fundo do formulário
  • Cor da borda do formulário
  • Cor do rótulo do formulário
  • Cor da borda do campo do formulário
  • Botão de formulário, incluindo configurações para texto do botão, cor de fundo e estilo ao passar o mouse

Além disso, os campos do tema devem atender aos seguintes requisitos:

• Os campos do seu tema devem ser agrupados de forma lógica, quando apropriado. Por exemplo, vários campos relacionados à tipografia devem ser agrupados em um grupo Typography.
• Os campos do tema devem ter os seguintes elementos aplicados globalmente:
  • Campos de cor primária, secundária e terciária
  • Campos de fonte do cabeçalho
  • Campo de fonte do corpo
• Os campos de tema devem ter controles de cor e fonte separados para botões e formulários, além de controles de cor, logotipo e fonte separados para cabeçalho e rodapé. 
• Uma parte dos campos de cor e logotipo do tema deve ser herdada das configurações de marca da conta:
  • Pelo menos dois campos de cor devem herdar as cores das configurações de marca da conta. Campos de cor adicionais podem ser predefinidos para outras cores, incluindo preto e branco.
  • Se os módulos em um tema estiverem usando logotipos, pelo menos um campo de logotipo deve ser herdado das configurações de marca da conta. 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.

O arquivo theme.json deve incluir os seguintes parâmetros:

Saiba mais sobre esses parâmetros na documentação theme.json.

O arquivo fields.json controla os campos e grupos de campos disponíveis no editor de temas, incluindo campos de estilo. Os campos que você decide incluir dependem de quanto controle você quer que os criadores de conteúdo tenham no editor de páginas. O arquivo fields.json deve conter pelo menos três campos de cor.

Para garantir funcionalidade compatível entre temas e módulos independentes, os temas devem incluir as seguintes convenções de nomenclatura padrão para fonte e cor: primary_color, secondary_color, heading_font e body_font.

Se os campos do tema não tiverem os campos primary_color, secondary_color, heading_font ou body_font, eles poderão usar o campo alternate_names. Saiba mais sobre esse requisito aqui.

 Saiba mais sobre esses parâmetros na documentação de fields.json e veja o exemplo de arquivo fields.json no Boilerplate do HubSpot CMS. 

As configurações do tema devem aderir aos requisitos a seguir.

As configurações do tema não devem entrar em conflito com os estilos do editor ou com os estilos definidos por meio de um módulo. Por exemplo, não use !important no CSS, pois isso dificulta a substituição pelos usuários finais e pode causar um conflito.

As configurações de tema devem usar rótulos descritivos para que os criadores de conteúdo saibam o que estão atualizando.

As configurações de tema devem ser aplicadas a todos os modelos de um tema, a menos que haja um caso de uso específico para estilos adicionais. Por exemplo, as alterações no estilo e tamanho dos cabeçalhos h1 nas configurações devem ser aplicadas a todas as tags h1 no tema.

Os temas devem incluir parciais globais. Parciais globais são um tipo de modelo criado usando HTML e HubL que pode ser reutilizado em todo o site. Os tipos mais comuns de parciais são cabeçalhos do site, barras laterais e rodapés. 

As parciais globais devem incluir áreas de arrastar e soltar usáveis. Para os menus usados globalmente em um site, os usuários também devem poder selecionar um menu de navegação do HubSpot criado nas configurações da conta.

Saiba como criar parciais globais.

Todos os temas devem conter uma estrutura de pastas adequada e ser agrupados em uma pasta principal, que deve descrever a listagem do produto. Por exemplo, se você criar um tema chamado “SuperAwesome” para o marketplace, sua estrutura deve ser semelhante à imagem abaixo. Saiba mais sobre a estrutura de arquivos do tema. 

Ao criar URLs de visualização, você deve usar seu próprio nome de domínio. Você não pode usar o domínio fornecido pela HubSpot com esta estrutura de URL: [AccountID].hs-sites.com

Deve ser usado um site ativo, não uma imagem de um site de demonstração. 

Se, a qualquer momento, sua demonstração ativa se tornar inacessível, a HubSpot reserva-se o direito, com notificação ao fornecedor, de retirar/remover seu tema até que a demonstração ativa fique acessível novamente.

Você deve usar caminhos de arquivo locais relativos ao referenciar os ativos do tema. A melhor maneira de incluí-los é usar a função get_asset_url, que retorna a URL pública de um ativo, arquivo ou modelo. Você pode gerar automaticamente essa função no aplicativo clicando com o botão direito do mouse em um arquivo e selecionando Copiar URL público, ou clicando em Ações e selecionando Copiar URL público. 

Por exemplo, uma folha de estilo referenciada por require_css deve ser formatada da seguinte forma:

Se o tema depender de jQuery, uma versão do jQuery deve ser incluída caso não esteja habilitado por padrão na conta do cliente. 

Por exemplo, se você incluir um módulo que exija jQuery em um site que não usa jQuery, precisará usar o seguinte código para carregá-lo:

Os temas devem oferecer suporte a versões em vários idiomas e devem especificar os idiomas disponíveis. Faça isso adicionando o módulo de alternador de idioma a um cabeçalho global, o que permitirá que os clientes localizem facilmente as opções de idioma e escolham seu idioma desejado.

• Você deve exibir apenas um idioma por vez. Por exemplo, evite exibir texto em inglês e espanhol na interface do usuário ao mesmo tempo.
• Evite usar texto embutido em código. Por exemplo, em vez de codificar o texto de um botão de listagem de blog como Leia mais, defina o texto de um campo para que usuário final possa atualizá-lo sem precisar entrar no código.