Zum Hauptinhalt springen
Última modificação: 10 de outubro de 2025
O recipiente mais externo em um área de arrastar e soltar é chamado de seção. As seções não podem ser aninhadas dentro de nenhuma outra elemento dnd, mas pode conter módulos, linhas, e colunas. No editor de páginas, os criadores de conteúdo podem adicionar seções à página e depois modificá-las e estilizá-las conforme necessário. Os criadores de conteúdo também podem criar e salvar seções para usar em outras páginas do mesmo tema, tornando a criação de conteúdo mais eficiente. Neste artigo, saiba mais sobre seções e como usá-las no editor de páginas. Se você estiver desenvolvendo um tema, confira o guia em escondendo módulos e seções do editor de páginas para criar uma experiência de criação de conteúdo mais simplificada.
editor de páginas adicionar seção reutilizável UI

​
Visão geral

As seções podem ser criadas no editor de conteúdo por um criador de conteúdo ou construído por um desenvolvedor em um dnd_area, com o dnd_section marcação. As opções de estilo disponíveis no editor também estão disponíveis ao codificar um modelo. Por exemplo: 
<main class="body-container-wrapper">
  {% dnd_area 'dnd_area'
    label='Main 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 %}

  {% end_dnd_area %}
</main>
Para obter documentação completa de todos os parâmetros de elementos de arrastar e soltar disponíveis e exemplos de uso, saiba mais sobre dnd_area Etiquetas. Você pode usar seções para criar rapidamente modelos fáceis de ler. Como você está especificando apenas em um contexto onde as instâncias específicas do modelo são diferentes, você ainda pode voltar e modificar esse modelo de seção.
Observe: modificar uma seção irá atualizá-la em todas as instâncias dessa seção, exceto para páginas existentes que usam um modelo que faz referência à seção. Páginas criadas anteriormente com um modelo que tinha uma seção incluída precisarão ser atualizadas manualmente para usar a nova versão da seção. Isso evita que alterações drásticas sejam feitas acidentalmente. Para atualizar uma seção para a versão mais recente, um criador de conteúdo pode navegar até o editor de página, adicionar a nova seção à página e, em seguida, excluir a versão antiga.

​
Crie seções reutilizáveis

Dentro de um tema, você pode incluir seções pré-configuradas que os criadores de conteúdo podem adicionar às páginas usando esse tema no editor de páginas. Essas seções reutilizáveis são criadas como arquivos de modelo de seção e são codificadas dentro da mesma sintaxe que você usaria dentro de um dnd_area.
Observe: para disponibilizar uma seção para vários temas, você precisará adicionar o arquivo de modelo de seção a cada tema. Da mesma forma, as seções criadas pelos criadores de conteúdo no editor de conteúdo estarão disponíveis somente naquele tema.
Abaixo, aprenda como criar arquivos de modelo de seção e referenciá-los em outros arquivos de modelo.

​
Arquivos de modelo de seção

Os modelos de seção são indicados por templateType: section em seus anotação de modelo. 
<!--
 templateType: section
 label: Banner
 description: "A banner typically used at the top of a page highlighting a product or main topic."
 isAvailableForNewContent: true
 screenshotPath: ../images/section-previews/banner.png
-->
ParâmetroTipoDescriçãoValor
templateTypeCordaDefine o tipo de modelo usado para determinar onde o modelo pode ser usado e quais dados estão disponíveis para ele.section
labelCordaUsado no editor de páginas para fornecer um nome legível para a seção.
descriptionCordaDescrição mais detalhada da seção além do que você pode fazer com um rótulo. Exibido no editor de páginas. Máximo de 255 caracteres.
screenshotPathSequência de caracteres/caminhoCaminho para uma captura de tela da seção. Isso é usado para dar aos criadores de conteúdo uma referência visual fácil de como é a seção.
Um modelo de seção deve começar e terminar com um dnd_section marcação. Apenas um dnd_section pode existir dentro de um modelo de seção. Dentro dessa seção, você pode colocar módulos, linhas e colunas, seguindo o mesmo dnd_area regras que se aplicam quando adicionando um dnd_area para um modelo de página. A exceção é que você está definindo o conteúdo apenas para uma seção e seus elementos filhos de arrastar e soltar. 
<!--
 templateType: section
 label: Banner
 description: "A banner typically used at the top of a page highlighting a product or main topic."
 isAvailableForNewContent: true
 screenshotPath: ../images/section-previews/banner.png
-->
{% dnd_section
 padding={
   'top': 200,
   'right': 20,
   'bottom': 200,
   'left': 20
 },
 background_image={
   'backgroundPosition': 'MIDDLE_CENTER',
   'backgroundSize': 'cover',
   'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
 },
 max_width=778,
 vertical_alignment='MIDDLE'
%}
 {% dnd_column %}
   {% dnd_row %}
     {% dnd_module path='@hubspot/rich_text' %}
     {% module_attribute 'html' %}
       <div style="text-align: center">
         {{ context.content || '<h1 style="color: #fff;">Communicate <span style="font-weight: 400;">Your Way</span></h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>' }}
       </div>
     {% end_module_attribute %}
     {% end_dnd_module %}
   {% end_dnd_row %}
   {% dnd_row %}
     {% dnd_module
       path='../modules/button',
       button_text={{ context.buttonText || 'Subscribe' }}
       horizontal_alignment='CENTER'
     %}
     {% end_dnd_module %}
   {% end_dnd_row %}
 {% end_dnd_column %}
{% end_dnd_section %}

​
Adicionar uma seção parcial a um modelo

Depois de criar uma seção, você pode referenciá-la em um dnd_area usando um include_dnd_partial marcação. Esta tag fornece o caminho que aponta para o arquivo de seção, conforme mostrado abaixo: 
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}
   {# Banner Section #}
   {% include_dnd_partial path='../sections/banner.html' context={} %}
   {# End Banner Section #}
{% end_dnd_area %}
No exemplo acima, observe o argumento de contexto no include_dnd_partial marcação. Isso permite que você passe variáveis específicas de instância do modelo de página para a seção, substituindo os valores padrão no arquivo de seção. Veja o contexto da seção para maiores informações.

​
Contexto da seção

Você pode usar variáveis de contexto de seção para substituir valores padrão de nível de seção e de nível de módulo. As variáveis de contexto da seção são definidas por você e não estão associadas diretamente aos módulos e seus campos. No seu modelo de página, você pode definir essas variáveis de contexto por meio do context parâmetro no include_dnd_partial marcação. 
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}

   {# Banner Section #}
   {% include_dnd_partial path='../sections/banner.html'
     context={
       'content': '<h1 style="color: #fff;">Home Page</h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>',
       'buttonText': 'Buy Now'
     }
   %}
   {# End Banner Section #}

{% end_dnd_area %}
Quaisquer variáveis que você adicionar ao seu context O parâmetro ficará disponível para referência no seu modelo de seção. O exemplo a seguir mostra como definir o URL da imagem, a área de rich text e o conteúdo do botão no contexto, se existir. 
<!--
 templateType: section
 label: Banner
 description: "A banner typically used at the top of a page highlighting a product or main topic."
 isAvailableForNewContent: true
 screenshotPath: ../images/section-previews/banner.png
-->
{% dnd_section
  background_image={
   'backgroundPosition': 'MIDDLE_CENTER',
   'backgroundSize': 'cover',
   'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
 },
 max_width=778
%}
 {% dnd_column %}
   {% dnd_row %}
     {% dnd_module path='@hubspot/rich_text' %}
     {% module_attribute 'html' %}
       <div style="text-align: center">
         {{ context.content || '<h1 style="color: #fff;">Communicate <span style="font-weight: 400;">Your Way</span></h1><p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.</p>' }}
       </div>
     {% end_module_attribute %}
     {% end_dnd_module %}
   {% end_dnd_row %}
   {% dnd_row %}
     {% dnd_module
       path='../modules/button',
       button_text={{ context.buttonText || 'Subscribe' }}
       horizontal_alignment='CENTER'
     %}
     {% end_dnd_module %}
   {% end_dnd_row %}
 {% end_dnd_column %}
{% end_dnd_section %}
Observe que em todos os lugares onde as variáveis de contexto são usadas, há uma || OU filtro para fornecer conteúdo padrão de fallback caso nenhum seja fornecido. Por exemplo, no módulo de botão, se context.buttonText tem um valor, a página irá utilizá-lo. Caso contrário, o texto será definido como Subscribe.

​
Aulas de seção

Em modelos de seção, você pode adicionar classes ao wrapper de seção usando o parâmetro class. Isso adicionará a classe que você especificar ao campo class do elemento html da seção dnd. É recomendável, sempre que possível, que você use controles de estilo incorporados às seções para permitir que os criadores de conteúdo possam modificá-las.
Observe: classes de seção são suportadas somente em modelos de seção.
{% dnd_section
 class='my-hero-section'
 padding={
   'top': 200,
   'right': 20,
   'bottom': 200,
   'left': 20
 },
 background_image={
   'backgroundPosition': 'MIDDLE_CENTER',
   'backgroundSize': 'cover',
   'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
 },
 max_width=778,
 vertical_alignment='MIDDLE'
%}
...
Os criadores de conteúdo não podem editar, adicionar ou remover classes. Eles só podem ser “removidos” recriando uma seção manualmente no editor.Além disso, você deve evitar alterar o layout das seções filhas usando CSS ou JavaScript. Fazer isso pode criar uma experiência desagradável no editor de páginas para o criador do conteúdo.

​
Visualizando sua seção

A maneira mais fácil de visualizar sua seção durante o desenvolvimento é usar o Gerenciador de Design. Abra um modelo contendo um dnd_area que chama seu modelo de seção usando um include_dnd_partial marcação. No canto superior direito, clique em pré-visualizar. Dessa forma, você pode continuar atualizando sua seção e ver suas alterações refletidas imediatamente. Isso é muito mais eficiente do que ter que criar uma nova página para cada alteração feita.

​
Seção de cópia HubL

No editor de páginas, você pode copiar a marcação HubL de uma seção para reutilizar o código conforme necessário. Isso pode ser útil quando você deseja recriar seções de arrastar e soltar em um arquivo codificado. Para copiar a marcação HubL de uma seção:
  • Navegue até seu conteúdo:
    • Páginas do site: Na sua conta HubSpot, navegue até Marketing > Site > Páginas do site.
    • Páginas de destino: Na sua conta HubSpot, navegue até Marketing > Páginas de destino.
  • Passe o mouse sobre uma página e clique Editar.
  • No editor de páginas, adicione o seguinte parâmetro ao URL e pressione Digitar: ?developerMode=true.
  • Com a página recarregada, você estará no modo de desenvolvedor. Você pode sair do modo de desenvolvedor a qualquer momento clicando em Sair do modo de desenvolvedor no canto superior direito.
sair-desenvolvedor-modo0
  • Passe o mouse sobre a seção que deseja copiar e clique em ícone de seta para baixo. Selecione Copiar como HubL. A marcação HubL será então copiada para sua área de transferência.
cópia-seção-hubl-menu

​
Recursos relacionados