Última modificación: 28 de agosto de 2025
El contenedor más externo de un área de arrastrar y soltar se llama sección. Las secciones no pueden anidarse dentro de ningún otro elemento dnd, pero pueden contener módulos, filas y columnas. En el editor de páginas, los creadores de contenido pueden añadir secciones a la página, y luego modificarlas y aplicarles el estilo que necesiten. Los creadores de contenidos también pueden crear y guardar secciones para utilizarlas en otras páginas dentro del mismo tema, haciendo más eficiente la creación de contenidos. En este artículo, aprenderás más sobre las secciones y cómo utilizarlas en el editor de páginas. Al desarrollar un tema, puedes ocultar módulos y secciones del editor de páginas para optimizar la experiencia de creación de contenido.
editor de páginas añadir sección reutilizable UI

​
Resumen

Las secciones pueden ser creadas en el editor de contenidos por un creador de contenidos o incorporadas por un desarrollador en un archivo dnd_areacon la etiqueta dnd_section. Las opciones de estilo disponibles en el editor también se pueden utilizar al codificar una plantilla. Por ejemplo: 
<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 obtener una documentación completa de todos los parámetros disponibles de los elementos de arrastrar y soltar y ejemplos de uso, obtén más información sobre las etiquetasdnd_area . Puedes usar secciones para estructurar rápidamente plantillas que sean fáciles de leer. Como solo estás especificando en el contexto donde las instancias específicas de la plantilla son diferentes, aún puedes volver y modificar esa plantilla de sección.
Nota: Modificar una sección la actualizará en todas las instancias donde se encuentre, excepto para las páginas existentes que utilicen una plantilla que haga referencia a esa sección. Por otra parte, las páginas creadas previamente con una plantilla que incluía una sección deberán actualizarse manualmente para utilizar la nueva versión de dicha sección. Así evitarás hacer cambios accidentalmente. Para actualizar una sección a la última versión, un creador de contenidos puede ir al editor de páginas, añadir la nueva sección a la página y, luego, eliminar la versión antigua.

​
Crear secciones reutilizables

Dentro de un tema, puedes incluir secciones preconfiguradas que los creadores de contenido pueden añadir a las páginas que utilicen ese tema dentro del editor de páginas. Estas secciones reutilizables se crean como archivos de plantilla de sección y se codifican con la misma sintaxis que utilizarías dentro de un dnd_area.
Nota: Para que una sección esté disponible para varios temas, tendrás que añadir el archivo de la plantilla de la sección a cada tema. Del mismo modo, las secciones creadas por los creadores de contenidos en el editor de contenidos solo estarán disponibles dentro de ese tema.
A continuación, aprenderás a crear los archivos de plantilla de sección y a referenciarlos en otros archivos de plantilla.

​
Archivos de plantillas de secciones

Las plantillas de sección se indican con templateType: section en su anotación de plantilla. 
<!--
 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ámetroTipoDescripciónValor
templateTypeCadenaDefine el tipo de plantilla que determina dónde puede usarse y qué datos estarán disponibles para su uso.section
labelCadenaSe utiliza en el editor de páginas para proporcionar un nombre legible de la sección.
descriptionCadenaDescripción adicional de la sección más allá de lo que puede inlcuir una etiqueta. Se muestra en el editor de páginas. 255 caracteres como máximo.
screenshotPathCadena/rutaRuta a una captura de pantalla de la sección. Se utiliza para dar a los creadores de contenidos una referencia visual del aspecto de la sección.
Una plantilla de sección debe comenzar y terminar con una etiqueta dnd_section . Solo puede existir un dnd_section dentro de una plantilla de sección. Dentro de esa sección, puedes colocar módulos, filas y columnas, siguiendo las mismas reglas de dnd_area que se aplican al añadir un dnd_area a una plantilla de página. La excepción es que solo defines el contenido para una sección y sus elementos secundarios de arrastrar y 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 %}

​
Añadir un parcial de sección a una plantilla

