> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.es/docs/llms.txt > Use this file to discover all available pages before exploring further. # Etiquetas HubL del área de arrastrar y soltar > Las etiquetas HubL se utilizan para construir áreas de arrastrar y soltar que permiten a los desarrolladores crear secciones de páginas que admiten cambios de diseño, estilos y de contenido directamente dentro de los editores de contenido. [Las áreas de arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview) 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](/cms/start-building/building-blocks/drag-and-drop/tutorial) 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](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css). Tu hoja de estilo puede agregarse a la plantilla usando [`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css). ### Nota: Las áreas de arrastrar y soltar no se pueden utilizar en [publicaciones de blog](/cms/start-building/building-blocks/templates/blog) ni [plantillas de correo electrónico](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview#email) en este momento. ## dnd\_area Un [área de arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview) 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](/cms/reference/fields/module-theme-fields#repeaters). Una etiqueta `dnd_area` puede contener los siguientes parámetros: | Parámetro | Tipo | Descripción | | --------- | ------ | ------------------------------------------------------------------- | | `class` | Cadena | Una clase agregada al div envolvente de un dnd\_area | | `label` | Cadena | Se utiliza en el editor para etiquetar el área en la barra lateral. | ```text entrada.txt theme={null} {% dnd_area "unique_name", class="main" %} {% end_dnd_area %} ``` ```text salida.txt theme={null}
``` 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](/cms/reference/hubl/tags/dnd-areas). * 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 %}`](/cms/start-building/building-blocks/sections/sections) 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](/cms/start-building/building-blocks/sections/sections#section-templates) y luego [incluirse](/cms/start-building/building-blocks/sections/sections#section-context) 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ámetro | Tipo | Descripción | | ---------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `background_color` | Dict | Un dict que permite especificar un [color de fondo](#background-color). También se puede proporcionar como una cadena de texto. | | `background_image` | Dict | Un dict que permite especificar una [imagen de fondo](#background-image). | | `background_linear_gradient` | Dict | Un dict que permite especificar un [fondo gradiente lineal](#background-linear-gradient). | | `full_width` | Booleano | Un booleano que determina si la sección está destinada a ser de ancho completo o limitada por un contenedor interior. | | `margin` | Dict | Un 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_width` | Entero | Un valor en píxeles que establece el ancho máximo del contenido en un dict de envoltura. | | `padding` | Dict | Un 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_alignment` | Cadena | Alineación vertical del contenido secundario. Las opciones disponibles incluyen:
| ### Nota: Solo puede utilizar un parámetro de fondo por etiqueta `dnd_section`. ```text entrada.txt theme={null} {% 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 %} ``` ```text salida.txt theme={null}
``` Las etiquetas `dnd_section` también pueden contener las siguientes etiquetas: * `dnd_column` * `dnd_module` ## dnd\_column Un [`{% dnd_column %}`](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview#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ámetro | Tipo | Descripción | | ---------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `background_color` | Dict | Un dict que permite especificar un [color de fondo](#background-color). | | `background_image` | Dict | Un dict que permite especificar una [imagen de fondo](#background-image). | | `background_linear_gradient` | Dict | Un dict que permite especificar un [fondo gradiente lineal](#background-linear-gradient). | | `margin` | Dict | Un 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_width` | Entero | Un valor en píxeles que establece el ancho máximo del contenido en un dict de envoltura. | | `padding` | Dict | Un 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_alignment` | Cadena | Alineación vertical del contenido secundario. Las opciones disponibles incluyen:
| ### Nota: Solo puedes utilizar un parámetro de fondo por etiqueta `dnd_column`. ```text entrada.txt theme={null} {% dnd_column offset=0, width=12, background_color={ r: 255, g: 0, b: 0, a: 1 }, margin={ "top": "1em", "bottom": "1em" }, %} {% end_dnd_column %} ``` ```text salida.txt theme={null}
``` Una etiqueta `dnd_column` también puede contener `dnd_row`. ## dnd\_row Una [`{% dnd_row %}`](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview#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ámetro | Tipo | Descripción | | ---------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `background_color` | Dict | Un dict que permite especificar un [color de fondo](#background-color). | | `background_image` | Dict | Un dict que permite especificar una [imagen de fondo](#background-image). | | `background_linear_gradient` | Dict | Un dict que permite especificar un [fondo gradiente lineal](#background-linear-gradient). | | `margin` | Dict | Un 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_width` | Entero | Un valor en píxeles que establece el ancho máximo del contenido en un dict de envoltura. | | `padding` | Dict | Un 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_alignment` | Cadena | Alineación vertical del contenido secundario. Las opciones disponibles incluyen:
| ### Nota: Solo puedes utilizar un parámetro de fondo por etiqueta `dnd_row`. ```text entrada.txt theme={null} {% 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 %} ``` ```text salida.txt theme={null}
``` Las etiquetas dnd\_row también pueden contener las siguientes etiquetas: * `dnd_column` * `dnd_module` ## dnd\_module Un [`{% dnd_module %}`](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview#module) es un [módulo](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview) 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ámetro | Tipo | Descripción | | ---------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `path` | Cadena | La ruta a un módulo. | | `horizontal_alignment` | Cadena | El posicionamiento horizontal, admite:`LEFT`, `CENTER`, `RIGHT` | | `offset` | Entero | El desplazamiento desde 0 en la cuadrícula de 12 columnas. | | `width` | Entero | El número de columnas que ocupan la cuadrícula de 12 columnas. | | `flexbox_positioning` | Cadena | **Obsoleto, 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: | ¿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](/cms/reference/modules/using-modules-in-templates#passing-fields-that-have-dnd-associated-parameters), como lo harías con un grupo de campos. ```text entrada.txt theme={null} {% dnd_module path="@hubspot/rich_text", offset=0, width=8, %} {% module_attribute "html" %}

Hello, world!

{% end_module_attribute %} {% end_dnd_module %} ``` ```text salida.txt theme={null}

Hello, world!
``` ## Fondo Hay varias formas de establecer fondos en los elementos dnd de columna, sección y fila, [`background_image`](#background-image), [`background_linear_gradient`](#background-linear-gradient) y [`background_color`](#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. ```hubl theme={null} {% 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ámetro | Tipo | Descripción | | ----------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `direction` | Cadena | La dirección del gradiente. | | `colors` | matriz | Matriz 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: | ```hubl theme={null} {% 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. | Clave | Tipo | Descripción | | -------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `backgroundPosition` | Cadena | La posición de fondo de la imagen. Admite una cadena que indica la posición vertical seguida de la horizontal. | | `backgroundSize` | Cadena | La propiedad de tamaño de fondo CSS utilizada para la imagen.
Los valores admitidos son: | | `imageUrl` | Cadena | URL absoluta de la imagen. | ```hubl theme={null} {% 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](#background), 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 `` en la página en una etiqueta `