- Visión general
- Diseño
- Panel de propriedades (contenido, filas, configuración)
- Agregar y manejar contenido
- Previsualización
- Mostrar estructura
- Historial: Deshacer y Rehacer
- Primera etapa - configuración global del email
- Propiedades de los componentes
- Color y recordatorio de uso de colores
- Segunda etapa – arrastrar las filas en tu email
- Filas: Componentes estructurales
- Selección de componentes estructurales
- Eliminar y duplicar filas
- Secciones
- Propiedades de fila y columna
- La opción "No apilar en el móvil"
- Relleno (padding)
- Borde
- Guardar filas
- Tercera etapa - añadir bloques de contenido en las filas
- Bloques de textos
- Global Font
- Enlaces mirror y de baja
- Añadir contenido personalizado
- Imágenes y Administrador de archivos
- Administrador de archivos
- Acciones
- Imágenes dinámicas
- Botones
- Separador
- Social
- Bloques HTML
- Sintaxis HTML dentro de bloques
- Vídeo
- Iconos
- Algunas palabras de mejores prácticas para terminar...Tamaño óptimo de email
- Tamaño de pantalla cuando se usa Message Builder
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.
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.
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.
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.
"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.
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.
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.
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.
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.
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.
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.
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á.
Las flechas que permiten mover los componentes estructurales se encuentra a la izquierda
Haz clic en la fila del editor para seleccionarla.
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.
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.
Para cada fila, puedes establecer propiedades para columnas individuales: color de fondo, relleno y borde.
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).
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.
Borde
Para que el borde sea visible, debes hacerlo al menos un píxel de ancho y que no sea transparente.
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.
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).
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).
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:
- El máximo de bloques permitidos en una sola fila es 4.
- 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.).
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.
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.
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".
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.
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.
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.
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
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.
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.
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.
También puedes añadir otras redes sociales como WeChat, Youtube o Snapchat, usando el botón "Añadir otro icono".
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.
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
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:
- 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:
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.
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.