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.  

Se você está apenas começando sua jornada de criação de temas, recomendamos usar nosso boilerplate gratuito de temas do CMS, que pode ser baixado em nosso Repositório Git ou importado na interface do gerenciador de design da sua conta.

Além disso, revise os requisitos da página de listagem ao enviar seu modelo para o 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, a funcionalidade de CTAs nem vídeo nativo do HubSpot. 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

• Todos os temas enviados devem ser distintos e originais. Por exemplo, o mesmo tema com conteúdo de texto ou espaços reservados diferentes não conta como um tema distinto. Saiba mais sobre a conformidade com o Marketplace de modelos da HubSpot. 
• Um tema deve ser criado com modelos HTML + HubL e tags dnd_area.
• Os temas devem respeitar uma grade de 12 colunas. 

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. 

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 e get_asset_url deve ser formatada da seguinte forma:

No vídeo abaixo, analise as diferenças na estrutura de arquivos na sua conta de desenvolvedor em relação aos arquivos entregues a um cliente do marketplace:

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.

• Os arquivos do tema devem poder ser minificados.
• 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).

Você deve usar seu próprio nome de domínio ao criar URLs de visualização. 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.

O jQuery não está habilitado por padrão na conta da HubSpot de um cliente. Se o seu tema depende de jQuery, uma versão do jQuery deve ser incluída para garantir que o tema funcione conforme o esperado. 

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:

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

Verifique o seu arquivo theme.json e certifique-se do seguinte:

• O nome do rótulo corresponde ao nome na sua listagem de temas.
• Se você usar o boilerplace de tema gratuito do CMS da HubSpot, os valores do boilerplate não devem estar presentes. Inclui informações do autor, URL da documentação, URL de exemplo etc.
• O URL da documentação apresenta a documentação sobre como usar o seu tema.
• O caminho de visualização é um arquivo válido no seu tema.
• O caminho da captura de tela é um arquivo válido e está relacionado ao seu tema.
• O URL de exemplo leva a uma demonstração do seu tema. Não use subdomínios preview.hs-sites.com ou [AccountID].hs-sites.com no URL de exemplo. 

Saiba mais sobre os parâmetros 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 compatibilidade 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 esses parâmetros fields.json e veja um exemplo de arquivo fields.json no boilerplate do HubSpot CMS. 

As configurações do tema também devem:

• Não 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 em sua folha de estilo CSS, pois isso dificulta a substituição pelos usuários finais e pode causar um conflito.
• Usar rótulos descritivos para cada configuração, para que os criadores de conteúdo saibam o que estão atualizando. 
• 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 de tema devem ser aplicadas a todas as tags h1 no tema. 

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

• Campos de fonte do corpo (tags p)
• Campos de fonte h1 a h6
• Cor do hiperlink (tags a), incluindo estilo ao passar o mouse 

• Plano de fundo do título do formulário
• Texto do título do formulário, 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 - inclui configurações para texto do botão, cor de fundo e estilo ao passar o mouse. 

Além disso:

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

Como as cores da marca afetam a estética do seu tema

• Você deve usar seções sempre que aplicável. Deve haver um mínimo de cinco seções em um tema. 
• As seções devem ter capturas de tela únicas e funcionais.
• Seções e módulos não devem ser redundantes.

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.

• Se você tiver modelos com nomes semelhantes, adicione palavras descritivas que denotem a diferença entre eles.
• Use letras maiúsculas e minúsculas de forma consistente, remova hifens e evite usar formas abreviadas (por exemplo, escreva background em vez de usar bg). 
• O nome da sua empresa ou do tema não precisa ser incluído no nome do modelo. 

Saiba mais sobre os requisitos para módulos de temas e módulos individuais aqui. 

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. Saiba como criar parciais globais.

• Os temas devem incluir parciais globais.
• As parciais globais devem incluir áreas de arrastar e soltar usáveis. Por exemplo, você não pode ocultar a área de arrastar e soltar com uma classe "hide".
• Você deve incorporar áreas utilizáveis de arrastar e soltar em cabeçalhos e rodapés.
• 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.

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.

Os temas devem ser capazes de adaptar o conteúdo ao dispositivo em que são visualizados. Também devem proporcionar uma boa experiência ao usuário em vários dispositivos. Isso inclui, mas não está limitado a:

• Navegação principal
• Controles deslizantes e guias
• Imagens grandes
• Evitar rolagem horizontal (a menos que seja intencional)