Crie um modelo codificado personalizado

Os desenvolvedores podem criar modelos de blog, página do site, landing page e e-mail a partir do zero usando HTML + HubL. Você também pode clonar um layout de modelo de arrastar e soltar em HTML e, em seguida, customizar como um modelo codificado.

Saiba mais sobre como criar recursos personalizados em nossa documentação do desenvolvedor. 

Antes de começar

Antes de começar a trabalhar com esse recurso, certifique-se de compreender totalmente quais etapas devem ser executadas com antecedência, bem como as limitações do recurso e as possíveis consequências de usá-lo.

Compreenda os requisitos

• Verifique se você tem as permissões de Ferramentas de design para criar e editar modelos no gerenciador de design.
• Recomenda-se também ter configurações de conteúdo e tema globais e configurações do site permissões se você precisar editar recursos da Web globais e configurações de blog/site.

Entenda as limitações e considerações

• Uma assinatura do Marketing hub Professional ou Enterprise? é necessária para criar modelos de email. As contas do Content hub podem criar e-mails usando o editor de e-mail arrastar e soltar.
• Modelos codificados personalizados podem usar muitas variáveis predefinidas. Algumas dessas variáveis são necessárias para criar e-mails e páginas, enquanto outras são opcionais. Saiba mais sobre como adicionar variáveis necessárias de email, site e HubL de landing page . 

Criar um novo arquivo HTML + HubL

• Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
• Na parte superior da coluna esquerda, clique no menu Arquivo e selecione Novo arquivo. 

• Na caixa de diálogo Novo arquivo, clique no menu suspenso O que você deseja construir hoje? e selecione HTML + HubL, depois clique em Avançar. 

• Na caixa de diálogo Configurar o novo modelo HTML + HUBL , insira os detalhes do novo arquivo:
  • Selecione uma opção para O que você está criando?:
    • Modelo: define o layout e a estrutura do conteúdo que será exibido no página do site, nas páginas iniciais, nos posts do blog ou no e-mail. 
    • Modelo Parcial: é um código reutilizável ou um snippet de código que pode ser incluído em vários outros modelos. 
  • Clique no menu suspenso Tipo de modelo e selecione um tipo para o modelo codificado personalizado (página, post do blog/listagem, email ou página do sistema). Saiba mais sobre tipos de modelo.
  • No campo Nome do arquivo , digite um nome de arquivo.
  • Para atualizar o local do arquivo, clique em Alterar na seção Local do arquivo e selecione uma pasta de gerenciamento.
• Clique em Criar.

Adicionar HTML + HubL ao seu modelo

Depois de configurar seu novo arquivo, você será direcionado ao editor de código para adicionar seu código personalizado e visualizar como ele aparecerá em uma página ao vivo.

Adicionar HTML + HubL

• Insira o HTML do modelo. CSS Saiba mais sobre como adicionar arquivos ao modelo codificado personalizado 
• Para exibir como seu HubL será renderizado, clique para alternar o Mostrar saída ligar. Um painel será aberto à direita com a visualização renderizada.

Adicionar HubL necessário

Modelos codificados personalizados requerem variáveis HubL específicas para funcionar. Se alguma dessas variáveis obrigatórias estiver faltando, uma mensagem de erro aparecerá quando você tentar publicar o modelo. 

• Os modelos de página e blog exigem as seguintes variáveis:
  • {{standard_footer_includes}}
  • {{standard_header_includes}}
• Os modelos de e-mail exigem que as seguintes variáveis sejam compatíveis com CAN-SPAM. 
  • {{unsubscribe_link}} ou {{unsubscribe_link_all}} (inclua pelo menos um)
  • {{unsubscribe_anchor}}
  • {{site_settings.company_name}}
  • {{site_settings.company_street_address_1}}
  • {{site_settings.company_city}}{{site_settings.company_state}}
  • {{site_settings.company_zip}}

Clonar um modelo para HTML

Além de criar modelos do zero, você também pode clonar modelos de arrastar e soltar para blogs, página do site e páginas iniciais em HTML.

• Para criar uma versão codificada de um modelo existente:
  • Na sua conta da HubSpot, acesse Conteúdo > Design Manager.

• • Na barra lateral esquerda, abra o modelo que deseja clonar.
  • Clique no menu suspenso Ações e selecione Clonar para HTML. O arquivo HTML será criado na mesma pasta que o arquivo original.

Visualizar e publicar seu modelo

Depois de criar o modelo, você pode visualizar como ele aparecerá em uma página ao vivo e, em seguida, publicá-lo.

• No canto superior direito, clique em Visualizar.
• Se você selecionar Visualização dinâmica com opções de exibição, poderá visualizar seu modelo como ele aparece em outros dispositivos selecionando a predefinição de Visor.
• Se você selecionar Visualizar sem opções de exibição, só poderá visualizar como o modelo aparecerá nos navegadores.
• Quando terminar de editar, clique em Publicar alterações no canto superior direito.

• Se houver algum erro de código, uma mensagem de erro aparecerá. Revise mais informações sobre esses erros no console de erros abaixo do editor de código:
  • Na mensagem de erro na parte superior da página, clique em error console para abrir o console abaixo do editor de código. 
  • Como alternativa, navegue até a parte inferior do editor de código e clique em Mostrar detalhes.