Artículos en esta sección

Más información

Message Builder

Avatar
Academy Team
  • Actualización

Visión general

Message Builder es un editor de email intuitivo con la opción drag & drop (“arrastrar y soltar”) integrada en el módulo Designer. La idea detrás del Builder es ofrecer flexibilidad de diseño separando la estructura del mensaje de su contenido.

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.

mceclip0.png

Diseño

Message Builder se divide en dos partes. La parte de edición a la izquierda, donde puedes colocar y editar contenido, y el panel de propiedades a la derecha.

mceclip1.png

Para utilizar Message Builder, arrastra elementos estructurales y de contenido desde el panel derecho hacia la izquierda y edita sus propiedades en el panel derecho. Puedes hacerlo con elementos de contenido (por ejemplo, bloques de texto o de imágenes) así como con elementos estructurales (filas, columnas). Incluso puedes arrastrar directamente archivos de imagen en bloques de imagen (en lugar de cargarlos desde tu ordenador o desde una URL).

Panel de propriedades (contenido, filas, configuración)

El panel de propiedades es contextual: siempre muestra las propiedades del elemento seleccionado en el editor. Si no seleccionas ningún elemento, el panel sirve de menú desde el que puedes elegir componentes que arrastrar.

mceclip2.png

El panel se divide en tres secciones predeterminadas: Contenido, Filas y Configuración

  • Contenido: son elementos que puedes colocar en tu mensaje, como cuadros de texto, bloques de imagen, etc.
  • Filas: definen la estructura del mensaje y proporcionan espacios para poder colocar elementos de contenido.
  • Ajustes: son opciones que afectan a todo el email.

Agregar y manejar contenido

Para agregar un nuevo elemento, arrástralo desde el panel hasta el editor. Al mover el elemento alrededor del editor, resalta el lugar donde se va a colocar.

mceclip3.png

"Arrastrarlo aquí" marca el lugar donde se insertará el elemento

Previsualización

Al hacer clic en el botón "previsualización" se puede ver cómo se mostrará el mensaje que estás creando en los diferentes navegadores web y en móvil.

mceclip4.png

Puedes alternar la visualización entre las pantallas "escritorio" y "móvil".

Nota: es posible tener vistas previas de Android vs Iphone a través del botón de herramientas (botón azul en el lado derecho). En primer lugar, deberás guardar tu diseño y luego aparecerá este botón, que te ofrece la opción de obtener vistas previas en todo tipo de dispositivos.
Ten en cuenta que este enlace te llevará a una página separada que no está alojada en nuestra plataforma.

mceclip5.png

Mostrar estructura

La función del botón "mostrar estructura" te permite ver el diseño de la estructura. Haz clic en él para que sean visibles todos los límites entre los elementos estructurales (filas y columnas). Los límites se muestran en la imagen de abajo como líneas discontinuas.

Historial: Deshacer y Rehacer

A continuación puedes ver los tres iconos de la esquina inferior izquierda del editor.

mceclip6.png

Iconos de historial, deshacer y rehacer

La flecha a la izquierda te permite deshacer la acción más reciente. La flecha a la derecha sirve para rehacer la siguiente acción en el historial. Puedes ver el historial haciendo clic en el icono de más a la izquierda.

mceclip7.png

Puedes avanzar y retroceder en el historial

Puedes hacer clic en cualquier acción para restaurar la etapa.

Primera etapa - configuración global del email

Esta pestaña dentro del panel de propiedades te permite editar la configuración que afecta a todo el email.

mceclip8.png

Configuración global del 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.

Propiedades de los componentes

Algunos controles utilizados en Message Builder son los mismos para varios tipos de elementos.

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.

mceclip9.png

Selector de color con memoria de color (izquierda).

Al pasar el cursor sobre los colores almacenados en la memoria, la información sobre herramientas mostrará el valor hexadecimal de color.

Segunda etapa – arrastrar las filas en tu email

Una vez que hayas configurado los parámetros globales de tu email, puedes crear la estructura arrastrando las filas que quieres tener.

Las filas se pueden seleccionar en el panel de propiedades, arrastrarse al menú de izquierda y colocarlas donde quieres.

Filas: Componentes estructurales

Las filas forman la estructura de los emails creados con Message Builder. Las filas se pueden seleccionar en la sección "filas" del panel de propiedades, arrastrarse al editor y colocarlas donde quieras.

mceclip10.png

Arrastra una fila al editor para crear la estructura

La fila que selecciones determina el número de columnas. Puedes usar la fila de una sola columna para insertar una imagen grande de producto y, a continuación, una serie de filas de dos columnas para mostrar productos individuales, por ejemplo.

Selección de componentes estructurales

Al pasar el ratón sobre un elemento estructural (fila), Message Builder lo resaltará.

mceclip11.png

Las flechas que permiten mover los componentes estructurales se encuentra a la izquierda

Haz clic en la fila del editor para seleccionarla.

mceclip12.png

Eliminar y duplicar filas

Cuando has seleccionado un componente estructural, puedes utilizar el icono que muestra dos cuadrados para duplicarlo o el icono de papelera para eliminarlo.

mceclip13.png

Secciones

Al agregar (o duplicar) filas que contienen la misma configuración (número, tamaño) de columnas, puedes crear secciones distintas del mensaje.

Propiedades de fila y columna

Seleccionar una fila te permite establecer propiedades para ella, como el color de fondo o la imagen.

mceclip14.png

Para cada fila, puedes establecer propiedades para columnas individuales: color de fondo, relleno y borde.

mceclip15.png

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. Puedes desactivar este comportamiento con el botón "no apilar en el móvil".

Relleno (padding)

El relleno es la distancia interna dentro de un contenedor que separa el contenido del borde. Se puede definir para muchos elementos de contenido y algunos elementos estructurales también (columnas).

mceclip16.png

Ajuste el mismo relleno para todos los lados

Puedes escribir el valor a mano o hacer clic en los botones "+" y "-" para aumentarlo o disminuirlo.

Haciendo clic en "más opciones" puedes establecer un relleno diferente para cada lado del componente.

mceclip17.png

Borde

Para que el borde sea visible, debes hacerlo al menos un píxel de ancho y que no sea transparente.

mceclip18.png

Un borde punteado de 2px de ancho

De forma predeterminada, todos los bordes que rodean el elemento de columna son los mismos. Mediante el uso del modificador "más opciones", puedes establecer un color de borde, ancho y estilo diferente para cada lado.

mceclip19.png

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 1 abajo).

mceclip20.png

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", que es la librería de todos los bloques listos para ser utilizados en tus diseños cada día (ve captura 2 abajo).

mceclip21.png

Tercera etapa - añadir bloques de contenido en las filas

Ahora que has configurado tu email, añadido tus filas, podrás agregar bloques de contenido dentro de las filas.

Esta sección se centra en las herramientas y opciones que están disponibles cuando se trabaja con tipos específicos de bloques de contenido.

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 formatos móviles. 

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

  • Los bloques se pueden duplicar, incluidos los bloques que contienen variables (tiendas, productos, recibos, bucles de carritos abandonados). 
  • Actualmente, no es posible agregar efectos hover cuando el ratón está en un bloque específico.
  • Finalmente, no es posible que un bloque completo sea clicable, sin embargo, puedes insertar enlaces detrás de las imágenes, CTA, o bloques de texto...

Bloques de textos

Al seleccionar un bloque de texto se abre una barra con diferentes menús desde la que puedes establecer propiedades de texto (tamaño, color de fuente, negrita etc.).

mceclip22.png

Barra con opciones de formato de texto

Global Font

Si seleccionas "global font" el bloque de texto utilizará la fuente seleccionada en los ajustes de tu mensaje.

mceclip24.png

Nota: no es posible descargar tus propias fuentes. La razón por la que no puedes usar tus propias fuentes es porque las fuentes disponibles en Message Builder son las fuentes recomendadas en términos de deliverabilidad de email.

Enlaces mirror y de baja

Puedes insertar enlaces especiales a partir de un bloque como en el ejemplo de abajo. Los dos enlaces disponibles son el enlace espejo (mirror) y el enlace de baja.

mceclip25.png

Añadir contenido personalizado

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 el cuadro de diálogo "herramientas" que contiene toda la biblioteca de personalización, incluyendo bloques condicionales y bucles (loops) de productos.

Si escribes @ y luego las primeras letras del campo que buscas, una finalización automática te ayudará a escribir la sintaxis correcta. Esta es la forma más rápida de insertar personalización, a menos que conozcas tus variables de memoria.

 

Imágenes y Administrador de archivos

Al agregar un nuevo bloque de imagen, puedes rellenarlo soltando un archivo de imagen desde otra ventana o haciendo clic en el botón "buscar".

mceclip27.png

Abre el administrador de archivos que te permite subir imágenes y buscarlas en línea.

Ten en cuenta que no es posible agregar imágenes en formato .tiff en Message Builder.

Administrador de archivos

El gestor de archivos almacena todas las imágenes subidas o encontradas en línea por todos los usuarios del universo de Splio.

El botón "insertar" selecciona una imagen y vuelve a Message Builder. Puedes hacer doble clic en cada imagen para acercarla.

mceclip28.png

Puedes ver imágenes por nombre, fecha, tamaño o tipo, y mostrarlas como mosaicos, como en la imagen anterior o como una lista. También puedes crear carpetas para organizar la colección de tus imágenes.

No hay límite en el número de imágenes y documentos que puedes cargar en el Administrador de archivos.

Acciones

Selecciona en el menú desplegable la acción realizada al hacer clic en la imagen. Cuando el destinatario hace clic en él, se abrirá el software o la aplicación predeterminada que utiliza para el canal que seleccionó. Si pusiste un correo electrónico predeterminado para enviar una solicitud al Servicio de Atención al Cliente, se abrirá Outlook si es el correo electrónico predeterminado.

mceclip29.png

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.

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 bucles de productos. Para obtener más detalles sobre los bucles, puede consultar nuestro artículo dedicado.

Screen_Recording_2021-02-09_at_10.14.51.99_AM.gif

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

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

Importante: 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 : '' , que podrían romper el enlace.

Botones

mceclip31.png

Los botones pueden abrir nuevas ventanas del eplorador, enviar emails, SMS o realizar llamadas (el efecto final depende del dispositivo utilizado por el destinatario). También puedes utilizar las herramientas de edición de texto para modificar el texto del botón.

Puedes definir el texto y el color de fondo, la alineación, el relleno y el borde. Con una opción especial de "radio de borde" puedes hacer que las esquinas de los botones se redondeen.

Separador

Con los separadores puedes poner más espacio entre las secciones del mensaje. Puedes establecer las propiedades de la línea de separación o hacer que el separador sea transparente.

mceclip32.png

Nota: no es posible tener separadores verticales para tus bloques, sin embargo, el espacio entre columnas se puede editar y, por lo tanto, debería cubrir esta necesidad. Para editar esto, simplemente selecciona tu bloque y edita el espacio de relleno.

Social

El bloque de contenido "social" es una colección de iconos que proporcionan enlaces a sitios de redes sociales. De forma predeterminada, contiene iconos de Facebook, Twitter, Instagram y LinkedIn, pero puedes eliminar los que no te gusten o añadir otros.

mceclip33.png

Proporciona un enlace para cada icono que reenvía a la página dentro del sitio de redes sociales. El interruptor de cada icono te permite cambiar el nombre y proporcionar texto alternativo.

mceclip34.png

También puedes añadir otras redes sociales como WeChat, Youtube o Snapchat, usando el botón "Añadir otro icono".

mceclip35.png

Ten en cuenta que no es posible editar los colores de los iconos y deberás usar los colores disponibles en Message Builder.

Bloques HTML

Estos bloques te permiten pegar (o escribir) fragmentos de código HTML directamente en tus emails. Esto permite muchos tipos de contenido avanzado, desde recomendaciones de productos hasta mapas dinámicos, anuncios personalizados y mucho más.

mceclip36.png

Los bloques HTML se pueden considerar como una característica "avanzada", ya que el uso de tu propio código puede afectar a la forma en que el mensaje se representa en los clientes de email. Por ejemplo, depende del autor del código HTML asegurarse de que el código se ajusta al tamaño de la pantalla. Asegúrate de usar HTML que sea compatible con el correo electrónico y responsive.

En este menú se puede utilizar también bloques condicionales y bucles de productos o tiendas. Debes utilizar los bloques de texto para la personalización si no tienes conocimientos HTML, y el bloque HTML si tiene más conocimiento y quieres hacer una personalización más compleja.

Sintaxis HTML dentro de bloques

Message Builder tiene un vocabulario HTML limitado para poder garantizar el diseño responsive 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.

Vídeo

Para que un bloque de vídeo funcione, debes proporcionar una dirección URL. Message Builder solo funciona con URL de YouTube y Vimeo.

Una vez cargado, el bloque mostrará la imagen de vista previa del vídeo.

Las opciones para los bloques de vídeo incluyen la capacidad de ocultarlo en equipos de escritorio o dispositivos móviles (de esta manera puedes tener dos versiones del bloque, una para cada tipo de dispositivo).

Iconos

mceclip0.png

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.

Haz clic en Agregar nuevo ícono para agregar el primer ícono y haz clic en Cambiar imagen para seleccionar una imagen del tu biblioteca. Luego, puedes editar la imagen con el editor de imágenes si es necesario. Puedes hacer clic en "Más opciones" para ajustar la posición del icono, agregar un enlace o un texto alternativo. 
Al desplazarte hacia abajo en el menu de las propiedades, verás algunas funciones que son específicas para los iconos:

05_Icons_properties.png

  • Tamaño (16, 32, 64 o 128px)
  • Espacio entre los iconos desde 0 hasta 20px
  • Bordes

Aquí tienes un ejemplo de como se podría usar:

00_properties.png

Selección de un elemento de contenido

Al colocar el puntero del ratón sobre el editor, aparecen resaltados los elementos en los que puedes hacer clic.

mceclip38.png

Al pasar el ratón se muestra un identificador y la etiqueta ‘Contenido’

Message Builder resalta el elemento sobre el que pasas el ratón y le da un borde. Puedes usar las flechas para mover el elemento.

Haz clic en el botón izquierdo del ratón para seleccionar el elemento resaltado. El panel de propiedades cambia para mostrar sus propiedades.

Los tres iconos de la esquina superior derecha del panel te permiten eliminar, duplicar y anular la selección del elemento.

Algunas palabras de mejores prácticas para terminar...

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 escritorio al crear tus emails en Message Builder para obtener un tamaño de pantalla óptimo.

Artículos relacionados