Después de crear una sección, puedes hacer referencia a ella dentro de dnd_area utilizando una etiqueta include_dnd_partial . Esta etiqueta proporciona la ruta que usa al archivo de la sección, como se muestra a continuación: 
{% 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 %}
En el ejemplo anterior, ten en cuenta el argumento de contexto de la etiqueta include_dnd_partial . Esto te permite pasar variables específicas de la instancia desde la plantilla de página a la sección, reemplazando los valores predeterminados en el archivo de la sección. Para más información, consulta el contexto de la sección .

​
Contexto de la sección

Puedes utilizar variables de contexto de la sección para anular los valores predeterminados al nivel de la sección y el módulo. Las variables de contexto de la sección tú las defines y no están asociadas directamente a los módulos y sus campos. En la plantilla de tu página puedes ajustar estas variables de contexto mediante el parámetro context de la etiqueta include_dnd_partial . 
{% 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 %}
Cualquier variable que añadas a tu parámetro context estará disponible para referenciarla dentro de tu plantilla de sección. El siguiente ejemplo muestra cómo ajustar la URL de la imagen y el contenido del área de texto enriquecido y del botón en contexto, si existe. 
<!--
 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 %}
Ten en cuenta que en todas partes donde se utilizan las variables de contexto, hay un filtro || OR para proporcionar contenido predeterminado en caso de que no se especifique ninguno. Por ejemplo, en el módulo botón, si context.buttonText tiene un valor, la página lo utilizará. De lo contrario, el texto será Subscribe.

​
Clases de secciones

En las plantillas de sección, puedes añadir clases al contenedor de la sección utilizando el parámetro clase. Esto añadirá la clase que especifiques al campo class del elemento html de la sección dnd. Siempre que sea posible, se recomienda utilizar controles de estilo integrados en las secciones para que los creadores de contenidos puedan modificarlos.
Nota: Las clases de secciones solo se admiten en las plantillas de sección.
{% 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'
%}
...
Los creadores de contenido no pueden editar, añadir o eliminar clases. Sólo pueden “eliminarse” recreando una sección manualmente en el editor.Además, debes evitar cambiar el diseño de los elementos secundarios de sección utilizando CSS o JavaScript. Hacerlo puede crear una experiencia desagradable para el creador de contenidos durante la de edición de páginas.

​
Vista previa de tu sección

La forma más sencilla de obtener una vista previa de tu sección mientras desarrollas, es utilizar el administrador de diseño. Abre una plantilla que contenga una etiqueta dnd_area que llama a tu plantilla de sección utilizando una etiqueta include_dnd_partial . En la esquina superior derecha, haz clic en vista previa. De esta forma puedes seguir actualizando tu sección y ver tus cambios reflejados al instante. Esto es mucho más eficaz que tener que crear una página nueva para cada cambio que hagas.

​
Copiar HubL de la sección

En el editor de páginas, puedes copiar el marcado HubL de una sección para reutilizar el código según sea necesario. Esto puede ser útil cuando se quiere recrear una sección de arrastrar y soltar en un archivo codificado. Para copiar el marcado HubL de una sección:
  • Ve al contenido:
    • Páginas web: en tu cuenta de HubSpot, navega hasta Marketing > Sitio web > Páginas web.
    • Páginas de destino: en tu cuenta de HubSpot, navega hasta Marketing > Landing Pages.
  • Coloca el cursor sobre una página y haz clic en Editar.
  • En el editor de páginas, agrega el siguiente parámetro a la URL y luego presiona Introducir: ?developerMode=true
  • Una vez la página cargue de nuevo, estarás en modo desarrollador. Parra salir del modo de desarrollador en cualquier momento, haz clic en Salir del modo de desarrollador en la parte superior derecha.
exit-modo-desarrollador0
  • Coloca el cursor sobre la sección que quieras copiar y haz clic en el icono de flecha hacia abajo . Selecciona Copiar como HubL. La marca HubL se copiará en tu portapapeles.
copy-section-hubl-menu

​
Recursos relacionados