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.
CMS-General

Crie um modelo codificado personalizado

Ultima atualização: Setembro 17, 2019

Disponível para

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

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