Descripción general del editor de email Drag and Drop

El editor de email de Brevo con función de arrastrar y soltar facilita la creación de emails profesionales y ¡¡sin necesidad de programar! Tanto si empiezas desde cero como si eliges una plantilla ya hecha, personaliza los diseños fácilmente desde el primer paso cuando crees campañas o plantillas. Personaliza el email con contenido dinámico como datos de contacto o historial de compras a fin de perfilar una experiencia personalizada para el destinatario.

Descubre el editor de email Drag and Drop y conoce más sobre sus diferentes secciones:

🎨 Email canvas (Lienzos de email)

⬅️ Left navigation panel (Panel de navegación izquierdo)

🗄️ Content (Contenido)

🖌️ Style (Estilo)

⬆️ Top navigation bar (Barra de navegación superior)
DDE_email-editor_en-us.png

🧑‍💻 Acceso al editor de email Drag and Drop

Para empezar a diseñar con el editor de email Drag and Drop:

  1. Crea una campaña de email o plantilla de email y configúrala. 
  2. Accede al paso Design (Diseño) para seleccionar una plantilla de email a fin de empezar.
  3. Dependiendo de si estás creando una plantilla de email o campaña, el procedimiento varía:
    Campaña de emailPlantilla de email
    Haz clic en Start designing (Empezar a diseñar) y:
    1. Navega por Your emails (Tus emails) y las categorías de Pre-built templates (Plantillas preconfiguradas) para seleccionar una plantilla de email prediseñada para empezar, o
    2. Haz clic en Start from scratch > Drag and drop editor (Empieza desde cero > Editor de arrastrar y soltar) para empezar con un diseño en blanco.

    email_choose-template-modal_en-us.png

Se abre el editor de email Drag and Drop, donde puedes diseñar tu email con una interfaz sencilla y sin código. La próxima vez, podrás elegir tu propia plantilla de email y la campaña anterior para empezar desde la misma página. Utiliza tu email diseñado con el editor de email Drag and Drop en tu campaña, automatizaciones y conversaciones. 

🎨 Email canvas (Lienzos de email)

El lienzo de email es el espacio de trabajo principal donde diseñas tu email y lo llenas de contenido. Solo tienes que eliminar elementos desde el panel de navegación izquierdo y configurarlos para que tu email cobre vida y lo puedas personalizar sin necesidad de código. Disfruta de una vista visual en tiempo real de tu email mientras lo construyes: ¡lo que ves es lo que obtienes!

dde_canvas_en-us.png

➡️ Para saber más sobre cómo rellenar tu lienzo de email, consulta nuestra sección dedicada Drag & Drop Email editor (Editor de email Drag and Drop).

⬅️ Menú de navegación izquierdo

La barra lateral izquierda es el centro de control para crear y diseñar tu email. Está dividido en tres pestañas principales—Content (Contenido), Style (Estilo) y Aura AI—cada una diseñada para guiarte en una parte específica de tu proceso de creación de emails. Desde arrastrar bloques de contenido hasta aplicar estilos globales y generar texto con IA, todo empieza aquí.

dde_left-side-bar_en-us.png

➡️ Para saber más sobre las diferentes pestañas, consulta nuestras secciones dedicadas a continuación para Content (Contenido), Style (Estilo) y Aura AI.

🗄️ Content (Contenido)

La pestaña de Content es donde encontrarás todos los elementos básicos de tu email. Puedes arrastrar y soltar elementos como texto, imágenes, botones, enlaces a redes sociales, divisores y secciones enteras directamente en los lienzo de email. Estos componentes son la base de la estructura y el mensaje de tu email.

💡 Información relevante
Una sección define la estructura (disposición de filas o columnas), mientras que un bloque de contenido contiene el contenido real (texto o medios).
🧱 Blocks (Bloques)🧑‍🎨 Sections (Secciones)💾 Saved (Guardado)
DDE_blocks_en-us.png Los bloques de contenido son diferentes tipos de contenido que puedes añadir a tus emails. Puedes arrastrar y soltar los bloques de contenido hacia los bloques de estilo.

