Crea un correo electrónico con la función de arrastrar y soltar.

Utilizando el editor de arrastrar y soltar, puedes crear mensajes de correo electrónico completamente personalizados para campañas o Lienzos, todo ello sin utilizar HTML para construir el cuerpo de tu correo electrónico.

Sobre el editor

El editor de arrastrar y soltar utiliza Contenido y Filas como los dos componentes clave para simplificar su flujo de trabajo, sin uso adicional de HTML.

Contenido	Filas

Contenido

Contenido incluye una serie de mosaicos que representan diferentes tipos de contenido que puede utilizar en su mensaje. Están organizados en tres categorías: básicos, medios y avanzados.

• basic
• media
• advanced

Filas

Las filas son unidades estructurales que definen la composición horizontal de una sección del mensaje mediante columnas. Puede vaciar filas o bloques de contenido. El uso de más de una columna permite colocar diferentes elementos de contenido uno al lado del otro. De esta forma, puedes añadir todos los elementos estructurales que necesites a tu mensaje, independientemente de la plantilla que hayas seleccionado al empezar.

Estilo de tarjetas

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

Utilizar el editor de arrastrar y soltar

¿No estás seguro de si tu mensaje debe enviarse mediante una campaña o un Canvas? Las campañas son más adecuadas para campañas de mensajería única y específica, mientras que los lienzos son más adecuados para recorridos de usuarios de varios pasos.

Después de haber seleccionado dónde construir tu mensaje, vamos a sumergirnos en los pasos para crear un correo electrónico arrastrando y soltando.

Paso 1: Selecciona tu plantilla

Después de seleccionar el editor de arrastrar y soltar como su experiencia de edición, puede optar por:

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

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

Una vez seleccionada la plantilla, verá un resumen de su correo electrónico en Variantes de correo electrónico, que incluye la información de envío y el cuerpo del mensaje.

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

Paso 2: Crea tu correo electrónico

La experiencia de edición mediante arrastrar y soltar se divide en tres secciones: Envío de configuración, contenido y vista previa&. Prueba. La magia de construir el cuerpo de su correo electrónico ocurre en la sección Contenido. Antes de crear su correo electrónico, es importante entender los componentes clave que guían su experiencia de creación de correo electrónico. Si necesitas revisar, consulta Acerca del editor.

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

1. Seleccione el panel Filas. Arrastre y suelte las configuraciones de las filas en el editor principal. Esto mapeará el diseño del contenido de tu correo electrónico.
   • Tenga en cuenta que las nuevas configuraciones deben arrastrarse a la parte superior o inferior de una sección existente.
   • Cuando seleccionas una configuración de fila, aparece la configuración de Propiedades de fila para personalizar aún más los colores de fondo de las filas, las imágenes y los tamaños de columna personalizados.
2. Seleccione el panel Contenido. Arrastre y suelte los mosaicos de contenido que desee en los componentes de la fila.
   • También puede arrastrar cualquiera de los mosaicos de contenido al editor principal. Esto crea una fila para el mosaico.
   • Puede refinar aún más el mosaico seleccionándolo y ajustando los campos en Propiedades de contenido y Opciones de bloque. Esto incluye la edición del espaciado entre letras, el relleno, la altura de línea, etc.

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

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 comprobará que tu contenido es responsivo, y podrás 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 crear tu mensaje de correo electrónico, es hora de añadir la información de envío en la sección Configuración de envío.

1. En Información de envío, seleccione un correo electrónico como Nombre de remitente + Dirección. También puede personalizarlo seleccionando Personalizar desde Nombre para mostrar + Dirección.
2. Selecciona un correo electrónico como dirección de responder a. También puedes personalizarlo seleccionando Personalizar dirección de respuesta a.
3. A continuación, seleccione un correo electrónico como dirección CCO para que su correo electrónico sea visible para esta dirección.
4. Añada una línea de asunto a su correo electrónico. Opcionalmente, también puede añadir un preencabezado y un espacio en blanco después del preencabezado.

En el panel de la derecha aparecerá una vista previa con la información de envío que haya añadido. Esta información también puede actualizarse accediendo a Configuración > Preferencias de correo electrónico > Configuración de envío.

