Visão geral dos modelos

Os modelos definem o layout das páginas, e-mails e temas do HubSpot. Um modelo consiste em módulos e partials, e pode fazer referência a outros ativos, tais como folhas de estilo e arquivos JavaScript. Os modelos podem ser criados usando a CLI da HubSpot ou no Gerenciador de design da HubSpot. Para os criadores de conteúdo, o modelo é a primeira coisa que será selecionada ao criar uma página ou e-mail.

Abaixo, aprenda como criar um modelo, os diferentes tipos de modelos e o que está incluído com os seus modelos.

Você pode criar um modelo no HubSpot ou usando a CLI.

• Para criar um modelo usando a CLI, execute o seguinte comando:

• Usando as setas do teclado, navegue até o tipo de modelo que você pretende criar e pressione enter.  

O modelo será criado localmente. Quando você quiser disponibilizar o modelo para utilização na sua conta da HubSpot, faça upload do modelo na sua conta. Você também pode usar o comando watch para carregar automaticamente todos os novos arquivos e edições de arquivos existentes no diretório de trabalho atual e em diretórios secundários.

Depois de atualizar um modelo, você pode visualizá-lo para garantir que ele se pareça e funcione conforme o esperado. No HubSpot, existem algumas maneiras de visualizar um modelo, como:

• Visualizar um modelo no gerenciador de design: ideal para verificações visuais rápidas ou quando você precisa visualizar um modelo de post de blog/lista/combinado.
• Criar um novo recurso a partir de um modelo: ideal para testar o editor de arrastar e soltar e a experiência de criação de conteúdo.

Visualizar com o gerenciador de design

Visualizar modelos usando o gerenciador de design pode ser especialmente útil para verificações visuais rápidas. O visualizador de modelos também permite configurar opções de exibição, como as dimensões da janela de visualização.

Para visualizar um modelo no gerenciador de design:

• Na sua conta da HubSpot, acesse Marketing > Arquivos e modelos > Ferramentas de design.
• Usando o explorador de arquivos na barra lateral esquerda, clique no modelo que deseja visualizar.
• No canto superior direito, clique em Visualizar. 
  • Selecione Visualização ao vivo com opções de exibição para visualizar o modelo com opções para testar a capacidade de resposta e as configurações de domínio, como as folhas de estilo. Esta opção exibe a página dentro de um iframe. Isso também permite selecionar entre blogs e a exibição de posts ou listagens de blog.
  • Selecione Visualizar sem opções de exibição para visualizar o modelo sem opções adicionais.

Visualizar com uma nova página

Ao alterar áreas de arrastar e soltar, valores de parâmetros padrão nos módulos ou fazer outras alterações significativas, é melhor criar uma página do site, blog, post de blog ou e-mail usando o modelo. Você pode experimentar diferentes valores de campos de módulo, testar a aparência do seu modelo no mundo real e otimizá-lo com a melhor experiência de criação de conteúdo. Você pode publicar esses ativos ou deixá-los no modo de rascunho para fins de teste.

Além disso, você pode usar a preparação de conteúdo ou uma conta de sandbox de desenvolvedor para criar e visualizar ativos sem afetar uma conta de produção.

Os modelos podem ser usados para diferentes tipos de conteúdo, tais como páginas de sites e posts de blog. Nos modelos codificados, você designa o tipo de modelo, adicionando uma anotação na parte superior do arquivo.

Abaixo, conheça os diferentes tipos de modelos e anotações que você pode usar para designar cada tipo.

Os modelos de página são o tipo de modelo mais aberto. Eles servem para qualquer tipo de página da web ou landing page. Os layouts de página não são preenchidos previamente com componentes. Os modelos de página codificados vêm preenchidos previamente com marcação esparsa, incluindo tags sugeridas do HubL para incluir as informações de metadescrição, título e cabeçalho/rodapé necessárias. Exemplos de páginas que normalmente utilizariam um modelo de página incluem, entre outros:

• Página inicial
• Sobre nós
• Contato

