Ultima atualização: Março 22, 2021
Na sua ferramenta de gerenciamento de projetos, os designers podem criar modelos com HTML a partir do zero. Para contas Marketing Hub Professional e Enterprise, isso inclui modelos de e-mail codificados personalizados. Também é possível clonar um layout de modelo HubSpot para HTML e personalizá-lo como um modelo codificado.
Este artigo contém como criar e solucionar problemas de modelos codificados personalizados, bem como qual HubL é necessário em seus modelos. Se você não se sente à vontade para trabalhar com código, use um dos modelos prontos em sua conta da HubSpot ou confira o mercado de modelos para comprar modelos pré-fabricados.
Observação: um modelo codificado personalizado não será responsivo por padrão. Trabalhe com um designer profissional para garantir que seu modelo responda por diferentes tamanhos de tela.
Criar um novo arquivo HTML_e HUBL
- Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
- Crie um novo arquivo clicando em Arquivo > Novo arquivo. Talvez seja necessário clicar na ícone da pasta para expandir o localizador.
- Na caixa de diálogo, clique em HTML_e HUBL.
- Insira os detalhes do seu novo arquivo:
- Escolhamodelooumodelo parcial.
- Selecione o tipo de modelo que você está vendo (página, blog ou e-mail).
- Dê um nome ao arquivo.
- Clique em Criar.
- Escreva o HTML para sua página ou modelo de e-mail.
- Para visualizar como seu HubL será renderizado, clique para ativar o botão Mostrar saída. Um painel será aberto à direita com a visualização renderizada.
- Qualquer erro no seu código será sinalizado em uma mensagem de erro quando você tentar publicar alterações. O console de erros na parte inferior do editor de código exibirá os detalhes do erro ou do aviso, além de sugestões sobre como corrigir esses erros e avisos.
Para recursos adicionais em design personalizado, você pode consultar a documentação do HubSpot designer. Há documentação adicional nas opções de módulo codificados, como tags de filtro e ícones.
Quando terminar, clique em Publicar alteraçõespara publicar o arquivo ou o arquivo HTML.
Adicionar as tags de HubL obrigatórias
Após ter escrito seu HTML estrutural, você verá uma mensagem de erro se o seu código não tiver tags de HubL necessárias se você tentar publicar o arquivo. As tags do HubL conectam seu código às configurações e editor de conteúdo da HubSpot.
Para modelos de e-mail, será necessário incluir o e-mail obrigatório e os tokens CAN-SPAM. Esses tokens podem ser adicionados de duas maneiras:
1. Incluir um token que puxará na seção do CAN de cancelamento de assinatura: "{{unsubscribe_section}}". Quando esse token é usado, você não tem a capacidade de formatar o idioma e estilo do texto e links. Veja um exemplo de como seria "{{unsubscribe_section}}":
Você precisa adicionar os seguintes tokens individualmente:
{{site_settings.company_street_address_1}}
{{site_settings.company_city}}
{{site_settings.company_state}}
{{site_settings.company_zip}}
Usar o tokens individualmente permitirá a flexibilidade para adicionar palavras ao redor dos tokens e links e para formá-los no estilo desejado e lingua.
Clonar para HTML
Uma alternativa à codificação do zero é clonagem de modelos da HubSpot para HTML. Clonar um modelo para HTML dá acesso a um modelo HTML/HubL de um modelo é uma excelente maneira de reverter o engenheiro de um modelo do HubSpot que você tem construído.
Para criar uma versão codificada de um modelo existente:
- {{ local.navDesignManager }}
- Clique em Ações > Clonar para HTML no localizador. O arquivo HTML será aberto em uma nova guia do seu gerenciador de design. Seu nome de arquivo corresponderá ao nome do modelo original com cópia anexado a ele.
