Ir para o conteúdo principal
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: Setembro 20, 2021

Disponível para

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

Os designers podem criar sites, landing pages e modelos de blog do zero usando HTML.  As contas do Marketing Hub Professional e Enterprise também podem criar modelos de e-mail codificados personalizados. Também é possível clonar um layout de modelo da HubSpot para HTML e personalizá-lo como um modelo codificado.

Este artigo inclui informações sobre como criar e solucionar problemas de modelos codificados personalizados, bem como qual HubL é necessário em seus modelos. Se você não está familiarizado a trabalhar com código, use um dos modelos prontos na sua conta da HubSpot ou confira o marketplace de modelos para comprar modelos predefinidos.

Observação: por padrão, um modelo codificado personalizado não é responsivo. 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.
  • Na barra lateral esquerda, crie um novo arquivo clicando em Arquivo > Novo arquivo. Talvez seja necessário clicar no folder ícone da pasta para expandir o localizador.
  • Na caixa de diálogo, clique no menu suspenso O que você gostaria de construir hoje? e selecione HTML e HUBL.
design-manager-html-hubl
  • Clique em Próximo.
  • Insira os detalhes do seu novo arquivo:
    • Escolhamodelooumodelo parcial. Um modelo parcial é aquele que pode ser usado em outros modelos. 
    • No menu suspenso, selecione o tipo de modelo que você está codificando (página, blog ou e-mail).
    • Dê um nome ao arquivo.
    • Para atualizar o local do arquivo, na seção Local do arquivo, clique em Alterar e selecione a pasta na qual deseja adicionar o 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
  • No canto superior direito, clique em Visualizar para visualizar como seu modelo será exibido e funcionará no editor de conteúdo. Esta visualização é sincronizada com o editor e atualizará automaticamente conforme você trabalha.
  • No canto superior direito, clique em Publicar alterações.
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.

Adicionar as tags de HubL obrigatórias

Você verá uma mensagem de erro se o código não tiver alguma das tags de HubL necessárias ao tentar publicar o arquivo.

O site, a landing page e os modelos de blog exigem as seguintes tags:

  • {{standard_footer_includes}}
  • {{standard_header_includes}}
Os modelos de e-mail exigem que as seguintes tags sejam compatíveis com CAN-SPAM. Elas podem ser adicionadas de duas maneiras:
  • Inclua este token que obtém a seção do CAN-SPAM de cancelamento: {{unsubscribe_section}}. Em seguida, adicione esses tokens individualmente: 
    • {{site_settings.company_street_address_1}}
    • {{site_settings.company_city}}
    • {{site_settings.company_state}}
    • {{site_settings.company_zip}}
    • Com esse método, você não poderá formatar o idioma e o estilo do texto e dos links.

  • Use esses tokens individualmente:
    • {{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 token individualmente permitirá a flexibilidade para adicionar palavras ao redor dos tokens e links, além de formatá-los no estilo e idioma desejado. 

Clonar para HTML

Além de criar um modelo do zero, você também pode clonar um dos modelos da HubSpot para HTML. Clonar um modelo para HTML dá acesso ao conteúdo HTML de um modelo. 

Para criar uma versão codificada de um modelo existente:

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
  • Clique em Ações > Clonar para HTML no localizador. O arquivo HTML será criado na mesma pasta que o arquivo original. Seu nome de arquivo corresponderá ao nome do modelo original com cópia anexado a ele.
design-manager-clone-to-html