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.

Noções básicas sobre 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.

Compreender 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

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. Na parte superior do localizador, clique no menu suspenso Arquivo e selecioneNovo arquivo.

3. Na caixa de diálogo, clique no menu suspenso O que deseja construir hoje? e selecione HTML + HubL.

4. No campo O que você está criando? , selecione uma opção:
   • 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. 
5. 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.
6. Digite um nome de arquivo no campo Nome do arquivo.
7. Para atualizar o local do arquivo, clique em Alterar na seção Local do arquivo e selecione uma pasta de gerenciamento.
8. Quando terminar, 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

1. Insira o HTML do modelo. Saiba mais sobre como adicionar arquivos de código personalizado 
2. Para exibir como o HTML + HubL será renderizado, ative a opção Mostrar saída no canto superior esquerdo. Um painel será aberto à direita com a visualização renderizada.

Adicionar HTML + HubL necessário

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

• Os modelos de página e blog exigem as seguintes variáveis:

<!-- Enter above the closing </header> tag -->
{{ standard_header_includes }}

<!-- Enter above the closing </body> tag -->
{{ standard_footer_includes }}

• Os modelos de e-mail exigem que as seguintes variáveis sejam compatíveis com CAN-SPAM:

<!-- Enter variables above the closing </body> tag -->
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}

<!-- Choose one unsubscribe variable -->
{{ unsubscribe_link }}
{{ unsubscribe_link_all }}

• Os modelos de e-mail exigem o seguinte código para exibir o texto de visualização em determinados clientes de e-mail:

<!-- Preview text (text which appears right after subject in certain email clients) -->

<div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}
</div>

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.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique no nome do modelo que deseja clonar.
3. 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 depois publicá-lo.

1. Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
2. No localizador, clique no nome do modelo que deseja visualizar ou publicar.
3. No canto superior direito, clique no menu suspenso Visualizar e selecione uma opção:
   • 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.
4. Quando terminar, clique em Publicar alterações.
5. 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 esquerda do editor de código e clique em Mostrar detalhes.