> ## 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.

# Criar uma área de arrastar e soltar

> Use áreas de arrastar e soltar para permitir que os criadores de conteúdo façam alterações de layout, estilo e conteúdo com facilidade

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) são seções de um modelo que funcionam como contêineres vazios que podem ser modificados diretamente no editor de páginas. Ao criar áreas de arrastar e soltar em um modelo, ele permite que os criadores de conteúdo adicionem e gerenciem módulos no editor de páginas conforme necessário, em vez de depender de módulos estáticos incorporados ao modelo.

<Frame>
  <img src="https://newinboundblog.hubspot.com/hubfs/a%20new%20approach.gif" alt="Animação dos módulos arrastados para uma página, com colunas e linhas sendo ajustadas" />
</Frame>

Além de usar áreas de arrastar e soltar como zonas de soltar vazias para criadores de conteúdo, você também pode preencher previamente áreas de arrastar e soltar com vários módulos, layouts e conteúdo para servirem como ponto de partida.

Este tutorial o guiará pela configuração de uma área de arrastar e soltar simples. Para obter mais recursos de desenvolvedor sobre áreas de arrastar e soltar, consulte [o boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html) de práticas recomendadas sobre a implementação, bem como a [documentação de referência de tags do HubL para áreas de arrastar e soltar](/cms/reference/hubl/tags/dnd-areas).

<Warning>
  **Observação:** um criador de conteúdo pode trocar o modelo de uma página por outro do mesmo tipo, dependendo se tem tags [dnd\_area](/cms/reference/hubl/tags/dnd-areas).

  * Os modelos de arrastar e soltar criados com o editor visual de layout podem ser trocados por outros modelos de arrastar e soltar ou codificados com ou sem as tags *dnd\_area*.
  * Os modelos codificados com tags *dnd\_area* somente podem ser trocados por outros modelos codificados com tags *dnd\_area*.
  * Os modelos codificados sem tags *dnd\_area* somente podem ser trocados por outros modelos codificados sem tags *dnd\_area*.

  Quando o modelo da página é trocado, qualquer conteúdo existente adicionado às áreas de arrastar e soltar do primeiro modelo será mantido.
</Warning>

