Última modificação: 28 de agosto de 2025
As áreas de arrastar e soltar 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 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. Sua folha de estilos pode ser adicionada ao modelo usando {{ require_css() }}.

​
Observação:

As áreas de arrastar e soltar não podem ser usadas em posts de blog e em modelos de e-mail no momento.

​
dnd_area

Uma área de arrastar e soltar é 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. Uma tag dnd_area pode conter os seguintes parâmetros:
ParâmetroTipoDescrição
classStringUma classe adicionada à div que envolve uma dnd_area
labelStringUsado no editor para rotular a área na barra lateral.
{% dnd_area "unique_name", class="main" %}

{% end_dnd_area %}
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.
  • 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 %} é 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 e depois incluídas 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âmetroTipoDescrição
background_colorDicioUm dicionário que suporta a especificação de uma cor de fundo. Também pode ser fornecido como uma string.
background_imageDicioUm dicionário que suporta a especificação de uma imagem de fundo.
background_linear_gradientDicioUm dicionário que suporta a especificação de um fundo de gradiente linear.
full_widthBooleanoUm booleano que determina se a seção deve ter largura total ou ser restringida por um container interno.
marginDicioUm 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_widthInteiroUm valor de pixel que define a largura máxima do conteúdo em um dicionário de encapsulamento.
paddingDicionárioUm 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_alignmentStringAlinhamento vertical do conteúdo secundário. As opções disponíveis incluem:
  • TOP
  • MIDDLE
  • BOTTOM

​
Observação:

Você somente pode usar um parâmetro de plano de fundo por tag dnd_section.
{% 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 %}
As tags dnd_section também podem conter as seguintes tags:
  • dnd_column
  • dnd_module

​
dnd_column

Uma {% dnd_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âmetroTipoDescrição
background_colorDicioUm dicionário que suporta a especificação de uma cor de fundo.
background_imageDicioUm dicionário que suporta a especificação de uma imagem de fundo.
background_linear_gradientDicioUm dicionário que suporta a especificação de um fundo de gradiente linear.
marginDicioUm 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_widthInteiroUm valor de pixel que define a largura máxima do conteúdo em um dicionário de encapsulamento.
paddingDicionárioUm 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_alignmentStringAlinhamento vertical do conteúdo secundário. As opções disponíveis incluem:
  • TOP
  • MIDDLE
  • BOTTOM

​
Observação:

Você somente pode usar um parâmetro de plano de fundo por tag dnd_column.
{% dnd_column
offset=0,
width=12,
background_color={
r: 255,
g: 0,
b: 0,
a: 1
},
margin={
"top": "1em",
"bottom": "1em"
},
%}

{% end_dnd_column %}
A tag dnd_column também pode conter dnd_row.

​
dnd_row

Um {% dnd_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âmetroTipoDescrição
background_colorDicioUm dicionário que suporta a especificação de uma cor de fundo.
background_imageDicioUm dicionário que suporta a especificação de uma imagem de fundo.
background_linear_gradientDicioUm dicionário que suporta a especificação de um fundo de gradiente linear.
marginDicioUm 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_widthInteiroUm valor de pixel que define a largura máxima do conteúdo em um dicionário de encapsulamento.
paddingDicionárioUm 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_alignmentStringAlinhamento vertical do conteúdo secundário. As opções disponíveis incluem:
  • TOP
  • MIDDLE
  • BOTTOM

​
Observação:

Você somente pode usar um parâmetro de plano de fundo por tag dnd_row.
{% 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 %}
Uma tag dnd_row também pode conter as seguintes tags:
  • dnd_column
  • dnd_module

​
dnd_module

Um {% dnd_module %} é um módulo 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âmetroTipoDescrição
pathStringO caminho de um módulo.
horizontal_alignmentStringPosicionamento horizontal, permite: LEFT, CENTER, RIGHT
offsetInteiroO deslocamento em relação a zero na grade de 12 colunas.
widthInteiroO número de colunas que ocupam a grade de 12 colunas.
flexbox_positioningStringDescontinuado; 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:
  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
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, tal como faria com um grupo de campos.
{% dnd_module
path="@hubspot/rich_text",
offset=0,
width=8,
%}
{% module_attribute "html" %}
<h1>Hello, world!</h1>
{% end_module_attribute %}
{% end_dnd_module %}

​
Plano de fundo

Existem algumas formas de definir planos de fundo nos elementos dnd de coluna, seção e linha: background_image, background_linear_gradient e 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. 
{% 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âmetroTipoDescrição
directionStringA direção do gradiente.
  • to bottom
  • to top
  • to left
  • to right
colorsmatrizUma 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:
  • RGB
  • RGBA
  • 3 char hex
  • 6 char hex
  • 8 char hex
{% 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.
ChaveTipoDescrição
backgroundPositionStringA posição da imagem no plano de fundo. Oferece suporte a uma string que indica a posição vertical seguida pela horizontal.
  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
backgroundSizeStringA propriedade CSS de tamanho de fundo utilizada para a imagem.
Os valores permitidos são:
  • cover
  • contain
  • auto
imageUrlStringO URL absoluto da imagem.
{% 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, 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 </body> na página dentro de uma tag <style>. Os estilos de arrastar e soltar também podem ser diferentes em diferentes pontos de quebra para oferecer um visual responsivo.