Última modificación: 28 de agosto de 2025
Las áreas de arrastrar y soltar permiten a los desarrolladores crear secciones de páginas y parciales globales que admiten cambios de diseño, estilo y contenido directamente en los editores de contenido. Consulta el tutorial sobre crear un área de arrastrar y soltar para una introducción a la configuración de las áreas de arrastrar y soltar. Las áreas de arrastrar y soltar se basan en una cuadricula responsiva de 12 columnas. Las etiquetas de arrastrar y soltar generan marcas con nombres de clase que designan columnas y filas. Tendrás que agregar una hoja de estilos para orientar esos nombres de clase.  Un ejemplo de estilos de diseño que podrías implementar se encuentra en la plantilla de CMS de HubSpot. Tu hoja de estilo puede agregarse a la plantilla usando {{ require_css() }}.

​
Nota:

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

​
dnd_area

Un área de arrastrar y soltar es un contenedor 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. Los módulos en sí no pueden contener áreas de arrastrar y soltar. Para proporcionar a los creadores de contenido una interfaz para agregar contenido uniforme dentro de un módulo, utiliza en su lugar campos y grupos repetibles. Una etiqueta dnd_area puede contener los siguientes parámetros:
ParámetroTipoDescripción
classCadenaUna clase agregada al div envolvente de un dnd_area
labelCadenaSe utiliza en el editor para etiquetar el área en la barra lateral.
{% dnd_area "unique_name", class="main" %}

{% end_dnd_area %}
Las etiquetas dnd_area también pueden contener etiquetas dnd_section.

​
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 construidas 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.

​
dnd_section

Una {% dnd_section %} es una fila de nivel superior, y debe estar anidada dentro de una etiqueta {% dnd_area %}. Las secciones también pueden definirse como una plantilla y luego incluirse en una dnd_area, lo que las hace ideales para estructurar rápidamente una plantilla. Una etiqueta dnd_section puede contener los siguientes parámetros:
ParámetroTipoDescripción
background_colorDictUn dict que permite especificar un color de fondo. También se puede proporcionar como una cadena de texto.
background_imageDictUn dict que permite especificar una imagen de fondo.
background_linear_gradientDictUn dict que permite especificar un fondo gradiente lineal.
full_widthBooleanoUn booleano que determina si la sección está destinada a ser de ancho completo o limitada por un contenedor interior.
marginDictUn dict que permite especificar valores de margen en cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax y %. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado px.
max_widthEnteroUn valor en píxeles que establece el ancho máximo del contenido en un dict de envoltura.
paddingDictUn dict que permite especificar valores de relleno en cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax y %. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado px.
vertical_alignmentCadenaAlineación vertical del contenido secundario. Las opciones disponibles incluyen:
  • TOP
  • MIDDLE
  • BOTTOM

​
Nota:

Solo puede utilizar un parámetro de fondo por etiqueta dnd_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 %}
Las etiquetas dnd_section también pueden contener las siguientes etiquetas:
  • dnd_column
  • dnd_module

​
dnd_column

Un {% dnd_column %} es un bloque estructural vertical que ocupa una o más columnas de diseño definidas por su fila principal. Esta etiqueta HubL debe estar anidada dentro de una etiqueta{% dnd_area %}. Una etiqueta dnd_column puede contener los siguientes parámetros:
ParámetroTipoDescripción
background_colorDictUn dict que permite especificar un color de fondo.
background_imageDictUn dict que permite especificar una imagen de fondo.
background_linear_gradientDictUn dict que permite especificar un fondo gradiente lineal.
marginDictUn dict que permite especificar valores de margen en cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax y %. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado px.
max_widthEnteroUn valor en píxeles que establece el ancho máximo del contenido en un dict de envoltura.
paddingDictUn dict que permite especificar valores de relleno en cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax y %. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado px.
vertical_alignmentCadenaAlineación vertical del contenido secundario. Las opciones disponibles incluyen:
  • TOP
  • MIDDLE
  • BOTTOM

​
Nota:

Solo puedes utilizar un parámetro de fondo por etiqueta dnd_column.
{% dnd_column
offset=0,
width=12,
background_color={
r: 255,
g: 0,
b: 0,
a: 1
},
margin={
"top": "1em",
"bottom": "1em"
},
%}

{% end_dnd_column %}
Una etiqueta dnd_column también puede contener dnd_row.

​
dnd_row

Una {% dnd_row %} es un bloque estructural horizontal que crea una cuadricula de diseño anidada de 12 columnas en la que se pueden colocar columnas y módulos. Esta etiqueta HubL debe estar anidada dentro de una etiqueta{% dnd_area %}. Una etiqueta dnd_row puede incluir los siguientes parámetros:
ParámetroTipoDescripción
background_colorDictUn dict que permite especificar un color de fondo.
background_imageDictUn dict que permite especificar una imagen de fondo.
background_linear_gradientDictUn dict que permite especificar un fondo gradiente lineal.
marginDictUn dict que permite especificar valores de margen en cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax y %. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado px.
max_widthEnteroUn valor en píxeles que establece el ancho máximo del contenido en un dict de envoltura.
paddingDictUn dict que permite especificar valores de relleno en cm, mm, Q, in, pc, pt, px, em, ex, ch, rem, lh, vw, vh, vmin, vmax y %. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado px.
vertical_alignmentCadenaAlineación vertical del contenido secundario. Las opciones disponibles incluyen:
  • TOP
  • MIDDLE
  • BOTTOM

​
Nota:

