Zum Hauptinhalt springen
Última modificação: 8 de outubro de 2025
As áreas de arrastar e soltar permitem criar seções em páginas e blocos globais parciais onde os criadores de conteúdo podem adicionar módulos, modificar o layout e aplicar estilos diretamente no editor de conteúdo. Usando as áreas de arrastar e soltar, você pode criar menos modelos, já que os criadores de conteúdo podem criar layouts por conta própria. Abaixo, saiba mais sobre experiência e conceitos de dnd_area. Quando estiver pronto para construir, consulte introdução ao dnd_areae a dnd_area referência.

​
Observação:

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

​
A experiência do criador de conteúdo

Quando um criador de conteúdo cria uma página usando um modelo que tem áreas de arrastar e soltar, ele primeiro vê a página com módulos predefinidos no layout que você definiu como desenvolvedor. Este layout inicial define o precedente para a aparência das páginas que usam este modelo. Usando áreas de arrastar e soltar, o criador do conteúdo pode criar a página, incluindo:
  • Adicionando módulos, seções, linhas e colunas.
  • Redimensionar módulos e atualizar seu conteúdo e estilo, como ajustar o alinhamento e adicionar planos de fundo.
Isso dá aos criadores de conteúdo flexibilidade suficiente para fazer simples alterações de página sem precisar de um desenvolvedor para pequenos ajustes.

​
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.
Quando o modelo da página é trocado, qualquer conteúdo existente adicionado às áreas de arrastar e soltar do primeiro modelo será mantido.
A experiência do editor de páginas para dnd_areas

​
A experiência do desenvolvedor

Desenvolver com áreas de arrastar e soltar é semelhante a trabalhar com frameworks de CSS comuns e suas grades. Primeiro, você apresentará a página usando contêineres, chamados seções, que contêm linhas. Dentro dessas linhas estão os módulos e as colunas. Saiba mais sobre estes elementos a seguir. Embora seja possível codificar quase tudo diretamente no modelo, o objetivo de desenvolver com áreas de arrastar e soltar é criar um conteúdo padrão de página que possa ser posteriormente editado por um criador de conteúdo. Exibir o Modelos de chapas de formatação CMS HubSpot para ver tags dnd_area em uso.
dnd_area codificado em VS Code

​
Elementos para áreas de arrastar e soltar

Ao criar uma página com áreas de arrastar e soltar, você incluirá os seguintes elementos:
  • dnd_area: o elemento arrastar e soltar de nível mais alto que permite arrastar e soltar módulos no editor de conteúdo. Não é possível aninhar áreas de arrastar e soltar. Por exemplo, um dnd_section não pode conter uma tag dnd_area.
  • dnd_section: o contentor mais exterior de um dnd_area. Pode conter dnd_row, dnd_columne dnd_module. Não é possível aninhar um dnd_section em outros elementos de arrastar e soltar.
  • dnd_column: pode conter dnd_row. Várias colunas em um dnd_row alinhará o conteúdo da linha horizontalmente.
  • dnd_row: pode conter dnd_module e dnd_column.
  • dnd_module: um empacotador de módulos onde o layout, os estilos e o conteúdo do módulo podem ser adicionados.
Saiba mais sobre cada uma dessas tags abaixo. Além disso, talvez você queira ler o Guia de introdução às áreas de arrastar e soltar para uma abordagem prática.
Relacionamentos de Arrastar e Soltar
O diagrama abaixo detalha a hierarquia dos vários elementos de arrastar e soltar.
Exemplo de estrutura
Para assistir a um vídeo explicativo sobre como visualizar as áreas de arrastar e soltar, confira o vídeo abaixo:
Continue lendo para saber mais sobre arrastar e soltar seções, linhas, colunas e módulos.

​
Seções

Seções são um tipo especial de linha que são criadas usando a tag dnd_section. Elas são o único elemento de arrastar e soltar que pode ser um descendente direto de um dnd_area. Você pode pensar nas seções como um container de encapsulamento. Eles podem permitir que o conteúdo seja de largura total ou tenha uma largura máxima central confinada. Como as seções envolvem as colunas e os módulos, elas facilitam a reorganização e a implementação de grandes porções de conteúdo. Uma tag dnd_section não renderiza um elemento HTML <section>. Abaixo está uma captura de tela de como uma seção aparece no editor de página.
Seção no editor de página
Além da tag dnd_section, você também pode criar modelos de seção que são seções reutilizáveis predefinidas que os criadores de conteúdo podem acessar no editor de página. Por exemplo, você pode criar a seção mostrada na captura de tela acima como um modelo de seção para que um criador de conteúdo possa adicioná-la rapidamente às páginas conforme necessário. Os modelos de seção têm alguns recursos exclusivos, incluindo a capacidade de usá-los de forma semelhante a um padrão modelo parcial hubL.

​
Colunas

