Ignorar e ir ao conteúdo principal

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() }}.

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.

As tags dnd_area também podem conter tags 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

As tags dnd_section também podem conter as seguintes tags:

  • dnd_column
  • dnd_module

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

A tag dnd_column também pode conter 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

Uma tag dnd_row também pode conter as seguintes tags:

  • dnd_column
  • 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
pathObrigatórioStringO 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_positioningDescontinuadoStringDescontinuado; 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

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.

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.

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

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.

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