Os modelos de e-mail são utilizados pela ferramenta de e-mail. Eles têm o mais rigoroso conjunto de requisitos, pois precisam ser exibidos em muitos clientes de e-mail diferentes e estão em conformidade com as práticas recomendadas para garantir a entregabilidade adequada. Os modelos de e-mail de arrastar e soltar do HTML + HubL e do Gerenciador de design incluem componentes de base no momento da criação. Os modelos com este templateType só são visíveis para seleção ao criar um e-mail.

Para permanecer em conformidade com o CAN-SPAM, os modelos de e-mail têm um conjunto de variáveis obrigatórias que devem ser incluídas.

Os modelos de e-mail também têm uma funcionalidade integrada para o CSS inline adicionado aos elementos <style> com um nome de classe especial ou atributo de dados. O CSS inline em e-mails é um método utilizado para obter maior suporte por meio de clientes de e-mail. Felizmente, a maioria dos clientes de e-mail populares agora oferece suporte a CSS incorporado, mas isso pode não ser representativo de seus destinatários específicos. Use o bom senso, fazendo o que é certo para seus destinatários.

Saiba mais sobre como criar modelos de e-mail.

Os partials são arquivos de modelo que podem ser incluídos em outros arquivos codificados. Ao contrário dos partials globais, os partials podem ser editados individualmente sem afetar outras instâncias do partial. 

Saiba mais sobre partials.

Saiba mais sobre partials globais e conteúdo global.

Ao criar um blog, os modelos de blog têm uma estrutura semelhante à dos modelos de página padrão. A diferença essencial é que eles podem ser selecionados nas configurações de conteúdo como modelos de blog, enquanto que os modelos de página não podem. Os modelos criados com blog_listing, blog_post ou blog, templateType não são exibidos quando um usuário está criando uma página web na tela de seleção de modelos. Os modelos de blog têm duas formas: as páginas de listagem de blog e as páginas de detalhes dos posts de blog. 

O modelo de listagem do blog é o modelo que os usuários verão ao navegar para a URL do blog. Normalmente este modelo é usado para listar resumos, títulos e imagens em destaque de todos os posts do blog. Além disso, normalmente inclui paginação para navegar para os posts mais antigos.

O modelo de post de blog é o modelo que os usuários verão ao exibir um post individual no blog. Estes modelos normalmente mostram o conteúdo completo do post.

Um único modelo de blog pode controlar o layout tanto das páginas de listagem como das de detalhes, mas estas costumam usar modelos separados. Modelos combinados serão mostrados nas configurações do blog como selecionáveis tanto para a listagem como para as opções de post de blog. Se você está criando um modelo que pretende ser usado apenas para posts, ou listagens, deve usar blog_post, ou blog_listing.

Os modelos de página do sistema são sinalizados internamente para o seu propósito específico. Nas configurações de conteúdo da conta, você pode selecionar esses modelos para os propósitos especificados na aba do sistema.

As páginas de erro podem ser definidas nas Configurações de conteúdo como páginas 404 ou 500. Ambos os modelos utilizam o mesmo templateType. Os modelos criados com este templateType não são exibidos quando um usuário está criando uma página web na tela de seleção de modelos.

A página de preferências da assinatura de e-mail. Lista todos os tipos de assinatura disponíveis que um usuário pode optar por assinar ou cancelar. É obrigatório conter a tag {% email_subscriptions "email_subscriptions"  %} do HubL. Consulte o modelo de preferências de assinatura em cms-theme-boilerplate.

Um modelo do sistema para páginas de cancelamento de assinatura de e-mail. É obrigatório conter a tag {% email_simple_subscription "email_simple_subscription" %} do HubL. Consulte o modelo de preferências de cancelamento de assinatura em cms-theme-boilerplate.

Um modelo do sistema para páginas de confirmação de cancelamento de assinatura de e-mail. Os usuários são encaminhados para cá quando acessam a URL gerada pela variável {{ unsubscribe_link_all }}.  Consulte o modelo de confirmação de assinatura em cms-theme-boilerplate.

Os modelos de solicitação de senha fornecem uma página de conteúdo com marca que os criadores de conteúdo podem exibir para exigir uma senha para que um visitante possa ver o conteúdo real da página. Os modelos de solicitação de senha são definidos por meio das Configurações de conteúdo. Como proteger uma página no HubSpot com senha. Consulte a solicitação de página protegida por senha no boilerplate.

Um modelo do sistema para a funcionalidade integrada de listagem de sites do CMS. Consulte o modelo da página de resultados da pesquisa no boilerplate.

As contas da HubSpot com a funcionalidade de associação (somente CMS Hub Enterprise) podem criar páginas em seus sites que apenas usuários que não constam em listas específicas no CRM podem acessar. Isso permite que os visitantes do site tenham contas com credenciais de login. Estes modelos permitem controlar a aparência dessas páginas.

Esta é a página de login que é exibida quando um usuário tenta acessar um conteúdo com acesso controlado por meio da funcionalidade de associação. Normalmente contém o módulo {% member_login "member_login" %}. Consulte o exemplo de modelo de login de membro no boilerplate.

Esta é a página de inscrição que permite aos usuários criar uma conta para visualizar o conteúdo que somente as pessoas desta lista podem acessar. Normalmente contém a tag {% member_register "member_register" %} do HubL. Consulte o exemplo de modelo de inscrição de membro no boilerplate.

Esta é a página de redefinição de senha. Os usuários fornecem uma nova senha nesta página. Normalmente contém a tag {% password_reset "password_reset" %} do HubL. Consulte o exemplo de modelo de redefinição de senha de um membro no boilerplate.

Esta é a solicitação de uma página de redefinição de senha. Exibição de um formulário solicitando um e-mail para redefinir a senha. Normalmente contém a tag {% password_reset_request "password_reset_request" %} do HubL. Consulte o exemplo de modelo de solicitação de redefinição de senha de um membro no boilerplate.

Existem certos arquivos JavaScript e CSS que são anexados aos modelos do CMS. Alguns arquivos são incluídos automaticamente e não podem ser removidos, enquanto outros podem ser incluídos opcionalmente. Para saber mais sobre a ordem em que as folhas de estilo são anexadas ao conteúdo do CMS, confira este artigo.

O jQuery está incluído opcionalmente na tag head dos modelos do HubSpot. Se incluído, é renderizado como parte da variável standard_header_includes do HubL.

Em Configurações > Site > Páginas, você pode alterar o jQuery para a versão 1.11.x ou 1.7.1,ou desabilitá-lo completamente. Você também pode optar por incluir um script de migração jQuery para permitir compatibilidade retroativa com navegadores mais antigos. Você pode mover o jQuery para o rodapé para melhorar o desempenho da página, mas isso pode quebrar o JavaScript que depende dele. É recomendável testar antes de movê-lo, adicionando ?hsMoveJQueryToFooter=True ao final dos URLs de página do site.

Embora o jQuery tenha sido historicamente incluído por padrão, atualmente o CMS Hub não requer jQuery. A maior parte da funcionalidade do jQuery agora tem equivalentes modernos do vanilla javascript, e é recomendável usá-los em vez disso. Se precisar usar jQuery, incentivamos você a desativar a versão padrão nas configurações e usar a última versão carregada acima da tag </body>.

Para testar se a remoção do jQuery no seu site prejudicará alguma coisa, adicione ?hsNoJQuery=true ao final do URL ao visualizar seu site, especialmente páginas com bastante interatividade.

Anteriormente conhecido como required_base.css, este arquivo é responsável por estilizar a grade responsiva do HubSpot. Este arquivo é incluído automaticamente em qualquer modelo de arrastar e soltar, mas não é incluído por padrão em modelos codificados personalizados. Ao usar tags dnd_area em modelos HTML + HubL codificados, não é necessário carregar o arquivo layout.css, mas uma versão dele estará incluída no boilerplate do CMS para facilitar a sua instalação e execução.

Além do CSS com grid responsivo, o arquivo inclui algumas classes que podem ser usadas para exibir e ocultar elementos em diferentes viewports. Para saber mais, veja o arquivo diretamente.

• Áreas de arrastar e soltar
• Modelos de seção
• Como usar componentes da Web em modelos e módulos
• Crie rodapés, cabeçalhos e muito mais usando conteúdo global