Skip to content

Crear un correo electrónico con arrastrar y soltar

Con el editor de arrastrar y soltar, puedes crear mensajes de correo electrónico completamente personalizados para Campaigns o Canvas, todo sin usar HTML para construir el cuerpo de tu correo electrónico.

Acerca del editor

El editor de arrastrar y soltar usa Contenido y Filas como los dos componentes clave para simplificar tu flujo de trabajo, sin necesidad de usar HTML adicional.

Contenido

Contenido incluye una serie de mosaicos que representan diferentes tipos de contenido que puedes usar en tu mensaje. Están organizados en tres categorías: básico, multimedia y avanzado.

Los bloques básicos son la base de tu correo electrónico. Con estos bloques, puedes añadir cualquiera de los siguientes elementos al cuerpo de tu correo electrónico:

  • Título
  • Párrafo
  • Lista
  • Botón
  • Divisor
  • Espaciador

Con los bloques multimedia, puedes añadir diferentes contenidos visuales como imágenes, videos, iconos y enlaces de redes sociales, e iconos personalizables.

Aunque el editor de arrastrar y soltar simplifica tu flujo de trabajo con estos bloques, también puedes usar bloques avanzados para insertar HTML o añadir un menú al cuerpo de tu correo electrónico. Ten en cuenta que usar tu propio HTML puede afectar cómo se renderiza el mensaje.

Filas

Las filas son unidades estructurales que definen la composición horizontal de una sección del mensaje mediante columnas. Puedes usar filas vacías o Content Blocks. Usar más de una columna te permite colocar diferentes elementos de contenido uno al lado del otro. De esta manera, puedes añadir todos los elementos estructurales que necesites a tu mensaje, independientemente de la plantilla que hayas seleccionado al comenzar.

Estilo de tarjetas

Estilo de tarjetas es una propiedad de fila que te permite añadir espaciado entre columnas y redondear sus esquinas. Con el formato de estilo de tarjetas, puedes crear diseños más atractivos visualmente para destacar tu contenido más importante, como nuevas características de productos, testimonios, ofertas especiales, novedades y más.

Uso del editor de arrastrar y soltar

¿No tienes claro si tu mensaje de correo electrónico debe enviarse mediante una campaña o un Canvas? Las campañas son mejores para envíos de mensajería únicos y dirigidos, mientras que los Canvas son mejores para recorridos de usuario de varios pasos.

Una vez que hayas seleccionado dónde construir tu mensaje, veamos los pasos para crear un correo electrónico con arrastrar y soltar.

Paso 1: Selecciona tu plantilla

Después de seleccionar el editor de arrastrar y soltar como tu experiencia de edición, puedes elegir:

  • Comenzar con una plantilla en blanco.
  • Usar una plantilla de correo electrónico de arrastrar y soltar prediseñada de Braze.
  • Usar una plantilla de correo electrónico de arrastrar y soltar guardada.

También puedes acceder a todas las plantillas desde la sección Plantillas.

Después de seleccionar tu plantilla, verás un resumen de tu correo electrónico en Variantes de correo electrónico que incluye la información de envío y el cuerpo del correo electrónico.

Luego, selecciona Editar cuerpo del correo electrónico para comenzar a diseñar la estructura del correo electrónico en el editor de arrastrar y soltar.

La sección «Variantes de correo electrónico» con un ejemplo de cuerpo de correo electrónico.

Paso 2: Construye tu correo electrónico

La experiencia de edición de arrastrar y soltar se divide en tres secciones: Configuración de envío, Contenido y Vista previa y prueba. La magia de construir el cuerpo de tu correo electrónico ocurre en la sección Contenido. Antes de construir tu correo electrónico, es importante entender los componentes clave que guían tu experiencia de creación de correos electrónicos. Si necesitas repasar, consulta Acerca del editor.