Los bloques de contenido disponibles son: 

🔡 Title (Título) y Text (Texto)

DDE_title-content-block_EN-US.jpg

Title (Título)

DDE_text-content-block_EN-US.jpg

Text (Texto)

Los bloques Title (Título) y Text (Texto) te permiten añadir contenido escrito al email:

  • Title (Título) para encabezados llamativos que organizan el formato.
  • Text (Texto) para el contenido del cuerpo, como descripciones o textos promocionales.

Ambos ofrecen opciones de formato (estilo de fuente, tamaño, color, alineación y enlace) para mantener un mensaje claro y acorde a la marca.

➡️ Para saber más sobre los bloques de contenido Title (Título) y Text (Texto), consulta nuestro artículo dedicado Acerca de los bloques de contenido Title (Título) y Text (Texto)

🏞️ Image (Imagen)

DDE_image-content-block_EN-US.jpg

Image (Imagen)

El bloque Image (Imagen) te permite añadir elementos visuales al email, como fotos de eventos, iconos e ilustraciones. Puedes insertar tus propias imágenes, elegir entre nuestro stock integrado y la galería GIF, o incluso crear imágenes personalizadas directamente desde el editor. Ajusta fácilmente la alineación, el tamaño, el texto alternativo y añade enlaces para que tus imágenes sean atractivas y funcionales.

➡️ Para saber más sobre el bloque de contenido Image (Imagen) , consulta nuestros artículos dedicados Inserta y edita imágenes en tus diseños de email y Agrega y administra imágenes en la biblioteca de contenido.

🎥 Video (Vídeo)

DDE_video-content-block_en-us.png

Video (Vídeo)

El bloque Video (Vídeo) te permite añadir una miniatura de vídeo vinculada a un vídeo alojado (por ejemplo, en YouTube o Vimeo). Dado que la mayoría de los clientes de email no soportan reproducción de vídeo incrustada, hacer clic en la miniatura redirigirá al destinatario al vídeo en su plataforma original. Puedes personalizar la imagen en miniatura, el estilo del botón de reproducir y la URL del enlace para aumentar la interacción.

➡️ Para saber más sobre el bloque de contenido de vídeo, consulta nuestro artículo dedicado Insertar vídeos en mi campaña de email

🖱️ Button (Botón)

DDE_social-content-block_EN-US.jpg

Button (Botón)

El bloque Button te permite añadir una llamada a la acción (CTA) clara al email, como Shop Now (Compra ahora), (Register) Regístrate o Learn More (Aprende más). Puedes personalizar el texto, los colores, el tamaño, la alineación y el destino del enlace para que coincidan con tu diseño y dirijan los clics.

➡️ Para saber más sobre el bloque de contenido Button, consulta nuestro(s) artículo(s) dedicado(s) Inserta una llamada a la acción (CTA) efectiva en tus diseños de email (botón). 

🛢️ Dynamic content (Contenido dinámico)

dde_dynamic-content-block_en-us.png

Dynamic content (Contenido dinámico)

El bloque Dynamic content (Contenido dinámico) te permite usar un solo diseño de email para crear múltiples emails personalizados para cada destinatario a fin de que parezcan conversaciones personales. Por ejemplo, crea un único formato de email de confirmación de pedido que se completará automáticamente con la información del destinatario en el momento del envío, como el total de su pedido y la lista de productos comprados.

➡️ Para saber más sobre cómo usar el bloque Dynamic content (Contenido dinámico), consulta nuestro artículo dedicado Explicación sobre el bloque de contenido dinámico (feed de datos y datos de eventos). 

🎨 Logo (Logotipo)

DDE_html-content-block_EN-US.jpg

Logo (Logotipo)

El bloque Logo (Logotipo) te permite insertar el logo de tu marca en el email, normalmente situado en la parte superior. Esto garantiza que el destinatario pueda reconocer al instante de quién es el mensaje con lo que se refuerza la identidad de tu marca y se aumenta la confianza. Puedes ajustar el tamaño y la alineación del logo para adaptarlos al formato.

