Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.
Design Manager

Crie um modelo codificado personalizado

Ultima atualização: Agosto 25, 2020

Disponível para

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic (versão anterior)

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 folder para expandir o localizador.
  • Na caixa de diálogo, clique em HTML_e HUBL.
Editor de código
  • 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.

    design-manager-show-output-toggle
  • 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.

- console de erro

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

2. Inclua o link de cancelamento individual necessário e endereço toktos:
{{site_settings.company_name}}
{{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}}

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.
Captura de tela do artigo de Ajuda da HubSpot

New call-to-action

/pt/cos-general/build-a-custom-coded-template-in-hubspot