Cuando estés listo, usa los bloques de contenido de arrastrar y soltar para construir tu correo electrónico.

  1. Selecciona el panel Filas. Arrastra y suelta las configuraciones de filas en el editor principal. Esto definirá el diseño del contenido de tu correo electrónico.
    • Ten en cuenta que las nuevas configuraciones deben arrastrarse a la parte superior o inferior de una sección existente.
    • Cuando selecciones una configuración de fila, aparecerán los ajustes de Propiedades de fila para una mayor personalización de los colores de fondo de la fila, imágenes y tamaños de columna personalizados.
  2. Selecciona el panel Contenido. Arrastra y suelta los mosaicos de contenido deseados en los componentes de fila.
    • También puedes arrastrar cualquiera de los mosaicos de Contenido al editor principal. Esto crea una fila para el mosaico.
    • Puedes refinar aún más el mosaico seleccionándolo y ajustando los campos en Propiedades de contenido y Opciones de bloque. Esto incluye editar el espaciado entre letras, el relleno, la altura de línea y más.

Consulta Otras personalizaciones para conocer otras formas de personalizar aún más tu correo electrónico de arrastrar y soltar.

A medida que construyes tu correo electrónico, puedes alternar entre una vista de escritorio y una vista móvil para previsualizar cómo se verá tu mensaje de correo electrónico para tus grupos de usuarios. Esto verificará que tu contenido sea responsivo, y puedes hacer los ajustes necesarios sobre la marcha.

Paso 3: Añade tu información de envío

Una vez que hayas terminado de diseñar y construir tu mensaje de correo electrónico, es hora de añadir tu información de envío en la sección Configuración de envío.

  1. En Información de envío, selecciona un correo electrónico como Nombre para mostrar del remitente + Dirección. También puedes personalizar esto seleccionando Personalizar nombre para mostrar del remitente + Dirección.
  2. Selecciona un correo electrónico como Dirección de respuesta. También puedes personalizar esto seleccionando Personalizar dirección de respuesta.
  3. A continuación, selecciona un correo electrónico como Dirección CCO para hacer tu correo electrónico visible para esta dirección.
  4. Añade una línea del asunto a tu correo electrónico. Opcionalmente, también puedes añadir un preencabezado y un espacio en blanco después del preencabezado.

Una vista previa en el panel derecho se completará con la información de envío que hayas añadido. Esta información también se puede actualizar navegando a Configuración > Preferencias de correo electrónico > Configuración de envío.

Personalizar el encabezado de tu correo electrónico (avanzado)

En Configuración de envío, puedes añadir personalización para los encabezados del correo electrónico y extras del correo electrónico, lo que te permite enviar datos adicionales a otros proveedores de servicios de correo electrónico. Personalizar un encabezado de correo electrónico, como incluir el nombre del destinatario, también puede contribuir a la probabilidad de que tu correo electrónico sea abierto.

Paso 4: Prueba tu correo electrónico

Después de añadir tu información de envío, es hora de probar finalmente tu correo electrónico.

Ve a la sección Vista previa y prueba. Aquí tienes la opción de previsualizar tu correo electrónico como un usuario o enviar un mensaje de prueba. Esta sección también incluye Inbox Vision, que te permite verificar que tu correo electrónico se haya renderizado correctamente en diferentes clientes móviles y web.

Dado que puedes ver tres versiones diferentes del mismo correo electrónico en el editor real, en Inbox Vision y como un correo electrónico de prueba real, es importante alinear los detalles en todas tus plataformas.

Vista previa y envío de prueba

Bajo la pestaña Vista previa como usuario, puedes seleccionar los siguientes tipos de usuario para previsualizar tu mensaje.

  • Usuario aleatorio: Braze seleccionará aleatoriamente un usuario de la base de datos y previsualizará el correo electrónico basándose en sus atributos o información de eventos.
  • Seleccionar usuario: Puedes seleccionar un usuario específico basándote en su dirección de correo electrónico o ID externo. El correo electrónico se previsualizará basándose en los atributos e información de eventos de ese usuario.
  • Usuario personalizado: Puedes personalizar un usuario. Braze ofrecerá campos de entrada para todos los atributos y eventos disponibles. Puedes introducir cualquier información que desees ver en el correo electrónico de vista previa.