➡️ Para saber más sobre cómo usar el bloque de contenido Logo, consulta nuestro artículo dedicado Guarda los recursos de tu marca en la biblioteca de marca

📱 Social (Redes sociales)

DDE_payment-content-block_EN-US.jpg

Social (Redes sociales)

El bloque Social te permite añadir iconos que al hacer clic en ellos se conectan a las páginas de redes sociales de tu empresa (como Facebook, Instagram, LinkedIn, Twitter, etc.). Personaliza su estilo, tamaño, alineación y color para que coincidan con tu marca y fomentar así la interacción entre plataformas. 

➡️ Para saber más sobre cómo usar el bloque Social (Redes sociales), consulta nuestro artículo dedicado Guarda los recursos de tu marca en la biblioteca de marca

</> HTML [Avanzado]

DDE_style1-content-block_EN-US.jpg

HTML

El bloque HTML te permite ir más allá de los elementos para arrastrar y soltar e incrusta un código de HTML personalizado directamente en el diseño de tu email. Esto es perfecto para añadir diseños personalizados, widgets incrustados, temporizadores de cuenta atrás o integrarse con herramientas de terceros que proporcionan código incrustado. Con algunos clientes de email no hay compatibilidad con todos los HTML elementos.

➡️ Para saber más sobre el bloque de contenido HTML, consulta nuestro artículo dedicado Limitaciones al usar HTML para tus campaña de email.

➗ Divider (Divisor)

DDE_divider-content-block_EN-US.jpg

Divider (Divisor)

El bloque Divider (Divisor) te permite insertar una línea horizontal para separar visualmente el contenido dentro de tu email. Esto ayuda a organizar secciones, crear espacio y facilitar la lectura del mensaje. Puedes personalizar el grosor, estilo, color y anchura de la línea.

➡️ Para saber más sobre el bloque de contenido Divider (Divisor) , consulta nuestra sección dedicada Secciones visualmente separadas con una línea

🛒 Product (Producto)

DDE_social-content-block_EN-US.jpg

Product (Producto)

El bloque Product te permite mostrar productos de tu tienda online, sin necesidad de copiarlos. Cree emails de marca que muestren sus productos exactamente como aparecen en su sitio web.

➡️ Para obtener más información sobre el bloque contenido Product (Producto), consulta nuestro artículo dedicado Insertar productos de tu tienda online en tus emails con el bloque de producto

⛵️ Navigation (Anchor and relative links) (Navegación (anclaje y enlaces relativos))

DDE_navigation-content-block_EN-US.jpg

Navigation (Navegación)

El bloque Navigation te permite crear enlaces anclaje que permiten al destinatario saltar a secciones específicas dentro de un email largo. Esto es especialmente útil para emails ricos en contenido, como newsletter, menús o catálogos de productos. Puedes aplicar estilo a los enlaces como una barra de navegación web. 

➡️ Para saber más sobre el bloque de contenido Navigation, consulta nuestro(s) artículo(s) dedicado(s). Añade un índice y un enlace de anclaje en tu email

↔️ Spacer (Espaciador)

DDE_spacer-content-block_EN-US.jpg

Spacer (Espaciador)

El bloque Spacer (Espaciador) te permite insertar espacios en blanco entre bloques de contenido para mejorar el formato y el flujo visual de tu email. Úsalo para separar secciones, evitar que los elementos parezcan amontonados o alinear el contenido con precisión. Puedes ajustar la altura del separador para que se ajuste al espacio deseado.

🖌️ Style (Estilo)

dde_style_en-us.png

La pestaña Style (Estilo) te permite definir el aspecto general y la disposición de email. Desde la configuración de estilos de fuentes y colores de fondo hasta el ajuste de espaciado, relleno y estructuras de columnas, esta pestaña controla el aspecto visual de tu email y garantiza la coherencia del diseño en todo momento.

➡️ Para saber más sobre la pestaña Style (Estilo), consulta nuestro artículo dedicado Cómo configurar el estilo de tus emails.

⬆️ Menú de navegación superior

