Message Builder

Configuración global del email
Cómo usar las filas
Añadir bloques de contenido en las filas
Previsualizar tu diseño
Consejos y recomendaciones

Message Builder es un editor de email intuitivo con la opción «drag & drop» («arrastrar y soltar») integrada en el módulo Designer. 
Para acceder al Message Builder, haz click en «Nuevo Email» en Designer o usa el atajo de teclado (N+E). Ten en cuenta que Message Builder y el Editor HTML funcionan por separado: si empiezas a crear un diseño en Message Builder, la pestaña Editor HTML aparecerá en gris y viceversa.

En el Message Builder, el contenido son elementos que puedes colocar en tu mensaje, como cuadros de texto, bloques de imagen, etc. Las filas definen la estructura del mensaje y proporcionan espacios para poder colocar elementos de contenido. Los ajustes son opciones que afectan a todo el email. Este artículo está estructurado siguiendo esta lógica y destaca las características y consejos más útiles. No hemos enumerado todas las funciones disponibles, sino que sólo hemos seleccionado algunas que no necesariamente conoces o entiendes a primera vista.

Configuración global del email 

Esta pestaña te permite editar la configuración que afecta a todo el email. Puedes definir, entre otros, el ancho del email, los colores de fondo y de los enlaces y la fuente predeterminada.

Es una buena práctica hacer que el ancho no sea mayor que 600 px, que es un máximo para la mayoría de los clientes de email clásico.

Color y recordatorio de uso de colores

Aunque puedas escribir valores hexadecimales de color a mano, Message Builder te permite también seleccionar el color mediante controles gráficos. También recuerda los colores previamente seleccionados (y escritos), para que puedas controlar mejor la paleta de tu email y ser más eficiente.

Cómo usar las filas

Una vez que hayas configurado los parámetros globales de tu email, puedes crear la estructura arrastrando las filas que quieres tener. Las filas son el equivalente a las líneas.

Las filas se pueden duplicar, eliminar y guardar para uso futuro (una vez añadido el contenido).

Propiedades y opciones de las filas

Seleccionar una fila te permite establecer propiedades para ella, por ejemplo:

• el color de fondo
• la imagen de fondo
• el relleno o padding (la distancia interna dentro de un contenedor que separa el contenido del borde)
• los bordes
• la opción «No apilar en el móvil» (cuando una fila contiene más de una columna, el contenido de cada columna se mostrará horizontalmente de forma predeterminada en los dispositivos de escritorio y verticalmente en dispositivos móviles. Con este botón puedes desactivar este comportamiento)
• ocultar en el móvil/desktop

Guardar filas

Tras haber añadido el contenido a tu fila, puedes guardarla en cualquier momento haciendo clic en la parte afuera del contenido, en la estructura de la fila, donde veras el icono del disco (ve captura abajo).

Al hacer clic en el icono del disco, podrás guardar tu bloque para volver a utilizarlo para tus próximos diseños. Los bloques salvados se encuentran en «Designer > Saved contents».

Añadir bloques de contenido en las filas

Hemos enumerado a continuación algunos aspectos destacados del contenido que puedes insertar en el Message Builder. Ten en cuenta que debes agregar bloques de contenido dentro de las mismas filas si deseas que el contenido sea «responsive» (es decir: imagen + botón). Si agregas los bloques en filas separadas, se considerarán como contenido independiente y, por lo tanto, no se mostrará juntos en las pantallas «responsive».

Algunas cosas que debes tener en cuenta con respecto a los bloques de contenido:

• Si quieres añadir un efecto agrupado a tus bloques, puedes jugar con el relleno. Simplemente selecciona el bloque y ve al menú de control del contenido > relleno.
• Actualmente, no es posible agregar efectos hover cuando el ratón está en un bloque específico.
• no es posible que un bloque completo sea clicable, sin embargo, puedes insertar enlaces detrás de las imágenes, CTA, bloques de texto, etc.

Enlaces mirror y de baja (disponibles cuando añades «Texto»)

Los dos enlaces son disponibles en un bloque de texto > enlaces especiales > enlaces y se pueden insertar directamente en el bloque de texto.

Añadir contenido personalizado (en bloques de texto)

El botón «contenido personalizado» te proporciona una lista de etiquetas para insertar valores de la base de datos, desde el sistema y los campos personalizados. El botón «más opciones» abre un cuadro de diálogo que contiene toda la biblioteca de sintaxis disponibles.