También puedes seleccionar Copiar enlace de vista previa para generar y copiar un enlace de vista previa compartible que muestre cómo se verá el correo electrónico para un usuario aleatorio. El enlace durará siete días antes de que necesite ser regenerado.

Ten en cuenta que cualquier edición realizada en una plantilla de correo electrónico no se reflejará en un enlace generado previamente. Necesitarás generar un nuevo enlace de vista previa para ver cualquier edición.

Vista previa de correo electrónico con un botón para «Copiar enlace de vista previa» y copiar el enlace generado.

Usar Inbox Vision

Inbox Vision te permite ver tus campañas de correo electrónico desde la perspectiva de los clientes de correo electrónico y dispositivos móviles. Para probar tu mensaje de correo electrónico usando Inbox Vision, selecciona Inbox Vision en la sección Vista previa y prueba y selecciona Ejecutar Inbox Vision.

Es importante probar y verificar los detalles más finos de tu mensaje de correo electrónico. Por ejemplo, las imágenes de fondo en los mensajes de correo electrónico a veces pueden causar que aparezcan líneas blancas o desconexiones entre imágenes, o clientes como Windows Outlook pueden no mostrar imágenes de fondo. Usar Inbox Vision puede ayudar a identificar estas discrepancias entre clientes. En este escenario, establece un color de fondo alternativo para que estas imágenes se rendericen como se espera.

Para más información, consulta Enviar mensajes de prueba.

Después de usar el editor de arrastrar y soltar para diseñar y crear tu mensaje de correo electrónico, continúa construyendo el resto de tu campaña o Canvas.

Acerca del motor HTML actualizado

El motor subyacente que produce HTML a partir del editor de arrastrar y soltar ha sido optimizado y actualizado, lo que resulta en beneficios relacionados con la compresión de archivos HTML y el renderizado.

El tamaño promedio de los datos HTML exportados se ha reducido, lo que lleva a una carga y renderizado más rápidos, menor recorte en dispositivos móviles y menor consumo de ancho de banda.

El renderizado HTML ha mejorado gracias a las siguientes actualizaciones que minimizan el número de comentarios condicionales y consultas de medios CSS. Como resultado, los archivos HTML son más pequeños y están codificados de manera más eficiente.

  • Migración de un diseño basado en elementos <div> a una base de código con formato estándar <table>
  • Los bloques de editor han sido recodificados para mayor concisión
  • El código HTML final se comprime para eliminar espacios en blanco entre etiquetas
  • Los divisores transparentes se convierten automáticamente en relleno de contenido

Otras personalizaciones

A medida que continúas construyendo correos electrónicos de arrastrar y soltar, puedes personalizar aún más cada cuerpo de correo electrónico usando una combinación de estos detalles creativos para captar la atención e interés de tu audiencia en tu mensaje.

Imágenes con ancho automático

Las imágenes añadidas a tu correo electrónico se configurarán automáticamente en Ancho automático. Para ajustar esta configuración, desactiva Ancho automático y ajusta el porcentaje de ancho según sea necesario.

Opción de ancho automático en la pestaña Contenido del editor de arrastrar y soltar.

Capas de color

Usando capas de color, puedes cambiar el color del fondo del correo electrónico, el área de contenido y los diferentes componentes de contenido. El orden de color de adelante hacia atrás es: color del componente de contenido, color de fondo del área de contenido y color de fondo.

Ejemplo de las capas de color en el editor de arrastrar y soltar.

Relleno de contenido

Opciones de bloque para el editor de arrastrar y soltar.

Para ajustar el relleno, desplázate hacia abajo hasta Opciones de bloque y selecciona Más opciones. Puedes ajustar con precisión tu relleno para que tu correo electrónico se vea perfecto.

Fondo de contenido

Puedes añadir una imagen de fondo a la configuración de tu fila, lo que te permite incorporar más diseño y contenido visual en tu campaña de correo electrónico.

Atributo de idioma

Puedes configurar el atributo de idioma yendo a la pestaña Configuración y seleccionando el idioma deseado. También puedes apuntar al atributo de usuario {{${language}}} si el mensaje está destinado a usuarios con valores de idioma dinámicos.

Configuración del valor de «Idioma» para un correo electrónico.

Personalización

Opciones para añadir personalización en el editor de arrastrar y soltar.

Liquid básico es compatible con el editor de correo electrónico de arrastrar y soltar. Para añadir personalización a tu correo electrónico:

  1. Selecciona Personalización en la sección Contenido.
  2. Selecciona el tipo de personalización. Esto incluye atributos predeterminados (estándar), atributos de dispositivo, atributos personalizados y más.
  3. Busca el atributo que deseas añadir.
  4. Copia el fragmento de código Liquid generado y pégalo en el cuerpo de tu correo electrónico.

La personalización con Liquid no es compatible con los bloques de imagen ni con los campos de tipo de enlace de botón.

Imágenes dinámicas

Puedes elegir incluir imágenes dinámicas en tu mensajería de correo electrónico incluyendo Contenido conectado o Liquid en el atributo de origen de tu imagen. Por ejemplo, en lugar de una imagen estática, puedes insertar https://example.com/images/?imageBanner={{first_name}} como la URL de la imagen para incluir el nombre del usuario en la imagen. Esto ayuda a personalizar tus correos electrónicos para cada usuario.

Dirección del texto

Al redactar tu mensaje, puedes alternar la dirección del texto entre izquierda a derecha y derecha a izquierda seleccionando el botón correspondiente de Dirección del texto. Puedes usar esta opción al crear mensajes en idiomas como árabe y hebreo.

Menú del editor de arrastrar y soltar de correo electrónico con botón para alternar la alineación del texto entre derecha a izquierda e izquierda a derecha.

La apariencia final de los mensajes de derecha a izquierda depende en gran medida de cómo los proveedores de servicios los renderizan. Para conocer las mejores prácticas sobre cómo crear mensajes de derecha a izquierda que se muestren con la mayor precisión posible, consulta Crear mensajes de derecha a izquierda.

HTML

Atributos HTML para enlaces

La sección «Atributos» con el atributo «clicktracking» desactivado para un enlace.

Al usar enlaces, botones, imágenes y videos en el editor de arrastrar y soltar, selecciona Añadir nuevo atributo en Atributos en la sección Contenido para añadir información adicional a las etiquetas HTML en los correos electrónicos. Esto puede ser especialmente útil para la personalización de mensajes, la segmentación y el estilo.

Un caso de uso común es insertar un atributo en tu etiqueta de anclaje para desactivar el seguimiento de clics al enviar a través de Braze.

  • SendGrid: clicktracking = "off"
  • SparkPost: data-msys-clicktrack = "0"

Otro caso de uso común es marcar enlaces específicos como enlaces universales. Los enlaces universales son enlaces que redirigen a tu aplicación, brindando a tus usuarios una experiencia integrada.

  • SendGrid: universal = "true"
  • SparkPost: data-msys-sublink = "open-in-app" (se debe configurar una subruta personalizada)

Para configurar enlaces universales, consulta Enlaces universales y App Links.

Alternativamente, puedes integrarte con uno de nuestros socios de atribución, como Branch o AppsFlyer, para gestionar enlaces universales.

Por último, hay atributos predefinidos disponibles para ayudar a que tu mensaje sea accesible. Obtén más información en nuestro artículo dedicado Crear mensajes accesibles en Braze.

Etiquetas head personalizadas

Usa etiquetas <head> para añadir CSS y metadatos en tu mensaje de correo electrónico. Por ejemplo, puedes usar estas etiquetas para añadir una hoja de estilos o un favicon. Liquid es compatible con las etiquetas <head>.

Todo lo que se añada fuera de las etiquetas <head> se añadirá después de la etiqueta <body> en tu correo electrónico. Esto significa que el contenido añadido se mostrará en el correo electrónico.

Etiquetas y atributos permitidos por etiqueta
New Stuff!