La barra de navegación superior ofrece acceso rápido a herramientas esenciales que te ayudan a gestionar, tener una visualización previa y adaptar el diseño de tu email. Desde aquí, puedes volver a la configuración de tu plantilla o campaña, deshacer cambios, cambiar entre vistas de dispositivos, probar el email y mucho más, ¡todo en un solo lugar!

dde_top-bar_en-us.png

  1. Icono de Brevo 
    Pasa el cursor sobre el icono de Brevo y clicado para volver a tu campaña de email o creación de plantillas.
  2. Nombre del diseño de email 
    Haz clic en el nombre del email para renombrarlo. 
  3. Cancelar o restaurar acciones y último guardado
    Cancela (Ctrl o ⌘ + Z) o restaura ( + Ctrl o ⌘ + Z) una acción que simplemente hayas realizado en el diseño de tu email. También puedes acceder a la versión anterior de tu diseño y restaurarlo haciendo clic en last saved (último guardado)
  4. Vista previa para escritorio y móvil 
    Cambia de la vista de escritorio a la de móvil para adaptar el diseño de tu email a todos los tamaños de pantalla. 
    ➡️ Para saber más sobre la vista móvil, consulta nuestro artículo dedicado Optimizar el diseño del email para dispositivos móviles (adaptado a dispositivos móviles). 
  5. Vista previa & test 
    Vista previa del diseño de email como destinatario o en diferentes clientes de email, o enviar un email de prueba para asegurarte de que el email se visualiza como se espera en tu bandeja de entrada de destinatarios. ➡️ Para obtener más información sobre cómo ver previa y probar tu email, consulta nuestro artículo dedicado Previsualizar y probar la campaña de email.
  6. Guardar y salir 
    Guarda tu diseño y vuelve a la campaña de email o creación de plantillas. 
  7. Más acciones 
    Biblioteca de marcas

    Tarda menos en crear tus emails guardando tus recursos de marca en la Brand (Biblioteca) library (de marca). Una vez configurado, todas las nuevas plantillas seleccionadas heredarán las propiedades de tu marca, como el logo, los colores, las fuentes y los enlaces de las redes sociales.

    ➡️ Para saber más sobre la biblioteca de marcas, consulta nuestro artículo dedicado Cómo diseñar automáticamente emails con los activos de la imagen de marca a través de la Brand Library (Biblioteca de marca).

    Modo desarrollador
    ❗️ Importante
    Esta opción solo está disponible si contacta con el equipo de asistencia para activar el Modo desarrollador en el editor Drag and Drop.

    Utiliza esta función para profundizar más en la personalización de tu diseño de email usando código. 

    ➡️ Para saber más sobre el modo desarrollador, consulta nuestro artículo dedicado Utilizar el modo desarrollador para la personalización avanzada de los diseños de email.

    Atajos de teclado

    Aprende los atajos de teclado que puede usar en el editor para trabajar más fácilmente y ahorrar tiempo al diseñar sus campañas de email.

    Guardar

    Haga clic en Save (Guardar) para guardar manualmente tus cambios. Brevo guarda automáticamente el diseño cada minuto.

    Guardar como plantilla

    Guarda el diseño de tu email como plantilla para volver a utilizarlo en futuras comunicaciones. Las plantillas guardadas puedes encontrarlas en Marketing > Templates (Plantillas) > Email. A partir de ahí, podrás definir su Configuración, editarlas si es necesario y activarlas.

    ➡️ Para saber más sobre plantillas de email, consulta nuestro artículo dedicado ¿Dónde puedo usar mi plantilla de email? (Campañas, Automatizaciones y Transaccional).

    Guardar como PDF

    Guarda el diseño de la campaña de email como archivo PDF para imprimirlo o compartirlo con otras personas.

⏭️ ¿Qué es lo siguiente? 

🤔 ¿Tiene alguna duda?

Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro equipo de asistencia mediante la creación de un ticket desde su cuenta. Si todavía no tiene una cuenta, puede ponerse en contacto con nosotros aquí.

Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con la agencia partner de Brevo adecuada.

💬 ¿Fue útil este artículo?

Usuarios a los que les pareció útil: 17 de 59