Skip to main content
Última modificación: 8 de octubre de 2025
Las áreas de arrastrar y soltar te permiten crear áreas de páginas y parciales globales donde los creadores de contenido pueden colocar módulos, cambiar el diseño y añadir el estilo dentro del editor de contenido. Al utilizar las áreas de arrastrar y soltar, puedes crear menos plantillas, ya que los creadores de contenidos pueden crear diseños por su cuenta. A continuación, obtén más información sobre la experiencia y los conceptos de dnd_area. Una vez tengas todo listo para comenzar a crear, consulta la guióa de los primeros pasos para usar dnd_area, y la referencia de dnd_area.

​
Nota:

Las áreas de arrastrar y soltar no se pueden utilizar en publicaciones de blog ni plantillas de correo electrónico.

​
La experiencia para los creadores de contenido

Cuando los creadores de contenido crean una página utilizando una plantilla que tiene áreas de arrastrar y soltar, primero ven la página con los módulos predefinidos en el diseño que hayas definido como desarrollador. Este diseño inicial configura el aspecto que tendrán las páginas que utilicen esta plantilla. Utilizando las áreas de arrastrar y soltar, los creadores de contenidos pueden crear la página, incluyendo:
  • Añadir módulos, secciones, filas y columnas.
  • Cambiar el tamaño de los módulos y actualizar su contenido y estilo, como ajustar la alineación y añadir fondos.
Esto les brinda la flexibilidad suficiente para realizar cambios simples en la página sin necesitar de un desarrollador para ajustes menores.

​
Nota:

Los creadores de contenido pueden cambiar la plantilla de una página por otra del mismo tipo, dependiendo de si tiene las etiquetas dnd_area.Las plantillas creadas con el editor de diseño visual de arrastrar y soltar pueden cambiarse por otras plantillas de arrastrar y soltar o 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, todo el contenido que se hubiera añadido a las áreas de arrastrar y soltar de la primera plantilla se mantendrá.
La experiencia del editor de páginas para dnd_areas

​
La experiencia para los desarrolladores

Desarrollar con áreas de arrastrar y soltar es similar a trabajar con marcos comunes de CSS y sus cuadrículas. Primero, diseñas la página utilizando contenedores llamados secciones, que contienen filas. Dentro de esas filas hay módulos y columnas. Obtén más información elementos a continuación. Aunque podrías codificar casi todo en la plantilla, el objetivo de desarrollar con áreas de arrastrar y soltar es que establezcas un contenido predeterminado en la página, que luego podrá ser editado por un creador de contenido. Consulta la biblioteca de plantillas del CMS HubSpot para ver las etiquetas dnd_area en uso.
dnd_area codificado en VS Code

​
Elementos de las áreas de arrastrar y soltar

Cuando crees una página con áreas de arrastrar y soltar, debes incluir los siguientes elementos:
  • dnd_area: el elemento de arrastrar y soltar de nivel más alto que permite arrastrar y soltar módulos en el editor de contenidos. No puedes anidar áreas de arrastrar y soltar. Por ejemplo, un dnd_section no puede contener una etiqueta dnd_area.
  • dnd_section: el contenedor más externo en un dnd_area. Puede contener dnd_row, dnd_column, y dnd_module. No puedes anidar un dnd_section dentro de otros elementos de arrastrar y soltar.
  • dnd_column: puede contener dnd_row. Varias columnas dentro de un dnd_row alinearán horizontalmente el contenido de la fila.
  • dnd_row: puede contener dnd_module y dnd_column.
  • dnd_module: un contenedor de módulo en el que se pueden agregar el diseño, los estilos y el contenido del módulo.
Obtén más información sobre cada una de estas etiquetas a continuación. Además, puedes consultar la guía de introducción a las áreas de arrastrar y soltar para tener un enfoque práctico.
Relaciones de los elementos de arrastrar y soltar
El siguiente diagrama desglosa aún más la jerarquía de los distintos elementos de arrastrar y soltar.
Ejemplo de estructura
Para ver una demostración en video sobre cómo visualizar las áreas de arrastrar y soltar, consulta el siguiente video:
Sigue leyendo para saber más sobre las secciones, filas, columnas y módulos de arrastrar y soltar.

​
Secciones

Las secciones son un tipo especial de filas que se crean utilizando la etiqueta dnd_section. Son el único elemento de arrastrar y soltar que puede ser descendiente directo de un área de arrastrar y soltar dnd_area. Puedes pensar en las secciones como un contenedor externo. Pueden permitir que el contenido tenga un ancho completo o que tenga un ancho máximo centrado y delimitado. Debido a que las secciones contienen las columnas y los módulos, facilitan la reorganización e implementación de grandes porciones de contenido. La etiqueta dnd_section no muestra un elemento HTML <section>. A continuación se muestra una captura de pantalla de cómo aparece una sección en el editor de páginas.
Sección en el editor de páginas
Además de la etiqueta dnd_section, también puedes crear plantillas de secciones, que son secciones predefinidas reutilizables a las que los creadores de contenido pueden acceder en el editor de páginas. Por ejemplo, podrías convertir la sección de la captura de pantalla anterior en una plantilla de sección, permitiendo que un creador de contenidos la agregue rápidamente a las páginas según sea necesario. Las secciones tienen capacidades únicas, incluyendo la posibilidad de utilizarlas de forma similar a una plantilla parcial estándar de hubL.

​
Columnas

Las columnas son contenedores de filas y módulos, y pueden colocarse dentro de una fila o sección. Las columnas se crean utilizando la etiqueta dnd_column. Utiliza varias columnas dentro de una fila para colocar las filas y los módulos que los contienen de forma horizontal. Las columnas son regiones verticales que pueden contener filas. Puedes hacer columnas de diferentes tamaños cambiando su anchura. El tamaño de una fila es de 12 “columnas” de ancho, esto se refiere a la cuadrícula CSS. Las columnas dentro de una fila pueden ser de cualquier tamaño menor que 12 pero no pueden sumar más de 12. Cuando se colocan varias filas dentro de una columna, los módulos dentro de esas filas aparecerán apilados verticalmente. Dado que los módulos son columnas en sí, un módulo no puede ser descendiente directo de una columna, sino que debe estar contenido en una fila.
dnd_area column in page editor
La apariencia de una columna en el editor de páginas.

​
Filas

Las filas son las que contienen las columnas. Las filas son creadas en las plantillas utilizando la etiqueta dnd_row. Como los módulos son columnas, puedes colocarlos directamente dentro de una fila. Esto causará que los módulos aparezcan horizontalmente adyacentes entre sí. Los módulos se pueden organizar verticalmente colocándolos dentro de las filas. Si quieres colocar un módulo por encima de otro, debes colocar ese módulo dentro de una fila. Luego, se agregaría otro módulo en una fila por encima o por debajo de esa primera fila.
dnd_area row in page editor
La apariencia de una fila en el editor de páginas.

​
Módulos

Los módulos son una parte fundamental del CMS de HubSpot, actuando como bloques de creación reutilizables que se utilizan para crear un sitio y mostrar el contenido. Cuando se crea una plantilla se colocan módulos dentro de las filas y secciones de arrastrar y soltar utilizando la etiqueta dnd_module. Los módulos también son columnas. Esto significa que si colocas dos etiquetas de módulo, o un módulo y una columna directamente al lado del otro, aparecerán uno al lado del otro horizontalmente. No se pueden colocar elementos de arrastrar y soltar dentro de un módulo. Los módulos no pueden ser elemento directos de un dnd_area.

​
Estructura y estilo HTML

Las áreas de arrastrar y soltar y sus elementos cuando se renderizan tienen nombres de clase para una rejilla de 12 columnas basada en bootstrap 2. Para facilitar la puesta en marcha, puedes utilizar el archivo _layout.css de la biblioteca de recursos del CMS de HubSpot. Esto proporciona estilos predeterminados para esos nombres de clase. No es obligatorio usar esta hoja de estilos; puedes proporcionar tus propios estilos en su lugar. Si estás construyendo tu sitio basado en la biblioteca de temas del CMS HubSpot y deseas utilizar tu propio CSS, es recomendable eliminar la llamada al layout.css en la base.html. Para usar tu propia cuadrícula CSS, deberás referenciar los mismos nombres de clases de la cuadrícula, pero el estilo dependerá de ti. Las áreas de arrastrar y soltar cuando se renderizan crean divs con clases que son usadas por el editor de la página. Algunos ejemplos podrían ser widget-span y widget-type-cell. No deberías referenciar directamente a estas clases ya que son utilizadas por el editor de páginas y podrían cambiar en el futuro. En su lugar, en el dnd_area de HubL agrega un parámetro de clase con el nombre de la clase que deseas utilizar 
<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 y atributos del editor

Con las áreas de arrastrar y soltar los creadores de contenido pueden ajustar de alguna forma el estilo de la página. Por ejemplo, pueden establecer que una sección tenga un fondo. Los desarrolladores pueden pasar valores predeterminados para esas configuraciones a través de los atributos. Cuando la página se renderiza, los estilos que se generan basados en esas configuraciones se agregan a standard_header_includes.

​
Migrar columnas flexibles

Si vas a cambiar las plantillas creadas por columnas flexibles para utilizar las áreas de arrastrar y soltar, ten en cuenta la siguiente información sobre las columnas flexibles. Las columnas flexibles no son lo mismo que las áreas de arrastrar y soltar. No puedes pasar de una plantilla que solo tiene una columna flexible a otra que solo tiene un área de arrastrar y soltar. Esta limitación se implementó porque el contenido no se asignaba desde la columna flexible al área de arrastrar y soltar. Para ilustrar el motivo, supongamos que creaste una nueva plantilla con una barra lateral y un área de contenido principal. La barra lateral es una columna flexible y tu contenido principal es un área de arrastrar y soltar. La herramienta de intercambio asignaría una columna flexible a otra columna flexible. Obtener más información sobre cómo agregar áreas de arrastrar y soltar a los sitios web existentes.

​
Recursos relacionados

⌘I