Si escribes «@» y luego las primeras letras del campo que buscas, una finalización automática te ayudará a escribir la sintaxis correcta.

Imágenes dinámicas

Las imágenes dinámicas suelen ser imágenes que cambian de acuerdo a uno o más valores que se «transmitirán» al sistema que las proporciona. Este tipo de URL contiene ciertas variables, como un email, un ID de cliente, una fecha, etc.

https://spliotraining.com/images/?imageBanner={{customer_ID}}

Las variables son campos personalizados en la URL y se reemplazan por valores reales al enviar el email (por ejemplo el ID de un cliente, la dirección de email del destinatario, su nombre, etc.) en el momento en que se envía el correo electrónico o se muestra la página de destino.

Las imágenes dinámicas son una opción dentro de un bloque de imágenes y se pueden usar al insertar imágenes de productos dentro de los loops de productos. Para obtener más detalles sobre los loops, puedes consultar nuestro artículo dedicado.

Escribe la dirección URL del contenido dinámico en el campo «Url dinámica».

Transmite las variables en esta URl a la que tu servidor puede responder con los gráficos o contenidos adecuados.

Las imágenes dinámicas pueden ser, por ejemplo, mapas personalizados, recomendaciones de productos, anuncios, etc.

Recuerda que el campo de URL dinámica solo será visible cuando se haya seleccionado un archivo de imagen en el bloque de contenido de imagen.

Si habilitas la opción '' imagen dinámica '' pero dejas el campo de URL de tu imagen vacío, el código HTML de tu email se generará normalmente y utilizará la imagen estática, ignorando los parámetros dinámicos.
Finalmente, puedes usar la sintaxis y/o caracteres que quieras excepto «?» que solo se puede usar una vez en una URL y las comillas, que podrían romper el enlace.

Sintaxis HTML dentro de bloques

Message Builder tiene un vocabulario HTML limitado para poder garantizar la receptividad y la capacidad de entrega de los mensajes. Por ejemplo, se cierran las etiquetas abiertas y eliminar etiquetas como iframe o script que se sabe que causan problemas de entrega y no están permitidos por la mayoría de los clientes de correo electrónico.

Usar los iconos

El bloque de contenido de iconos te permite tener varias imágenes (con o sin texto) colocadas una al lado de la otra sin el uso de varias filas. Algunas funciones son específicas para los iconos, por ejemplo:

• el tamaño de los iconos (16, 32, 64 y 128px)
• el espacio entre los iconos desde 0 hasta 20px
• Icon padding (padding applied to each icon)

Usar el menú

La funcion del menú te permite crear un «menú de hamburguesa» en el móvil cuando habilitas la opción «menú móvil» al final de las opciones disponibles.

Contenido dinámico

Para obtener más detalles, puedes consultar nuestro artículo dedicado. 

Countdown 

Para obtener más detalles, puedes consultar nuestro artículo dedicado. 

Previsualizar tu diseño

Haciendo clic en el botón de «vista previa» puedes ver cómo se mostrará el mensaje que estás creando en los navegadores web y en los teléfonos móviles.

Si deseas utilizar la vista previa de nuestros clientes email (esta opción puede o no estar activada en tu universo), primero tendrá que guardar tu dise ño. Si esta opción está presente, ve al botón de herramientas (botón azul a la derecha, después botón de vista previa del cliente email).

Recuerda que este enlace te llevará a una página separada que no está alojada en nuestra plataforma.

Consejos y recomendaciones

• Arrastrar los elementos

Quando arrastras los elementos del contenido dentro de una fila, asegúrate siempre de ver «Arrastrarlo aquí» como se muestra abajo:

• Deshacer y rehacer una acción

Si deseas deshacer y rehacer una acción, puedes ver tres iconos en la esquina inferior izquierda del Message Builder en el editor. Puedes ver el historial haciendo clic en el icono de más a la izquierda. Recuerda guardar siempre tu diseño sobre la marcha.

• Tamaño óptimo de email

Para una entrega óptima, recomendamos que el tamaño de tus emails no sea superior a 100 ko, ya que cuanto más ligero sea, más fácil se mostrarán tus imágenes en los móviles, especialmente si la conexión de tus usuarios es mala. Si tu email pesa mas de 100 ko, se truncará y tus usuarios no podrán verlo por completo.

• Tamaño de pantalla cuando se usa Message Builder

Recomendamos usar una pantalla de desktop al crear tus emails en Message Builder para obtener un tamaño de pantalla óptimo.