Produtos suportados
Requer um dos seguintes produtos ou superior.
Marketing HubMarketing HubProfessional
Content HubContent HubProfessional
Última modificação: 22 de agosto de 2025
Áreas de arrastar e soltar permitem que os desenvolvedores criem seções de modelos de e-mail personalizados que suportem alterações de layout, estilo e conteúdo diretamente no editor de e-mail. Isso permite que os desenvolvedores criem menos modelos de e-mail com estrutura global, que ofereçam suporte aos criadores de conteúdo, criando uma variedade de páginas com várias finalidades e layouts.
Observação: modelos de e-mail personalizados podem conter apenas uma área de arrastar e soltar.
1

Criação de um novo modelo HTML

Crie um novo modelo html que incluirá o código HubL e HTML que formará sua seção de arrastar e soltar:
  • Na sua conta HubSpot, acesse Conteúdo > Gerenciador de design.
  • Na barra lateral esquerda, crie um novo arquivo clicando em Arquivo > ** Novo arquivo**.
  • Na caixa de diálogo, clique no menu suspenso O que você gostaria de criar hoje? e selecione HTML e + HubL.
  • Clique em Próximo.
  • Clique no menu suspenso Tipo de modelo e selecione E-mail.
  • Insira um nome para o modelo.
  • Para atualizar o local do modelo, clique em Alterar em Local do arquivo e, em seguida, selecione uma nova pasta onde o modelo será criado.
  • Clique em Criar.
2

Adição de marcas HubL ao cabeçalho do modelo

Revise as seguintes marcas obrigatórias e opcionais que você pode incluir na seção <head> do seu modelo de e-mail para fins de estilo e compatibilidade:

​
Tag necessária

{{ dnd_area_stylesheet }}Esta tag:
  • Adiciona consultas de mídia associadas
  • Corrige problemas conhecidos de estilo no Outlook
  • Redefine margens e preenchimentos
  • Habilita o anti alias
  • Adiciona alguns CSS

​
Tags opcionais

Para garantir que seu modelo seja renderizado consistentemente em todos os principais clientes de e-mail, você também pode incluir as seguintes tags HubL opcionais no seu modelo:
  • {{ email_header_includes }}: essa tag injetará CSS no seu modelo para ajudar a renderizar o estilo de forma consistente, corrigir problemas comuns de estilo e adicionar metadados ao HTML do e-mail. Ao analisar esta tag HubL, o seguinte conteúdo será adicionado no <head> do HTML do e-mail:
ParâmetroDescrição
<meta name="x-apple-disable-message-reformatting">Impedir iOS 11 de e-mails de dimensionamento automático
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Informa aos navegadores e clientes de e-mail como você espera que eles interpretem caracteres diferentes.
<meta http-equiv="X-UA-Compatible" content="IE=edge">habilita CSS3 e media queries no Windows Phone 7.5, informa ao Internet Explorer para renderizar o conteúdo no modo mais avançado possível e permite que o navegador escolha qual versão do Internet Explorer deve ser usada para renderizar o e-mail.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>Define a área visível para a largura da tela do dispositivo, o que ajuda a tornar seu e-mail responsivo.
  • {{ reset_css_stylesheet }}: incluir essa tag corrigirá diversos problemas de estilo no Outlook e também redefinirá as margens e espaçamentos do seu e-mail.
  • {{ outlook_background_snippet }}: essa tag definirá a imagem ou cor de fundo no Outlook, desde que você tenha especificado uma regra CSS de fundo associada.
3

Criar uma área de arrastar e soltar

Depois de adicionar a {{ dnd_area_stylesheet }} tag HubL e quaisquer outras tags opcionais para o <head> do seu modelo, você pode configurar um dnd_area no corpo do modelo.

​
Criar uma área de arrastar e soltar vazia

Um dnd_area é o recipiente que torna uma parte da página da Web editável em termos de estrutura, design e conteúdo. O corpo de uma tag dnd_area fornece o conteúdo padrão para a área de arrastar e soltar.A área de arrastar e soltar pode ser colocada dentro de <div> ou <table>. Uma restrição da área de arrastar e soltar é que a largura mínima é definida como 624 pixels e esse valor não pode ser substituído.Essa tag, por si só, gerará uma área de drop zone para que os criadores de conteúdo arrastem módulos no editor de e-mail.O código a seguir especificaria uma área de arrastar e soltar vazia:
{% dnd_area "main" %}
	<!-- generates an empty drag and drop area drop-section -->
{% end_dnd_area %}

​
Criar uma área de arrastar e soltar com colunas vazias

Você também pode personalizar a área de arrastar e soltar para especificar seções e colunas padrão usando os campos dnd_section e dnd_column.Por exemplo, o seguinte código HubL especificaria uma área de arrastar e soltar com 3 colunas:
{% dnd_area "main" %}
  {% dnd_section padding={'top': 25, 'bottom': '20} %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
  {% end_dnd_section %}
{% end_dnd_area %}
A tag HubL dnd_row não é atualmente suportada em modelos de e-mail.
4

Adicionar uma área de arrastar e soltar com módulos

Para preencher previamente uma seção com conteúdo, você pode usar a tag dnd_module para incluir um módulo fazendo referência ao seu caminho. O módulo deve ser adicionado em uma seção e coluna para preencher previamente a área de arrastar e soltar com conteúdo.No exemplo abaixo, é feita referência a um módulo padrão da HubSpot, mas você também pode incluir módulos que criou, especificando seu caminho na árvore de arquivos de Ferramentas de design.Para especificar um valor padrão para dnd_module, você pode usar a tag module_attribute.
{% dnd_area "main", full_width=False %}
	{% dnd_section padding={
	            'top':'25',
	            'bottom':'20'
	            }, full_width=False %}
	  {% dnd_column width=6 %}
	    {% dnd_module path='@hubspot/image_email', img={
	                    'alt':'NavyLogo',
	                    'height':38,
	                    'src':'email_dnd_template_images/NavyLogo.png',
	                    'width':120
	                    }, alignment='center', hs_enable_module_padding=True, hs_wrapper_css={
	                    'padding-bottom':'10px',
	                    'padding-left':'20px',
	                    'padding-right':'20px',
	                    'padding-top':'10px'
	                    } %}
	    {% end_dnd_module %}
	  {% end_dnd_column %}
	  {% dnd_column width=6 %}
	  {% end_dnd_column %}
	{% end_dnd_section %}
{% end_dnd_area %}
5

Personalize e estilize ainda mais seu modelo de arrastar e soltar

Cada tag HubL de arrastar e soltar (por exemplo, dnd_area, dnd_section, dnd_column etc.) inclui parâmetros diferentes que você pode usar para fornecer estilo padrão e especificar outro comportamento, como o rótulo que aparecerá na barra lateral do editor de e-mail.Para saber mais sobre os parâmetros disponíveis para cada tag, confira os links abaixo para cada tag: