> ## Documentation Index
> Fetch the complete documentation index at: https://br.developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Especificação da área de arrastar e soltar em um modelo de e-mail personalizado

> Saiba como especificar áreas de arrastar e soltar em um modelo de e-mail personalizado.

export const SupportedProducts = ({marketing, sales, service, cms, marketingLevel, salesLevel, serviceLevel, cmsLevel}) => {
  const translations = {
    header: "Produtos suportados",
    description: "Requer um dos seguintes produtos ou superior.",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub"
    },
    tiers: {
      free: "Grátis",
      starter: "Starter",
      professional: "Professional",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="Produtos suportados" defaultOpen="true" icon="cubes">
  <SupportedProducts marketing={true} marketingLevel="professional" cms={true} cmsLevel="professional" />
</Accordion>

[Áreas de arrastar e soltar](https://br.developers.hubspot.com/docs/guides/cms/content/templates/drag-and-drop/overview) 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.

<Warning>
  **Observação:** modelos de e-mail personalizados podem conter apenas uma área de arrastar e soltar.
</Warning>

<Steps>
  <Step title="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**.
  </Step>

  <Step title="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âmetro                                                                 | Descriçã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.
  </Step>

  <Step title="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:

    ```hubl theme={null}
    {% 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:

    ```hubl theme={null}
    {% 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 %}
    ```

    <Warning>
      A tag HubL `dnd_row` <u>não</u> é atualmente suportada em modelos de e-mail.
    </Warning>
  </Step>

  <Step title="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`.

    ```hubl theme={null}
    {% 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 %}
    ```
  </Step>

  <Step title="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:

    * [dnd\_area](/cms/reference/hubl/tags/dnd-areas#dnd-area)
    * [dnd\_section](/cms/reference/hubl/tags/dnd-areas#dnd-section)
    * [dnd\_column](/cms/reference/hubl/tags/dnd-areas#dnd-column)
    * [dnd\_module](/cms/reference/hubl/tags/dnd-areas#dnd-module)
  </Step>
</Steps>