Visão geral dos modelos

Last updated:

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.

Crie um modelo

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

  • Para criar um modelo usando a CLI, execute o seguinte comando:
hs create template <name> [dest]
hs create template parameters
ParameterDescription
name

O nome do modelo

dest

O caminho do diretório local no qual você deseja criar o modelo. Se não estiver incluído, o modelo será criado no diretório atual.

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

Tipos de modelo

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.

Observação: um criador de conteúdo pode trocar o modelo de uma página por outro do mesmo tipo, dependendo se tem tags dnd_area.

  • Os modelos criados com o editor visual de layout de arrastar e soltar podem ser trocados por outros modelos de arrastar e soltar ou codificados com ou sem as tags dnd_area.
  • Os modelos codificados com tags dnd_area somente podem ser trocados por outros modelos codificados com tags dnd_area.
  • Os modelos codificados sem tags dnd_area somente podem ser trocados por outros modelos codificados sem tags dnd_area.

Blog

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. 

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

templateType: blog_listing

Post de blog

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.

templateType: blog_post

Post de blog e modelo de listagem combinados

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.

templateType: blog

Para uma experiência mais simples de desenvolvimento e criação de conteúdo, é recomendável usar o blog_post separado, e blog_listing templateTypes em vez de modelos combinados.

E-mail

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.

templateType: email

Página

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:

templateType: page

Páginas do sistema

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

Páginas de erro

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.

templateType: error_page

Preferências de assinatura de e-mail

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.

templateType: email_subscription_preferences_page

Cancelar assinatura de backup de e-mail

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.

templateType: email_backup_unsubscribe_page

Confirmação de cancelamento da assinatura de e-mail

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.

templateType: email_subscriptions_confirmation_page

Solicitação de senha

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.

templateType: password_prompt_page

Página de resultados de pesquisa

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.

templateType: search_results_page

Associação

As contas da HubSpot com a funcionalidade de associação (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.

Apenas modelos HTML + HubL podem ser modelos de associação.

Login de membro

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. Geralmente contém o módulo {% member_login "member_login" %}. Consulte o exemplo de modelo de login de membro no boilerplate.

templateType: membership_login_page

Registro de membro

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. Geralmente contém a tag {% member_register "member_register" %} do HubL. Consulte o exemplo de modelo de inscrição de membro no boilerplate.

templateType: membership_register_page

Redefinição de senha de um membro

Esta é a página de redefinição de senha. Os usuários fornecem uma nova senha nesta página. Geralmente 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.

templateType: membership_reset_page

Solicitação de redefinição de associação

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

templateType: membership_reset_request_page

Visualizar um modelo

Você sempre deve verificar seu trabalho após atualizar os modelos para garantir que eles tenham a aparência e funcionem como o esperado. O Gerenciador de design do HubSpot fornece uma ferramenta para visualizar módulos e modelos. Para visualizar um modelo, abra o modelo no gerenciador de design e, na barra superior, clique em "Visualizar".

Visualização do Gerenciador de design com menu suspenso de opções de exibição

Para a maioria dos modelos, a visualização mostrará o estado padrão do modelo — o mesmo estado que você veria se criasse uma página do site a partir do modelo, mas não o editasse. Existem dois modos de visualização: "Visualização dinâmica com opções de exibição" e "Visualização dinâmica sem opções de exibição". 

A visualização dinâmica com opções de exibição mostra a página dentro de um iframe, o que oferece algumas ferramentas que podem ser usadas para testar a capacidade de resposta e ver como as folhas de estilo de domínio afetam o seu modelo.

Visualização dinâmica com opções de exibição

Os modelos de blog são únicos porque você precisa de uma listagem de blog e posts de blog para saber se o modelo está funcionando. A visualização do blog permite selecionar um blog existente para preencher a visualização com conteúdo. A partir daí, você pode exibir a página de listagem ou de detalhes para o modelo desse blog.

Visualização dinâmica com opções de exibição para blogs

A visualização dos modelos usando apenas o pré-visualizador pode ser útil ao fazer pequenos ajustes visuais. 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 usar a preparação de conteúdo, um rascunho de visualização ou a sua conta de ambiente de testes de desenvolvedor para exibir a página sem se preocupar que ela seja vista por outras pessoas.

Arquivos CMS incluídos

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.

jQuery

O jQuery está incluído opcionalmente na tag head dos modelos do HubSpot. Se incluído, é entregue 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á-la 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é, a fim de melhorar o desempenho da página. Mover o jQuery pode quebrar o javascript que depende dele. Para testar o seu site, adicione ?hsMoveJQueryToFooter=True ao final da URL ao visualizar as páginas mais importantes do site, a fim de garantir que nada esteja prejudicado.

jQuery é tradicionalmente incluído por padrão porque, antes, a funcionalidade do HubSpot o exigia. O CMS Hub não exige jQuery. A maior parte das funcionalidades do jQuery tem equivalentes modernos de vanilla javascript, e nós encorajamos a sua utilização. 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 da URL ao visualizar várias páginas do site, especialmente aquelas com bastante interatividade.

layout.css

Layout.css (anteriormente conhecido como required_base.css) é o arquivo responsável pelo estilo do grid responsivo do HubSpot. Este arquivo é sempre incluído automaticamente em qualquer modelo de arrastar e soltar. Não está incluído por padrão nos modelos codificados personalizados. Para desenvolvedores que utilizam tags dnd_area em modelos HTML + HubL, não é necessário carregar o arquivo layout.css, mas uma versão dele estará incluída no boilerplate de tema 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. Você pode ver o arquivo aqui.

Código de rastreamento da HubSpot

O código de rastreamento da HubSpot é sempre adicionado automaticamente a qualquer modelo HubSpot (com exceção dos modelos de e-mail). É incluído com a variável standard_footer_includes do HubL. O código de rastreamento carrega um arquivo de análise JavaScript chamado your_HubID.js (exemplo: 158015.js). Este código de rastreamento está diretamente integrado à funcionalidade de GDPR da HubSpot.


Esse artigo foi útil?
Este formulário é para comentários sobre nossos documentos de desenvolvimento. Se tiver comentários sobre o produto da HubSpot, em vez disso compartilhe sua opinião no Fórum de Ideias.