<Steps>
  <Step title="Criar um novo modelo HTML">
    Crie um novo modelo html para hospedar o HubL e o HTML que formarão sua seção de arrastar e soltar.

    <Info>
      As áreas de arrastar e soltar se baseiam em uma grade de 12 colunas responsivas. As tags de arrastar e soltar renderizam marcações com nomes de classe designando as colunas e as linhas. Você é responsável por adicionar uma folha de estilos para identificar esses nomes de classe. Um exemplo de estilos de layout que você pode implementar pode ser encontrado no [HubSpot CMS Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css). Sua folha de estilos pode ser adicionada ao modelo usando [`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css).
    </Info>
  </Step>

  <Step title="Criar uma área de arrastar e soltar">
    Uma `dnd_area` é um container que torna uma parte da página 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.

    Essa tag por si só gerará uma zona onde os criadores de conteúdo poderão arrastar módulos ao criar conteúdo.

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
    	<!-- generates an empty drag and drop area drop-section -->
    {% end_dnd_area %}
    ```
  </Step>

  <Step title="Criar uma seção com um módulo">
    A `dnd_section` é uma linha de nível superior e só pode ser um filho direto de um `dnd_area`. As seções oferecem suporte a uma variedade de parâmetros que controlam os valores padrão dos controles de estilo que os criadores de conteúdo têm para as seções dentro do conteúdo.

    Como exemplo, o código abaixo cria uma seção com uma imagem de fundo (`background_image`). Esta seção é centralizada por um `vertical-alignment` parâmetro e tem uma largura máxima de `1000px` campo para conteúdo filho. Para obter uma lista completa dos parâmetros suportados nas tags de arrastar e soltar do HubL, consulte a [documentação de referência de tags do HubL da área arrastar e soltar](/cms/reference/hubl/tags/dnd-areas).

    Para preencher previamente a seção com conteúdo, o código também inclui uma tag `dnd_module` para incluir um módulo referenciando seu caminho. Para este exemplo, `dnd_module` está puxando o módulo de texto avançado padrão da HubSpot, conforme definido pelo parâmetro `path`. Um valor padrão para o módulo de texto avançado é especificado usando a marcação `module_attribute`.

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
        {% dnd_section
            background_image = {
                'backgroundPosition': 'MIDDLE_CENTER',
                'backgroundSize': 'cover',
                'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
              },
              max_width=1000,
              vertical_alignment='MIDDLE'
        %}
            {% dnd_module path='@hubspot/rich_text' %}
                {% module_attribute "html"%}
                    This is your main headline.
                    Use this space to tell everyone about what you have to offer.
                {% end_module_attribute %}
            {% end_dnd_module %}
        {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    Isso resulta na área de arrastar e soltar contendo um módulo que os criadores de conteúdo podem editar no editor de conteúdo. Observe como a configuração de `max_width` em `dnd_section` está afetando o conteúdo.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_rich_text.png" alt="captura de tela do editor de página com a barra de ferramentas do módulo sendo exibida" />
    </Frame>
  </Step>

  <Step title="Incluir vários módulos">
    Para incluir mais de um módulo, use várias tags `dnd_module`. Ao definir os parêmetros `offset` e `width`, que são baseados em uma grade de 12 colunas, você pode colocar um módulo de imagem ao lado do módulo de rich text, conforme mostrado abaixo.

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
        {% dnd_section
            background_image={
                'backgroundPosition': 'MIDDLE_CENTER',
                'backgroundSize': 'cover',
                'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
            },
            max_width=1000,
            vertical_alignment='MIDDLE'
        %}
            {% dnd_module path='@hubspot/rich_text', width=8, offset=0, label="Rich Text" %}
                {% module_attribute "html"%}
                	<h1>This is your main headline.</h1>

    Use this space to tell everyone about what you have to offer.
                {% end_module_attribute %}
            {% end_dnd_module %}
            {% dnd_module path='@hubspot/linked_image',
              width=4,
              offset=8,
              img={
                "src": "https://www.dragndrop.com/placeholder-image.jpg",
                "alt": "Stock placeholder image"
              }
            %}
            {% end_dnd_module %}
        {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    Agora a página tem um módulo de imagem editável, bem como uma alça de arrasto, permitindo que os criadores de conteúdo alterem a largura e o deslocamento dos módulos. Observe como a configuração de `vertical_alignment` em `dnd_section` está centralizando verticalmente nosso conteúdo.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_rich_image.png" alt="captura de tela do editor de página mostrando um módulo de imagem adicionado a uma seção" />
    </Frame>
  </Step>

  <Step title="Incorporar colunas e linhas">
    Para tornar a área de arrastar e soltar mais complexa, você pode incorporar linhas e colunas usando tags `dnd_row` e `dnd_column`. Linhas e colunas funcionam de forma semelhante às seções no editor de conteúdo, onde os criadores de conteúdo podem arrastá-las, além de cloná-las, excluí-las e estilizá-las.

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
      {% dnd_section
        background_image={
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
        },
        max_width=1000,
        vertical_alignment='MIDDLE'
      %}
        {% dnd_module path='@hubspot/linked_image',
          width=6,
          img={
            "src": "https://www.dragndrop.com/placeholder-image.jpg",
            "alt": "Stock placeholder image"
          }
        %}
        {% end_dnd_module %}
        {% dnd_column width=6, offset=6 %}
          {% dnd_row
            padding={
                'bottom': 15
            }
          %}
            {% dnd_module path='@hubspot/rich_text' %}
              {% module_attribute "html"%}
                  <h1>This is your main headline.</h1>

    Use this space to tell everyone about what you have to offer.
              {% end_module_attribute %}
            {% end_dnd_module %}
          {% end_dnd_row %}
          {% dnd_row %}
            {% dnd_module path='@hubspot/form' %}
            {% end_dnd_module %}
          {% end_dnd_row %}
        {% end_dnd_column %}
      {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    Agora, criadores de conteúdo terão mais controle sobre o estilo e o layout de linhas e colunas específicas, bem como de módulos e seções.

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_area_full.png" alt="captura de tela do editor de páginas mostrando uma linha com duas colunas, um módulo de imagem à esquerda, um módulo de rich text e um módulo de formulário à direita." />
    </Frame>
  </Step>

  <Step title="Definir estilos de componente genéricos de arrastar e soltar">
    Os vários componentes de áreas de arrastar e soltar, seções, colunas, linhas e módulos têm classes que podem ser estilizadas usando CSS. Os estilos e opções editáveis desses componentes podem ser definidos usando CSS em vez de HubL. Por exemplo, o preenchimento padrão pode ser definido em `dnd_sections` com o CSS:

    ```css theme={null}
    .dnd-section {
      padding: 80px 20px;
    }
    ```

    Os seletores CSS genéricos dos componentes da área de arrastar e soltar são `.dnd-section`, `.dnd-column`, `.dnd-row` e `.dnd-module`. Além dessas classes prefixadas `dnd`, os nomes de classes de grade reais na marcação são baseados em nomes bootstrap 2. Isso não significa que você precisa usar o bootstrap 2 com áreas de arrastar e soltar. Quando adiciona um `dnd_area` à sua página, você é responsável por fornecer os estilos que fazem a grade funcionar. Um exemplo de estilos de layout que você pode implementar pode ser encontrado no [HubSpot CMS Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/css/objects). Sua folha de estilos pode ser adicionada ao modelo usando [`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css).
  </Step>
</Steps>

## Tutoriais relacionados

* [Introdução aos temas](/cms/start-building/building-blocks/themes/getting-started)
* [Introdução aos módulos personalizados](/cms/start-building/building-blocks/modules/overview)
* [Como adicionar recursos de tema a um site existente](/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites)