Produtos suportados
Requer um dos seguintes produtos ou superior.
Marketing HubMarketing HubProfessional
Content HubContent HubProfessional
Última modificação: 28 de agosto de 2025
Áreas de arrastar e soltar 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.
Animação dos módulos arrastados para uma página, com colunas e linhas sendo ajustadas
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 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.
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 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.
1

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.
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. Sua folha de estilos pode ser adicionada ao modelo usando {{ require_css() }}.
2

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.
{% dnd_area "body_dnd_area" %}
	<!-- generates an empty drag and drop area drop-section -->
{% end_dnd_area %}
3

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.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.
{% 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.
captura de tela do editor de página com a barra de ferramentas do módulo sendo exibida
4

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.
{% 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.
captura de tela do editor de página mostrando um módulo de imagem adicionado a uma seção
5

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.
{% 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.
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.
6

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:
.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. Sua folha de estilos pode ser adicionada ao modelo usando {{ require_css() }}.

​
Tutoriais relacionados