> ## 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. # Tags do HubL para áreas de arrastar e soltar > As tags do HubL usadas para criar áreas de arrastar e soltar que permitem aos desenvolvedores criar seções de páginas que possibilitam fazer mudanças de layout, estilo e conteúdo diretamente nos editores de conteúdo. As [áreas de arrastar e soltar](https://br.developers.hubspot.com/docs/guides/cms/content/templates/drag-and-drop/overview) permitem aos desenvolvedores criar seções de páginas e partials globais que possibilitam fazer mudanças de layout, estilo e conteúdo diretamente nos editores de conteúdo. Consulte o [tutorial sobre como criar uma área de arrastar e soltar](/cms/start-building/building-blocks/drag-and-drop/tutorial) para ver uma introdução à criação de áreas de arrastar e soltar. 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ê precisará adicionar uma folha de estilos para direcionar 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). ### Observação: As áreas de arrastar e soltar não podem ser usadas em [posts de blog](/cms/start-building/building-blocks/templates/blog) e em [modelos de e-mail](https://br.developers.hubspot.com/docs/guides/cms/content/templates/overview#email) no momento. ## dnd\_area Uma [área de arrastar e soltar](https://br.developers.hubspot.com/docs/guides/cms/content/templates/drag-and-drop/overview) é 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. Os módulos em si não podem conter áreas de arrastar e soltar. Para fornecer aos criadores de conteúdo uma interface para adicionar conteúdo uniforme dentro de um módulo, use [campos e grupos repetíveis](/cms/reference/fields/module-theme-fields#repeaters). Uma tag `dnd_area` pode conter os seguintes parâmetros: | Parâmetro | Tipo | Descrição | | --------- | ------ | ----------------------------------------------------- | | `class` | String | Uma classe adicionada à div que envolve uma dnd\_area | | `label` | String | Usado no editor para rotular a área na barra lateral. | ```text entrada.txt theme={null} {% dnd_area "unique_name", class="main" %} {% end_dnd_area %} ``` ```text saída.txt theme={null}
``` As tags `dnd_area` também podem conter tags `dnd_section`. ### 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 criados com o editor visual de layout de arrastar e soltar 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`. ## dnd\_section Uma [`{% dnd_section %}`](/cms/start-building/building-blocks/sections/sections) é uma linha de nível superior e deve estar aninhada em uma tag `{% dnd_area %}`. [As seções também podem ser definidas como um modelo](/cms/start-building/building-blocks/sections/sections#section-templates) e depois [incluídas](/cms/start-building/building-blocks/sections/sections#section-context) em uma `dnd_area`, tornando-as ideais para a construção rápida de um modelo. Uma tag `dnd_section` pode conter os seguintes parâmetros: | Parâmetro | Tipo | Descrição | | ---------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `background_color` | Dicio | Um dicionário que suporta a especificação de uma [cor de fundo](#background-color). Também pode ser fornecido como uma string. | | `background_image` | Dicio | Um dicionário que suporta a especificação de uma [imagem de fundo](#background-image). | | `background_linear_gradient` | Dicio | Um dicionário que suporta a especificação de um [fundo de gradiente linear](#background-linear-gradient). | | `full_width` | Booleano | Um booleano que determina se a seção deve ter largura total ou ser restringida por um container interno. | | `margin` | Dicio | Um dicionário que dá suporte à especificação de valores de margem em `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` e `%`. Quando nenhuma unidade de medida é fornecida, é aplicado o padrão `px`. | | `max_width` | Inteiro | Um valor de pixel que define a largura máxima do conteúdo em um dicionário de encapsulamento. | | `padding` | Dicionário | Um dicionário que suporta a especificação de valores de deslocamento em `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` e `%`. Quando nenhuma unidade de medida é fornecida, é aplicado o padrão `px`. | | `vertical_alignment` | String | Alinhamento vertical do conteúdo secundário. As opções disponíveis incluem:
| ### Observação: Você somente pode usar um parâmetro de plano de fundo por tag `dnd_section`. ```text entrada.txt theme={null} {% dnd_section background_image={ "backgroundPosition": "MIDDLE_CENTER", "backgroundSize": "cover", "imageUrl": "https://example.com/path/to/image.jpg" }, margin={ "top": 32, "bottom": 32 }, padding={ "top": "1em", "bottom": "1em", "left": "1em", "right": "1em" }, max_width=1200, vertical_alignment="MIDDLE" %} {% end_dnd_section %} ``` ```text saída.txt theme={null}
``` As tags `dnd_section` também podem conter as seguintes tags: * `dnd_column` * `dnd_module` ## dnd\_column Uma [`{% dnd_column %}`](https://br.developers.hubspot.com/docs/guides/cms/content/templates/drag-and-drop/overview#column) é um componente estrutural vertical que ocupa uma ou mais colunas de layout definidas pela linha principal. Esta tag do HubL deve ser aninhada dentro de uma tag `{% dnd_area %}`. Uma tag `dnd_column` pode conter os seguintes parâmetros: | Parâmetro | Tipo | Descrição | | ---------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `background_color` | Dicio | Um dicionário que suporta a especificação de uma [cor de fundo](#background-color). | | `background_image` | Dicio | Um dicionário que suporta a especificação de uma [imagem de fundo](#background-image). | | `background_linear_gradient` | Dicio | Um dicionário que suporta a especificação de um [fundo de gradiente linear](#background-linear-gradient). | | `margin` | Dicio | Um dicionário que dá suporte à especificação de valores de margem em `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` e `%`. Quando nenhuma unidade de medida é fornecida, é aplicado o padrão `px`. | | `max_width` | Inteiro | Um valor de pixel que define a largura máxima do conteúdo em um dicionário de encapsulamento. | | `padding` | Dicionário | Um dicionário que suporta a especificação de valores de deslocamento em `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` e `%`. Quando nenhuma unidade de medida é fornecida, é aplicado o padrão `px`. | | `vertical_alignment` | String | Alinhamento vertical do conteúdo secundário. As opções disponíveis incluem:
| ### Observação: Você somente pode usar um parâmetro de plano de fundo por tag `dnd_column`. ```text entrada.txt theme={null} {% dnd_column offset=0, width=12, background_color={ r: 255, g: 0, b: 0, a: 1 }, margin={ "top": "1em", "bottom": "1em" }, %} {% end_dnd_column %} ``` ```text saída.txt theme={null}
``` A tag `dnd_column` também pode conter `dnd_row`. ## dnd\_row Um [`{% dnd_row %}`](https://br.developers.hubspot.com/docs/guides/cms/content/templates/drag-and-drop/overview#row) é um componente estrutural horizontal que cria um grid com 12 colunas, no qual podem ser colocados colunas e módulos. Esta tag do HubL deve ser aninhada dentro de uma tag `{% dnd_area %}`. Uma tag `dnd_row` pode incluir os seguintes parâmetros: | Parâmetro | Tipo | Descrição | | ---------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `background_color` | Dicio | Um dicionário que suporta a especificação de uma [cor de fundo](#background-color). | | `background_image` | Dicio | Um dicionário que suporta a especificação de uma [imagem de fundo](#background-image). | | `background_linear_gradient` | Dicio | Um dicionário que suporta a especificação de um [fundo de gradiente linear](#background-linear-gradient). | | `margin` | Dicio | Um dicionário que dá suporte à especificação de valores de margem em `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` e `%`. Quando nenhuma unidade de medida é fornecida, é aplicado o padrão `px`. | | `max_width` | Inteiro | Um valor de pixel que define a largura máxima do conteúdo em um dicionário de encapsulamento. | | `padding` | Dicionário | Um dicionário que suporta a especificação de valores de deslocamento em `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` e `%`. Quando nenhuma unidade de medida é fornecida, é aplicado o padrão `px`. | | `vertical_alignment` | String | Alinhamento vertical do conteúdo secundário. As opções disponíveis incluem:
| ### Observação: Você somente pode usar um parâmetro de plano de fundo por tag `dnd_row`. ```text entrada.txt theme={null} {% dnd_row background_color={ r: 123, g: 123, b: 123, a: 1.0 }, margin={ "top": 20, "bottom": 200 }, padding={ "top": 20, "bottom": 200, "left": 20, "right": 20 } %} {% end_dnd_row %} ``` ```text saída.txt theme={null}
``` Uma tag dnd\_row também pode conter as seguintes tags: * `dnd_column` * `dnd_module` ## dnd\_module Um [`{% dnd_module %}`](https://br.developers.hubspot.com/docs/guides/cms/content/templates/drag-and-drop/overview#module) é um [módulo](https://br.developers.hubspot.com/docs/guides/cms/content/modules/overview) envolto por uma div em que layout, estilos e conteúdo podem ser adicionados. O módulo é especificado referenciando o caminho, que pode ser um módulo padrão do HubSpot (usando o namespace `@hubspot/`), ou módulos que você construiu, especificando o caminho dentro da árvore de arquivos do gerenciador de design. Esta tag do HubL deve ser aninhada dentro de uma tag `{% dnd_area %}`. Uma tag `dnd_module` pode conter os seguintes parâmetros: | Parâmetro | Tipo | Descrição | | ---------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `path` | String | O caminho de um módulo. | | `horizontal_alignment` | String | Posicionamento horizontal, permite: `LEFT`, `CENTER`, `RIGHT` | | `offset` | Inteiro | O deslocamento em relação a zero na grade de 12 colunas. | | `width` | Inteiro | O número de colunas que ocupam a grade de 12 colunas. | | `flexbox_positioning` | String | **Descontinuado; não utilizar.** Em vez disso, use `horizontal_alignment` em conjunto com a linha ou seção `vertical_alignment`.
Valor da posição Flexbox do módulo. Oferece suporte a uma string que indica a posição vertical seguida da horizontal: | Um dos seus módulos antigos tem um nome de campo que corresponde a um dos parâmetros `dnd_module` acima? Você pode [passar os valores padrão utilizando um parâmetro de campos](/cms/reference/modules/using-modules-in-templates#passing-fields-that-have-dnd-associated-parameters), tal como faria com um grupo de campos. ```text entrada.txt theme={null} {% dnd_module path="@hubspot/rich_text", offset=0, width=8, %} {% module_attribute "html" %}