Solo puedes utilizar un parámetro de fondo por etiqueta dnd_row.
{% dnd_row
background_color={
r: 123,
g: 123,
b: 123,
a: 1.0
},
margin={
"top": 20,
"bottom": 200
},
padding={
"top": 20,
"bottom": 200,
"left": 20,
"right": 20
}
%}

{% end_dnd_row %}
Las etiquetas dnd_row también pueden contener las siguientes etiquetas:
  • dnd_column
  • dnd_module

​
dnd_module

Un {% dnd_module %} es un módulo envuelto dentro de un div donde se puede agregar diseño, estilos y contenido. El módulo se especifica haciendo referencia a su ruta, que puede ser un módulo predeterminado de HubSpot (usando el espacio de nombres @hubspot/), o módulos que hayas construido, especificando su ruta dentro del árbol de archivos del administrador de diseño Esta etiqueta HubL debe estar anidada dentro de una etiqueta{% dnd_area %}. Una etiqueta dnd_module puede contener los siguientes parámetros:
ParámetroTipoDescripción
pathCadenaLa ruta a un módulo.
horizontal_alignmentCadenaEl posicionamiento horizontal, admite:LEFT, CENTER, RIGHT
offsetEnteroEl desplazamiento desde 0 en la cuadrícula de 12 columnas.
widthEnteroEl número de columnas que ocupan la cuadrícula de 12 columnas.
flexbox_positioningCadenaObsoleto, no utilizar. En su lugar, utiliza horizontal_alignment junto con la fila o sección vertical_alignment .
Valor de posición de Flexbox para el módulo. Admite una cadena que indica la posición vertical seguida de la horizontal:
  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
¿Tienes un módulo antiguo cuyo nombre de campo coincide con uno de los parámetros de dnd_module anteriores? Puedes pasar valores predeterminados a través de un parámetro de campos, como lo harías con un grupo de campos.
{% dnd_module
path="@hubspot/rich_text",
offset=0,
width=8,
%}
{% module_attribute "html" %}
<h1>Hello, world!</h1>
{% end_module_attribute %}
{% end_dnd_module %}

​
Fondo

Hay varias formas de establecer fondos en los elementos dnd de columna, sección y fila, background_image, background_linear_gradient y background_color.

​
background_color

Las etiquetas dnd de columna, sección y fila admiten colores de fondo. Puedes establecer el color de fondo predeterminado para un elemento de arrastrar y soltar utilizando background_color. Este parámetro es un parámetro basado en una cadena y puede incluir los siguientes formatos indicados en el ejemplo siguiente. 
{% dnd_section %}
  // Hex Value (both 3 and 6 char length)
  {% dnd_column background_color="#F7F7F7" %}
  {% end_dnd_column %}
  {% dnd_column background_color="#FFF" %}
  {% end_dnd_column %}
// Both RGB and RGBA
  {% dnd_column background_color="rgb(255,255,255)" %}
  {% end_dnd_column %}
  {% dnd_column background_color="rgba(0,0,0,.25)" %}
  {% end_dnd_column %}
{% end_dnd_section %}

​
background_linear_gradient

Los elementos dnd de columna, sección y fila admiten gradientes lineales de fondo. Puedes establecer un gradiente predeterminado utilizando el parámetro background_linear_gradient. El parámetro espera un dict. Actualmente solo admite dos paradas de color.
ParámetroTipoDescripción
directionCadenaLa dirección del gradiente.
  • to bottom
  • to top
  • to left
  • to right
colorsmatrizMatriz de cadenas de color. Actualmente admite 2 valores, el inicial y el final. Los valores se proporcionan como cadenas, y se admiten los siguientes formatos:
  • RGB
  • RGBA
  • 3 char hex
  • 6 char hex
  • 8 char hex
{% dnd_section
  background_linear_gradient={
    "direction": "to bottom",
    "colors": [
      "#1EB6C3",
      "#2A2859"
    ]
  }
  %}
  {% dnd_module path="@hubspot/rich_text" width="6" %}
  {% end_dnd_module %}
{% end_dnd_section %}

​
background_image

Los elementos dnd de columna, sección y fila admiten imágenes de fondo. Puedes proporcionar una imagen de fondo predeterminada utilizando el parámetro background_image que espera un dict.
ClaveTipoDescripción
backgroundPositionCadenaLa posición de fondo de la imagen. Admite una cadena que indica la posición vertical seguida de la horizontal.
  • TOP_LEFT
  • TOP_CENTER
  • TOP_RIGHT
  • MIDDLE_LEFT
  • MIDDLE_CENTER
  • MIDDLE_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_CENTER
  • BOTTOM_RIGHT
backgroundSizeCadenaLa propiedad de tamaño de fondo CSS utilizada para la imagen.
Los valores admitidos son:
  • cover
  • contain
  • auto
imageUrlCadenaURL absoluta de la imagen.
{% dnd_section
  background_image = {
      "backgroundPosition": "MIDDLE_CENTER",
      "backgroundSize": "cover",
      "imageUrl": "https://www.example.com/bg-image.jpg"
    },
%}
  {% dnd_module path="@hubspot/rich_text" width="6" %}
  {% end_dnd_module %}

{% end_dnd_section %}

​
Cómo se trasladan los parámetros de estilo de dnd a la página

Cuando utilizas parámetros basados en estilo, como los fondos, los márgenes o el relleno, los nombres de las clases se calculan automáticamente para las secciones, columnas, filas y módulos. Los valores de propiedad que has asignado se agregan a los nombres de clase creados automáticamente y el código CSS resultante se coloca antes de la etiqueta de cierre </body> en la página en una etiqueta <style>. Los estilos de arrastrar y soltar también pueden ser diferentes en distintos puntos de ruptura para ofrecer un aspecto responsivo.