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.

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.

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

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

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.

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

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.

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.

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.

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, é 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 (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.