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.

Crie um modelo codificado personalizado

Ultima atualização: 7 de Março de 2025

Disponível com qualquer uma das seguintes assinaturas, salvo menção ao contrário:

Todos os produtos e planos

Os desenvolvedores podem criar modelos de blog, página do site, landing page e e-mail a partir do zero usando HTML + HubL. Você também pode clonar um layout de modelo de arrastar e soltar em HTML e, em seguida, customizar como um modelo codificado.

Saiba mais sobre como criar recursos personalizados em nossa documentação do desenvolvedor

Antes de começar

Antes de começar a trabalhar com esse recurso, certifique-se de compreender totalmente quais etapas devem ser executadas com antecedência, bem como as limitações do recurso e as possíveis consequências de usá-lo.

Compreenda os requisitos

Entenda as limitações e considerações

  • Uma assinatura do Marketing hub Professional ou Enterprise? é necessária para criar modelos de email. As contas do Content hub podem criar e-mails usando o editor de e-mail arrastar e soltar.
  • Modelos codificados personalizados podem usar muitas variáveis predefinidas. Algumas dessas variáveis são necessárias para criar e-mails e páginas, enquanto outras são opcionais. Saiba mais sobre como adicionar variáveis necessárias de email, site e HubL de landing page . 

Criar um novo arquivo HTML + HubL

  • Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
  • Na parte superior da coluna esquerda, clique no menu Arquivo e selecione Novo arquivo. 

design-manager-criar-novo-modelo-1

  • Na caixa de diálogo Novo arquivo, clique no menu suspenso O que você deseja construir hoje? e selecione HTML + HubL, depois clique em Avançar. 
gerenciador de design-new-html-hubl
  • Na caixa de diálogo Configurar o novo modelo HTML + HUBL , insira os detalhes do novo arquivo:
    • Selecione uma opção para O que você está criando?:
      • Modelo: define o layout e a estrutura do conteúdo que será exibido no página do site, nas páginas iniciais, nos posts do blog ou no e-mail. 
      • Modelo Parcial: é um código reutilizável ou um snippet de código que pode ser incluído em vários outros modelos. 
    • Clique no menu suspenso Tipo de modelo e selecione um tipo para o modelo codificado personalizado (página, post do blog/listagem, email ou página do sistema). Saiba mais sobre tipos de modelo.
    • No campo Nome do arquivo , digite um nome de arquivo.
    • Para atualizar o local do arquivo, clique em Alterar na seção Local do arquivo e selecione uma pasta de gerenciamento.
  • Clique em Criar.

design-manager-new-html-hubl-detalhes

Adicionar HTML + HubL ao seu modelo

Depois de configurar seu novo arquivo, você será direcionado ao editor de código para adicionar seu código personalizado e visualizar como ele aparecerá em uma página ao vivo.

Adicionar HTML + HubL

  • Insira o HTML do modelo. CSS Saiba mais sobre como adicionar arquivos ao modelo codificado personalizado 
  • Para exibir como seu HubL será renderizado, clique para alternar o Mostrar saída ligar. Um painel será aberto à direita com a visualização renderizada.

mostrar saída no gerenciador de design

Adicionar HubL necessário

Modelos codificados personalizados requerem variáveis HubL específicas para funcionar. Se alguma dessas variáveis obrigatórias estiver faltando, uma mensagem de erro aparecerá quando você tentar publicar o modelo. 

  • Os modelos de página e blog exigem as seguintes variáveis:
    • {{standard_footer_includes}}
    • {{standard_header_includes}}
  • Os modelos de e-mail exigem que as seguintes variáveis sejam compatíveis com CAN-SPAM
    • {{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}}

Clonar um modelo para HTML

Além de criar modelos do zero, você também pode clonar modelos de arrastar e soltar para blogs, página do site e páginas iniciais em HTML.

  • Para criar uma versão codificada de um modelo existente:
    • Na sua conta da HubSpot, acesse Conteúdo > Design Manager.
    • Na barra lateral esquerda, abra o modelo que deseja clonar.
    • Clique no menu suspenso Ações e selecione Clonar para HTML. O arquivo HTML será criado na mesma pasta que o arquivo original.

clonar para HTML

Visualizar e publicar seu modelo

Depois de criar o modelo, você pode visualizar como ele aparecerá em uma página ao vivo e, em seguida, publicá-lo.

  • No canto superior direito, clique em Visualizar.
  • Se você selecionar Visualização dinâmica com opções de exibição, poderá visualizar seu modelo como ele aparece em outros dispositivos selecionando a predefinição de Visor.
  • Se você selecionar Visualizar sem opções de exibição, só poderá visualizar como o modelo aparecerá nos navegadores.
  • Quando terminar de editar, clique em Publicar alterações no canto superior direito.
  • Se houver algum erro de código, uma mensagem de erro aparecerá. Revise mais informações sobre esses erros no console de erros abaixo do editor de código:
    • Na mensagem de erro na parte superior da página, clique em error console para abrir o console abaixo do editor de código. 
    • Como alternativa, navegue até a parte inferior do editor de código e clique em Mostrar detalhes

design-manager-publish-error

Esse artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot.