Productos compatibles
Se requiere uno de los siguientes productos o productos de ediciones superiores.
Marketing HubMarketing HubPro
Content HubContent HubPro
Última modificación: 28 de agosto de 2025
Las áreas de arrastrar y soltar son secciones de una plantilla que actúan como contenedores vacíos que pueden modificarse directamente desde el editor de páginas. Crear áreas de arrastrar y soltar en una plantilla permite a los creadores de contenidos añadir y gestionar módulos en el editor de páginas según sea necesario, en lugar de depender de módulos estáticos integrados en la plantilla.
Animación de módulos arrastrados a una página, con ajuste de columnas y filas
Además de utilizar las áreas de arrastrar y soltar como zonas de colocación vacías para los creadores de contenidos, también puedes rellenar automáticamente estas áreas con varios módulos, diseños y contenidos para que sirvan como punto de partida. Este tutorial te guiará en la configuración de un área de arrastrar y soltar simple. Para obtener más recursos para desarrolladores sobre las áreas de arrastrar y soltar, consulta en este boilerplate las prácticas de implementación recomendadas, así como la documentación de referencia sobre la etiqueta HubL del área de arrastrar y soltar.
Nota: Un creador de contenido puede cambiar la plantilla de una página por otra del mismo tipo, dependiendo de si tiene etiquetas dnd_area.
  • Las plantillas de arrastrar y soltar creadas con el editor de diseño visual pueden cambiarse por otras plantillas de arrastrar y soltar o por plantillas codificadas con o sin etiquetas dnd_area.
  • Las plantillas codificadas con etiquetas dnd_area solo pueden cambiarse por otras plantillas codificadas con etiquetas dnd_area.
  • Las plantillas codificadas sin etiquetas dnd_area solo pueden cambiarse por otras plantillas codificadas sin etiquetas dnd_area.
Cuando se cambia la plantilla de la página, se conservará todo el contenido que se hubiera añadido a las áreas de arrastrar y soltar de la primera plantilla.
1

Crear una plantilla HTML nueva

Crea una nueva plantilla HTML para alojar el HubL y el HTML que conformarán la sección de arrastrar y soltar.
Las áreas de arrastrar y soltar se basan en una cuadrícula adaptable de 12 columnas. Las etiquetas de arrastrar y soltar generan marcado con nombres de clase que designan columnas y filas. Debes agregar una hoja de estilo para asignar esos nombres de clase. Un ejemplo de estilos de diseño que podrías implementar se encuentra en la biblioteca de recursos del CMS de HubSpot. Tu hoja de estilo puede agregarse a la plantilla usando {{ require_css() }}.
2

Áreas de arrastrar y soltar

La sección dnd_area es lo que hace que una parte de la página web sea editable en cuanto a su estructura, diseño y contenido. El cuerpo de una etiqueta dnd_area proporciona el contenido predeterminado del área de arrastrar y soltar.Esta etiqueta por sí sola generará una zona de caída para que los creadores de contenidos arrastren los módulos dentro del área de creación.
{% dnd_area "body_dnd_area" %}
	<!-- generates an empty drag and drop area drop-section -->
{% end_dnd_area %}
3

Crear una sección con un módulo

Una dnd_section es una fila de nivel superior, y solo puede ser elemento secundario directo de una dnd_area. Las secciones admiten una variedad de parámetros que controlan los valores predeterminados de los controles estilísticos que los creadores de contenido tienen para las secciones dentro del área de creación.A modo de ejemplo, el código siguiente crea una sección con una imagen de fondo (background_image). Esta sección está centrada por un parámetro vertical-alignment y tiene una anchura máxima de un campo de 1000px para contenido infantil. Para obtener una lista completa de los parámetros admitidos en las etiquetas HubL de arrastrar y soltar, consulta la documentación de referencia de esta etiqueta HubL específica.Para rellenar automáticamente la sección con contenido, el código también incluye una etiqueta dnd_module para incluir un módulo haciendo referencia a su ruta. En este ejemplo, el dnd_module está usando el módulo de texto enriquecido predeterminado de HubSpot, según lo establecido por el parámetro path. Se especifica un valor predeterminado para el módulo de texto enriquecido mediante la etiqueta 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 %}
El resultado es que el área de arrastrar y soltar contiene un módulo que los creadores de contenidos pueden editar dentro del área de edición. Observa cómo ajustar el valor max_width en la sección dnd_section afecta al contenido.
captura de pantalla del editor de páginas con la barra de herramientas del módulo mostrando
4

Incluir varios módulos

Para incluir más de un módulo, usa varias etiquetas dnd_module. Al definir los parámetros offset y width que se basan en una cuadrícula de 12 columnas, puedes colocar un módulo de imagen junto al módulo de texto enriquecido, como se muestra abajo.
{% 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 %}
Ahora, la página también tiene un módulo de imagen editable, así como una manilla de arrastre, que permite a los creadores de contenido cambiar el ancho y el desplazamiento de los módulos. Observa cómo fijar un vertical_alignment en la dnd_section centra el contenido de forma vertical.
captura de pantalla del editor de páginas mostrando un módulo de imagen agregado a una sección
5

Incorporar columnas y filas

Para hacer más compleja la zona de arrastre, puedes incorporar filas y columnas utilizando las etiquetas dnd_row y dnd_column. Las filas y columnas actúan de forma similar a las secciones en el editor de contenido, donde los creadores de contenido pueden arrastrarlas, así como clonarlas, eliminarlas y darles estilo.
{% 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 %}
Ahora, los creadores de contenido tendrán un mayor control estilístico sobre filas y columnas específicas, además de módulos y secciones.
captura de pantalla del editor de páginas mostrando una fila con dos columnas, un módulo de imagen a la izquierda, un módulo de texto enriquecido y un módulo de formulario a la derecha.
6

Definir estilos genéricos para los componentes de arrastrar y soltar

Los distintos componentes de las áreas, las secciones, las columnas, las filas y los módulos de arrastrar y soltar tienen clases a las que se puede aplicar estilo usando CSS. Los estilos y opciones editables de estos componentes pueden definirse utilizando CSS en lugar de HubL. Por ejemplo, el relleno predeterminado se puede definir en las dnd_sections con el CSS:
.dnd-section {
  padding: 80px 20px;
}
Los selectores CSS genéricos para los componentes del área de arrastrar y soltar son .dnd-section, .dnd-column, .dnd-row y .dnd-module. Aparte de estas clases con prefijo dnd, los nombres de las clases de la cuadrícula en el marcado se basan en los nombres de bootstrap 2. Esto no significa que tengas que usar bootstrap 2 con áreas de arrastrar y soltar. Cuando agregas una dnd_area a la página, debes proporcionar los estilos que hacen que la cuadrícula funcione. Un ejemplo de estilos de diseño que podrías implementar se encuentra en la biblioteca de recursos del CMS HubSpot. Tu hoja de estilo puede agregarse a la plantilla usando {{ require_css() }}.

​
Tutoriales relacionados