Hello, world!

{% end_module_attribute %} {% end_dnd_module %} ``` ```text saída.txt theme={null}

Hello, world!
``` ## Plano de fundo Existem algumas formas de definir planos de fundo nos elementos dnd de coluna, seção e linha: [`background_image`](#background-image), [`background_linear_gradient`](#background-linear-gradient) e [`background_color`](#background-color). ### background\_color As tags dnd de coluna, seção e linha oferecem suporta a cores de fundo. Você pode definir a cor de fundo padrão para um elemento de arrastar e soltar usando `background_color`. Esse parâmetro é um parâmetro baseado em string e pode incluir os formatos descritos no exemplo abaixo. ```hubl theme={null} {% dnd_section %} // Hex Value (both 3 and 6 char length) {% dnd_column background_color="#F7F7F7" %} {% end_dnd_column %} {% dnd_column background_color="#FFF" %} {% end_dnd_column %} // Both RGB and RGBA {% dnd_column background_color="rgb(255,255,255)" %} {% end_dnd_column %} {% dnd_column background_color="rgba(0,0,0,.25)" %} {% end_dnd_column %} {% end_dnd_section %} ``` ### background\_linear\_gradient Os elementos dnd de coluna, seção e linha oferecem suporte a gradientes lineares de fundo. Você pode definir um gradiente padrão usando o parâmetro `background_linear_gradient`. O parâmetro espera um dicionário. No momento, ele oferece suporte apenas a duas paradas de cor. | Parâmetro | Tipo | Descrição | | ----------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `direction` | String | A direção do gradiente. | | `colors` | matriz | Uma matriz de strings de cor. No momento, oferece suporte a dois valores: o início e o fim. Os valores são fornecidos como strings e os seguintes formatos são suportados: | ```hubl theme={null} {% dnd_section background_linear_gradient={ "direction": "to bottom", "colors": [ "#1EB6C3", "#2A2859" ] } %} {% dnd_module path="@hubspot/rich_text" width="6" %} {% end_dnd_module %} {% end_dnd_section %} ``` ### background\_image Os elementos dnd de coluna, seção e linha oferecem suporte a imagens de fundo. Você pode fornecer uma imagem de fundo padrão usando o parâmetro `background_image` que espera um dicionário. | Chave | Tipo | Descrição | | -------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `backgroundPosition` | String | A posição da imagem no plano de fundo. Oferece suporte a uma string que indica a posição vertical seguida pela horizontal. | | `backgroundSize` | String | A propriedade CSS de tamanho de fundo utilizada para a imagem.
Os valores permitidos são: | | `imageUrl` | String | O URL absoluto da imagem. | ```hubl theme={null} {% dnd_section background_image = { "backgroundPosition": "MIDDLE_CENTER", "backgroundSize": "cover", "imageUrl": "https://www.example.com/bg-image.jpg" }, %} {% dnd_module path="@hubspot/rich_text" width="6" %} {% end_dnd_module %} {% end_dnd_section %} ``` ## Como os parâmetros de estilo dnd são traduzidos na página Quando você usa parâmetros baseados em estilo, como [planos de fundos](#background), margens ou deslocamento, os nomes das classes são automaticamente computados para suas seções, colunas, linhas e módulos. Os valores de propriedade que você atribuiu são adicionados aos nomes de classe criados automaticamente e o código CSS resultante é colocado antes da tag de fechamento `` na página dentro de uma tag `