Personalización del encabezamiento de tu correo electrónico (avanzado)

En Configuración de envío, puede añadir personalización para las cabeceras y los extras del correo electrónico, lo que le permite enviar datos adicionales a otros proveedores de servicios de correo electrónico. Personalizar el encabezado de un correo electrónico, por ejemplo incluyendo el nombre del destinatario, también puede contribuir a aumentar la probabilidad de que se abra el mensaje.

Paso 4: Pruebe su correo electrónico

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

Vaya a la sección Previsualizar y probar. Aquí tiene la opción de previsualizar su correo electrónico como usuario o enviar un mensaje de prueba. Esta sección también incluye Inbox Vision, que le permite comprobar que su correo electrónico se ha renderizado correctamente en diferentes clientes móviles y web.

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

Vista previa y envío de prueba

En la pestaña Previsualizar 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 en función de sus atributos o de la información del evento.
• Seleccionar usuario: Puede seleccionar un usuario concreto en función de su dirección de correo electrónico o de su ID externo. El correo electrónico se mostrará con vista previa en función de los atributos del usuario y la información del evento.
• Usuario personalizado: Puedes personalizar un usuario. Braze ofrecerá entradas para todos los atributos y eventos disponibles. Puede introducir cualquier información que desee ver en el correo electrónico de previsualización.

También puedes seleccionar Copiar enlace de vista previa para generar y copiar un enlace de vista previa compartible que muestra cómo se verá el correo electrónico para un usuario aleatorio. El enlace tendrá una validez de siete días antes de que sea necesario volver a generarlo.

Ten en cuenta que cualquier modificación que realices en una plantilla de correo electrónico no se reflejará en un enlace generado anteriormente. Tendrás que generar una nueva vista previa del enlace para ver los cambios.

Utilizar Inbox Vision

Inbox Vision le permite ver sus campañas de correo electrónico desde la perspectiva de los clientes de correo electrónico y los dispositivos móviles. Para probar tu mensaje de correo electrónico con Inbox Vision, selecciona Inbox Vision en la sección Vista previa&Prueba y selecciona Ejecutar Inbox Vision.

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

About the updated HTML engine

El motor subyacente que produce HTML a partir del editor de arrastrar y soltar se ha optimizado y actualizado, lo que se traduce en ventajas relacionadas con la compresión y el renderizado de archivos HTML.

Se ha reducido el tamaño medio de nuestra huella de datos HTML exportados, lo que se traduce en una carga y representación más rápidas, menos recortes en los móviles y un menor consumo de ancho de banda.

La representación 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 se codifican de forma más eficiente.

• Migración de un diseño basado en elementos de <div> a una base de código con formato estándar <table>
• Los bloques de editor se han recodificado para que sean más concisos.
• El código HTML final se comprime para eliminar los espacios en blanco entre las etiquetas.
• Los separadores transparentes se convierten automáticamente en relleno de contenido

Otras personalizaciones

A medida que continúe creando mensajes de correo electrónico de arrastrar y soltar, puede personalizar aún más el cuerpo de cada mensaje utilizando una combinación de estos detalles creativos para captar la atención y el interés de su público en su mensaje.

Imágenes de ancho automático

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

Estratificación de colores

Mediante la superposición de colores, puede cambiar el color del fondo del correo electrónico, del área de contenido y de los distintos componentes del contenido. El orden de los colores de delante hacia atrás es: color del componente de contenido, color de fondo del área de contenido y color de fondo.

Relleno de contenido

Para ajustar el relleno, desplácese hasta Opciones de bloque y seleccione Más opciones. Puede ajustar el relleno para que su correo electrónico tenga el aspecto deseado.

Fondo del contenido

Puede añadir una imagen de fondo a la configuración de sus filas, lo que le permitirá incorporar más diseño y contenido visual a su campaña de correo electrónico.

Atributo de idioma

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

Personalización

Basic Liquid es compatible con el editor de correo electrónico de arrastrar y soltar. Para añadir personalización a su correo electrónico:

1. Seleccione Personalización en la sección Contenido.
2. Seleccione el tipo de personalización. Esto incluye atributos por defecto (estándar), atributos de dispositivo, atributos personalizados, etc.
3. Busque el atributo que desea 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 líquida no es compatible con los bloques de imágenes y los campos de tipo botón de enlace.

Imágenes dinámicas

Puedes optar por incluir imágenes dinámicas en tus mensajes de correo electrónico incluyendo Contenido Conectado o Liquid en el atributo de origen de la imagen. Por ejemplo, en lugar de una imagen estática, puede insertar https://example.com/images/?imageBanner={{first_name}} como URL de la imagen para incluir el nombre de pila de un usuario en la imagen. Esto ayuda a personalizar sus correos electrónicos para cada usuario.

Dirección del texto

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

El aspecto final de los mensajes de derecha a izquierda depende en gran medida de cómo los presten los proveedores de servicios. Para conocer las mejores prácticas de elaboración de 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

Cuando utilice enlaces, botones, imágenes y vídeos en el editor de arrastrar y soltar, seleccione Añadir nuevo atributo en Atributos de la sección Contenido para añadir información adicional a las etiquetas HTML de los mensajes de correo electrónico. Esto puede ser especialmente útil para la personalización, segmentación y estilización de mensajes.

Un caso de uso común es insertar un atributo en su etiqueta de anclaje para desactivar el seguimiento de clics cuando se envía 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 su aplicación, ofreciendo a sus usuarios una experiencia integrada.

• SendGrid: universal = "true"
• SparkPost: data-msys-sublink = "open-in-app" (debe configurarse una sub-ruta personalizada )

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

También puede integrarse con uno de nuestros socios de atribución, como Branch o AppsFlyer, para gestionar los enlaces universales.

Por último, hay atributos predefinidos disponibles para ayudar a que tu mensaje sea accesible. Más información en nuestro artículo dedicado a la creación de mensajes accesibles en Braze.

Etiquetas de encabezado personalizadas

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

Cualquier cosa que se añada fuera de<head>las etiquetas se añadirá después de la<body>etiqueta 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

Nombre de la etiqueta	Descripción	Ejemplo
base	Especifica la URL base para todas las URL relativas del mensaje.	<base href="https://example.com" target="_blank">
link	Define las relaciones entre el mensaje y los recursos externos.	<link href="styles.css" rel="stylesheet" type="text/css">
meta	Proporciona metadatos como la descripción de la página o palabras clave.	<meta name="description" content="Free Web tutorials">
style	Incorpora estilos CSS internos.	<style type="text/css" media="screen">body { font-size: 16px; }</style>
title	Establece el título del documento que se muestra en las pestañas del navegador.	<title>StyleRyde</title>

Etiqueta	Atributo	Descripción	Ejemplo
base	href	URL base que se utilizará para las URL relativas.	<base href="https://braze.com">
base	target	Destino predeterminado para todos los hipervínculos y formularios.	<base target="_blank">
link	href	URL del recurso externo.	<link href="style.css">
link	rel	Define las relaciones entre el mensaje actual y el mensaje vinculado.	<link rel="stylesheet">
link	type	Tipo de recurso vinculado.	<link type="text/css">
link	sizes	Especifica el tamaño de los iconos.	<link rel="icon" sizes="32x32" href="favicon-32.png">
link	media	Especifica el medio o dispositivo al que se aplican los estilos.	<link rel="stylesheet" media="screen" href="style.css">
meta	name	Establece el título del documento que se muestra en las pestañas del navegador.	<meta name="viewport" content="width=device-width, initial-scale=1">
meta	content	Establece el título del documento que se muestra en las pestañas del navegador.	<meta name="description" content="Page about our newest products">
meta	charset	Declara la codificación de caracteres.	<meta charset="UTF-8">
meta	property	Establece el título del documento que se muestra en las pestañas del navegador.	<meta property="og:title" content="Website title">
style	type	Tipo MIME del contenido del estilo.	<style type="text/css">p { color: red; }</style>
style	media	Especifica el medio o dispositivo al que se aplican los estilos.	<style media="print">body { font-size: 12pt; }</style>
title	Sin atributos	Latitleetiqueta no acepta ningún atributo.	<title>Kitchenerie</title>