Productos compatibles
Se requiere uno de los siguientes productos o productos de ediciones superiores.
Marketing HubMarketing HubPro
Content HubContent HubPro
Última modificación: 22 de agosto de 2025
Las áreas de arrastrar y soltar permiten a los desarrolladores crear secciones en las plantillas de correo personalizadas que admiten cambios en la disposición de los elementos, el diseño y el contenido directamente en el editor del correo. Esto permite a los desarrolladores crear unas pocas plantillas de correo con una estructura global, facilitando a los creadores de contenido la generación de múltiples páginas con distintos propósitos y diseños.
Nota: Las plantillas de correo personalizadas solo pueden tener un área de arrastrar y soltar.
1

Crear una nueva plantilla HTML

Crea una nueva plantilla HTML que incluya el HubL y el HTML que conformarán la sección de arrastrar y soltar:
  • En tu cuenta de HubSpot, navega a Contenido > Administrador de diseño.
  • En la barra lateral izquierda, crea un nuevo archivo haciendo clic en Archivo > Nuevo archivo.
  • En el cuadro de diálogo, haz clic en el menú desplegable ¿Qué te gustaría diseñar? y selecciona HTML y HubL.
  • Haz clic en Siguiente.
  • Haz clic en el menú desplegable Tipo de plantilla y luego selecciona Correo.
  • Escribe el nombre de la plantilla.
  • Para cambiar la ubicación de la plantilla, haz clic en Cambiar en Ubicación del archivo, y selecciona la nueva carpeta donde se creará la plantilla.
  • Haz clic en Crear.
2

Añadir etiquetas HubL al encabezado de la plantilla

Revisa las siguientes etiquetas necesarias y opcionales que puedes incluir en la sección <head> de tu plantilla de correo para agregar elementos de diseño y mejorar la compatibilidad:

​
Etiqueta necesaria

{{ dnd_area_stylesheet }}Esta etiqueta permite lo siguiente:
  • Añadir recursos audiovisuales asociados
  • Corregir problemas de diseño conocidos en Outlook
  • Restablecer los márgenes y los rellenos
  • Activar el Anti-aliasing
  • Añadir algo de CSS

​
Etiquetas opcionales

Para asegurarte de que la plantilla se muestra de forma consistente en los principales clientes de correo electrónico, también puedes incluir las siguientes etiquetas opcionales de HubL en la plantilla:
  • {{ email_header_includes }}: esta etiqueta insertará CSS en la plantilla, lo que facilita la renderización del diseño, la resolución de problemas comunes de estilo y la incorporación de metadatos al HTML del correo. Al analizar esta etiqueta HubL, el siguiente contenido se añadirá dentro del <head> del HTML del correo electrónico:
ParámetroDescripción
<meta name="x-apple-disable-message-reformatting">Evitar que el iOS 11 modifique la escala de los correos de manera automática
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Indica a los navegadores y clientes de correo la forma en que se espera que interpreten los distintos caracteres.
<meta http-equiv="X-UA-Compatible" content="IE=edge">Esta etiqueta habilita CSS3 y las solicitudes de recursos audiovisuales en Windows Phone 7.5, indica a Internet Explorer que renderice el contenido con la mayor calidad posible y permite al navegador elegir la versión de Internet Explorer con la que se debe renderizar el correo.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>Ajusta el área visible a la anchura de la pantalla del dispositivo, lo que facilita la recepción del correo.
  • {{ reset_css_stylesheet }}: incluir esta etiqueta solucionará varios problemas de diseño en Outlook, y también restablecerá los márgenes y rellenos del correo.
-{{ outlook_background_snippet }}: esta etiqueta ajustará la imagen o el color de fondo en Outlook, siempre que se haya especificado una regla CSS de fondo asociada
3

Crear un área de arrastrar y soltar

Después de añadir la etiqueta HubL {{ dnd_area_stylesheet }} y cualquier otra etiqueta opcional a la sección <head> de la plantilla, puedes configurar la sección dnd_area en el cuerpo de la plantilla.

​
Crear un área vacía 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 suministra el contenido predeterminado para el área de arrastrar y soltar.El área de arrastrar y soltar puede estar entre las etiquetas <div> o <table>. Una limitación del área de arrastrar y soltar es que la anchura mínima es de 624 píxeles y este valor no se puede cambiar.La etiqueta por sí sola generará una zona para que los creadores de contenido arrastren los módulos en el editor.Las líneas de código a continuación especificarían un área de arrastrar y soltar vacía:
{% dnd_area "main" %}
	<!-- generates an empty drag and drop area drop-section -->
{% end_dnd_area %}

​
Crear un área de arrastrar y soltar

También puedes personalizar el área de arrastrar y soltar para especificar secciones y columnas predeterminadas utilizando los campos dnd_section y dnd_column.Por ejemplo, el siguiente código HubL especificaría un área de arrastrar y soltar con 3 columnas:
{% dnd_area "main" %}
  {% dnd_section padding={'top': 25, 'bottom': '20} %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
    {% dnd_column width=4 %}
    {% end_dnd_column %}
  {% end_dnd_section %}
{% end_dnd_area %}
La etiqueta HubL dnd_row no es compatible actualmente con las plantillas de correo.
4

Añadir un área de arrastrar y soltar con módulos

Para rellenar la sección con contenido, se puede utilizar la etiqueta dnd_module para incluir un módulo haciendo referencia a su ruta. El módulo debe añadirse dentro de una sección y una columna para rellenar el área de arrastrar y soltar con contenido.En el siguiente ejemplo, se hace referencia a un módulo predeterminado de HubSpot, pero también es posible incluir módulos que hayas creado, especificando su ruta en el árbol de archivos de tus herramientas de diseño.Para especificar un valor predeterminado en el dnd_module, puedes utilizar la etiqueta module_attribute.
{% dnd_area "main", full_width=False %}
	{% dnd_section padding={
	            'top':'25',
	            'bottom':'20'
	            }, full_width=False %}
	  {% dnd_column width=6 %}
	    {% dnd_module path='@hubspot/image_email', img={
	                    'alt':'NavyLogo',
	                    'height':38,
	                    'src':'email_dnd_template_images/NavyLogo.png',
	                    'width':120
	                    }, alignment='center', hs_enable_module_padding=True, hs_wrapper_css={
	                    'padding-bottom':'10px',
	                    'padding-left':'20px',
	                    'padding-right':'20px',
	                    'padding-top':'10px'
	                    } %}
	    {% end_dnd_module %}
	  {% end_dnd_column %}
	  {% dnd_column width=6 %}
	  {% end_dnd_column %}
	{% end_dnd_section %}
{% end_dnd_area %}
5

Personaliza y crea el diseño de la plantilla de arrastrar y soltar

Cada etiqueta HubL de arrastrar y soltar (por ejemplo, dnd_area, dnd_section, dnd_column, etc.) incluye diferentes parámetros que puedes utilizar para definir un diseño predeterminado y especificar otros tipos de comportamientos, como la etiqueta que aparecerá en la barra lateral del editor de correo.Para saber más sobre los parámetros disponibles para cada etiqueta, consulta los enlaces que aparecen a continuación para cada una: