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: Abril 21, 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 pasta do ícone da 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.

Em seguida, escreva o HTML para sua página ou modelo de e-mail. O editor de código da HubSpot, destaca seu HTML sincronizado e fecha suas tags para você. 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 de erro ou 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. Saiba sobre as variáveis de modelo obrigatórias e tags do módulo HubL.

Para modelos de e-mail, inclua o e-mail obrigatório eo tokens do CAN-SPAM. Confira a documentação do HubL para saber mais sobre o tokens do CAN-SPAM.

Os tokens de can necessários podem ser incluídos 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. Aqui está um exemplo do que "{{unsubscribe_section}}" pareceria assim:

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
/pt/cos-general/build-a-custom-coded-template-in-hubspot