As colunas são invólucros para linhas e módulos e podem ser colocadas dentro de uma linha ou seção. As colunas são criadas com o uso da tag dnd_column. Use várias colunas dentro de uma linha para colocar as linhas e os módulos que elas contêm na horizontal. As colunas são regiões verticais que podem conter linhas. Você pode alterar o tamanho das colunas alterando sua largura. O tamanho de uma linha é de 12 “colunas” de largura; isso se refere à grid do CSS. As colunas dentro de uma linha podem ter qualquer tamanho inferior a 12, mas não podem somar mais de 12. Quando várias linhas são colocadas dentro de uma coluna, os módulos dentro dessas linhas aparecerão empilhados na vertical. Como os módulos são colunas em si, um módulo não pode ser um descendente direto de uma coluna, eles devem estar contidos dentro de uma linha.
dnd_area coluna no editor de páginas
A aparência de uma coluna no editor de páginas.

​
Linhas

As linhas são wrappers de colunas. As linhas são criadas em modelos usando a tag dnd_row. Como os módulos são colunas, você pode colocá-los diretamente dentro de uma linha. Isso fará com que os módulos apareçam na horizontal, uns ao lado dos outros. Os módulos podem ser organizados na vertical ao colocá-los dentro de linhas. Se você quiser colocar um módulo acima de outro, será necessário colocar o módulo dentro de uma linha e então adicionar o outro módulo em uma linha acima ou abaixo daquela primeira linha.
dnd_area linha no editor de páginas
A aparência de uma linha no editor de páginas.

​
Módulos

Os módulos são uma parte fundamental do HubSpot CMS e funcionam como os componentes básicos reutilizáveis que você usa para criar um site e exibir o conteúdo. Ao construir um modelo, você coloca os módulos dentro de linhas e seções de arrastar e soltar usando a tag dnd_module. Os módulos também são colunas. Ou seja, se você colocar duas tags de módulo, ou um módulo e uma coluna diretamente um ao lado do outro, elas aparecerão lado a lado horizontalmente. Nenhum elemento de arrastar e soltar pode ser colocado dentro de um módulo. Os módulos não podem ser filhos diretos de um dnd_area.

​
Estrutura e estilo em HTML

As áreas de arrastar e soltar e seus elementos quando renderizados têm nomes de classe para uma grade de 12 colunas com base no bootstrap 2. Para facilitar a instalação e execução, você pode usar o arquivo _layout.css do Modelo padrão do CMS da HubSpot. Isso fornece estilos padrão para esses nomes de classe. Você não é obrigado a usar esta folha de estilos e pode fornecer seus próprios estilos. Se você está construindo seu site com base no Boilerplate de temas do CMS e quer usar seu próprio CSS, talvez queira remover a chamada do layout.css no base.html. Para o seu próprio grid CSS, você precisará direcionar esses mesmos nomes de classes de grid, mas o estilo ficará ao seu critério. Quando renderizadas, as áreas de arrastar e soltar criam divs com classes que são usadas pelo editor de páginas. Exemplos seriam widget-span e widget-type-cell. Você não deve direcionar diretamente essas classes, pois elas são usadas pelo editor de páginas e podem mudar ao longo do caminho. Em vez disso, em seu HubL dnd_area adicione um parâmetro de classe com um nome de classe que você gostaria de usar 
<div class="container-fluid my-custom-class">
  <div class="row-fluid-wrapper">
    <div class="row-fluid">
      <div
        class="span12 widget-span widget-type-cell "
        style=""
        data-widget-type="cell"
        data-x="0"
        data-w="12"
      ></div>
      <!--end widget-span -->
    </div>
  </div>
</div>

​
Estilo de atributo e do editor

Com as áreas de arrastar e soltar, os criadores de conteúdo podem influenciar o estilo da página. Por exemplo, eles podem definir uma seção para ter um fundo. Os desenvolvedores podem passar valores padrão para essas configurações através de atributos. Quando a página é renderizada, os estilos gerados com base nessas configurações são adicionados a standard_header_includes.

​
Migrando colunas flexíveis

Se você estiver alterando modelos criados com colunas flexíveis para usar agora áreas de arrastar e soltar, lembre-se do seguinte sobre colunas flexíveis. Colunas flexíveis não são o mesmo que áreas de arrastar e soltar, e não é possível alternar de um modelo que tenha apenas uma coluna flexível para uma que tenha apenas uma área de arrastar e soltar. Essa limitação foi estabelecida porque o conteúdo não mapearia da coluna flexível para a área de arrastar e soltar. Para ilustrar o porquê disso, suponha que você criou um novo modelo para exibir uma barra lateral e uma área de conteúdo principal. A barra lateral é uma coluna flexível; o conteúdo principal é uma área de arrastar e soltar. A ferramenta de troca mapearia a coluna flexível para a coluna flexível. Saiba mais sobre adição de áreas de arrastar e soltar a páginas existentes.

​
Recursos relacionados

⌘I