Questions? Feedback? powered by Olark live chat software
Acumbamail - Tú creas el contenido, nosotros lo enviamos.

Soporte

Desde nuestra base de conocimiento puedes resolver todas tus dudas

Llámanos al 91 278 40 71 o escríbenos a soporte@acumbamail.com

Uso de imágenes en el editor de email marketing

Índice / Editor de plantillas - 14 de Febrero de 2018 a las 10:43


¿Cómo añadir una imagen de fondo a tus newsletters?
Busca fotos de alta calidad gratis
Edición de propiedades de imagen
Uso de imágenes dinámicas para temporizadores de cuenta regresiva y contenido personalizado



¿Cómo añadir una imagen de fondo a tus newsletters?


Debido a la gran demanda recibida por muchos diseñadores que utilizan herramientas de diseño de email marketing, ahora puedes añadir imágenes a las filas y establecerlas como fondo para crear diseños aún más originales para tus campañas.

Por ejemplo, podrías repetir un patrón, como los paneles de madera que se muestran a continuación:

Imágen de fondo / Repetir un patron

O también podrías usar una imagen de fondo única que cubra la totalidad del ancho del correo (por ejemplo, para usarla como encabezado del correo electrónico). Esto también es fácil de hacer con la propiedad Imagen de Fondo.

Por ejemplo, vamos a modificar la plantilla previa para ilustrar esto y aumentar el tamaño de la imagen, el mismo mensaje tiene ahora otro aspecto y se vería de la siguiente manera:

Imágen de fondo / Repetir un patron

Imágen de fondo / Repetir un patron

¿Donde lo encuentro?

Cuando seleccionas una fila en el panel de diseño verás que a la derecha, en el panel de propiedades de la fila, ahora incluye una nueva opción para añadir una imagen de fondo de la fila:

Imágen de fondo / Repetir un patron

Veamos ahora las opciones de configuración que nos aparecen en esta sección.

Configuración de la imagen de fondo de fila

Selección de la imagen

Una vez que hayas hecho clic para habilitar esta función, puedes subir la imagen que quieras utilizar como fondo de fila a través del Administrador de Archivos utilizando el botón Cambiar Imagen. Otra forma de hacerlo puede ser copiando y pegando la URL de la imagen en el cuadro de URL si deseas utilizar una imagen alojada en otra plataforma o herramienta.

Ancho completo, repetido y centrado

Estas tres configuraciones - Ancho completo, Repetido y Centrado - son importantes para alinear la imagen y encontrar el mejor ajuste para tu imagen de fondo o crear un patrón y conseguir diseñar una newsletter bonita, original y efectiva.

Ancho completo

Cuando seleccionas esta opción, la imagen se usa como fondo para la totalidad del ancho de la fila. Por ejemplo, aquí hemos elegido un patrón gris claro que se extiende en la totalidad de la fila.

Ancho completo

Cuando no se selecciona este ajuste, la imagen de fondo se aplica solo al área de contenido seleccionado. El ancho del área de contenido se establece en la pestaña Cuerpo, en Opciones Generales en el panel de propiedades que se encuentra a la derecha.

A continuación te mostramos el mismo patrón aplicado solo al área del bloque de contenido seleccionado:

Ancho completo

Repetido

Cuando se selecciona esta opción, la imagen se repite. Esto funciona muy bien con patrones simétricos. Si eligiéramos repetir la imagen de los granos de café, por ejemplo, el mensaje se vería así:

Ancho completo

Selecciona los ajustes "Ancho completo" y "Repetido" a la vez si deseas repetir un patrón que ocupe la totalidad del ancho de la fila. Si la fila es más grande que la altura de la imagen, el patrón también se repetirá verticalmente.

Centrado

Cuando se selecciona, la imagen se centra. Si "Repetido" también está activado, la imagen se centra y luego se repite a la izquierda y a la derecha. Si "Repetido" está seleccionado pero no “centrado”, la imagen se coloca en la esquina superior izquierda de la fila, y luego se repite a la derecha.

Las tres configuraciones se pueden activar y desactivar de forma independiente. Para probar esto sube una imagen pequeña y empieza a jugar con estos tres ajustes para comprender cómo cambia la posición de la imagen.

Compatibilidad con el cliente de correo

El editor utiliza técnicas avanzadas de diseño para garantizar que las imágenes de fondo se procesen en la gran mayoría de los clientes de correo electrónico. Según nuestras pruebas más recientes, los únicos clientes de correo electrónico para los que no se mostraron imágenes de fondo fueron:

- Outlook (las imágenes de fondo parecen funcionar en Outlook 2016 en OS X, no en otras versiones)

- Lotus Notes 7

- Xfinity / Comcast

Para esos clientes de correo electrónico y para obtener los mejores resultados cuando las imágenes están bloqueadas, asegúrate de establecer un color de fondo para la fila que funcione con el resto de la newsletter en caso de que no se muestre la imagen de fondo previamente configurada.

Cambios al redimensionar la imagen

Para conseguir que el sistema sea más compatible con esta función, se introdujeron algunos cambios.

1. El límite de tamaño de ancho máximo permitido para las imágenes se aumentó para permitir imágenes más anchas.

2. Para compensar el aumento de tamaño del archivo, todas las imágenes se optimizan automáticamente sin perder calidad.

3. Solo las imágenes más grandes se redimensionan al subirse.


Busca fotos de alta calidad gratis


¿Necesitas una foto original para crear tu campaña? ¡Ahora puedes buscar fotos gratis y de alta calidad sin salir de nuestro editor!

Bancos de fotos gratuitas y de calidad para tus correos electrónicos

Abre el Administrador de Archivos dentro del editor haciendo clic en Cambiar imagen cuando selecciones una imagen existente, o añadiendo un nuevo bloque de imágenes y haciendo clic en Buscar.

Verás el botón Buscar fotos gratuitas en la barra superior.

Busca fotos gratuitas

Nos hemos integrado con tres plataformas populares de fotografías: Unsplash, Pexels y Pixabay para ofrecerte la posibilidad de buscar la imagen ideal desde un gran selección de imágenes de alta calidad que son de uso gratuito bajo la licencia Creative Commons Zero (CCO).

Cómo añadir una imagen

¡Encontrar fotos e incluirlas en tus newsletters es muy fácil!

1. Si buscamos por ejemplo imágenes de vacaciones y vemos los resultados de búsqueda de fotos que coinciden con la palabra clave “vacaciones”, nos aparece una gran selección de imágenes listas para ser utilizadas y adornar tus newsletters. Ten en cuenta que en la vista previa de la imagen te indicamos siempre a cuál de las tres plataformas pertenece, el enlace a la imagen original y un botón azul “Importar”.

Busca fotos gratuitas

2. Hacemos clic en “Importar” e importamos una de las fotos de los resultados de búsqueda. Ahora podemos verla añadida en el administrador de archivos:

Busca fotos gratuitas

3. Por último, haz clic en el botón Insertar a la derecha de la pantalla para añadir la imagen al correo.

¡Así de sencillo!


Edición de propiedades de imagen


Cuando añades una imagen o haces clic en una imagen añadida previamente a la plantilla, el Panel de Propiedades de contenido que aparece a la derecha te muestra una serie de opciones para editarla.

- Cambiar imagen: haz clic en este botón para sustituir la imagen actualmente utilizada por una nueva.

- Aplicar efectos: haz clic en este botón para utilizar la herramienta de edición de imágenes y cambiar el tamaño de la imagen, aplicar efectos visuales y mucho más.

- Url: este elemento especifica dónde se guarda la imagen. También puedes copiar y pegar una URL externa.

- Imagen Dinámica: Esta opción se debe activar si quieres añadir una imagen dinámica.

- Tamaño de imagen automático: activa y desactiva esta opción para rellenar automáticamente (ON) o no (OFF) el área del correo en el que colocaste la imagen.

- Alinear: cambia la posición de la imagen.

- Texto alternativo: Añade el texto alternativo que quieres mostrar cuando las imágenes no aparecen. Esto es clave a la hora de diseñar tu campaña ya que todavía hay clientes de correo electrónico que bloquean las imágenes de forma predeterminada.

- Acción: puedes enlazar la imagen a una URL específica, enviar un mail, un número de teléfono para hacer una llamada o enviar un SMS. También puedes enlazar la imagen a un archivo que hayas subido previamente a través del administrador de archivos haciendo clic en “Enlazar archivo”.


Uso de imágenes dinámicas para temporizadores de cuenta regresiva y contenido personalizado


Visión de conjunto

Las imágenes dinámicas son imágenes que cambian según uno o más valores transmitidos al sistema que las entrega.

Cuando añades un módulo Imagen desde la pestaña Contenido, verás que te aparece la opción para activar 'Imagen dinámica'.

Busca fotos gratuitas

Cuando se habilita “Imagen dinámica”, la 'URL' se convierte en la imagen de ejemplo que aparece en el editor. La 'URL dinámica' será aplicada en el código HTML. El tamaño de la imagen dinámica dependerá de la imagen de ejemplo.


El enlace de la imagen ya no es una URL estática como esta:

https://acumbamail.com/media/images_whitelabel/logo.png

... sino una URL que contiene una serie de variables, como por ejemplo un correo electrónico, el ID de un cliente, una fecha, etc.

https://acumbamail.com/media/?imageBanner={{customer_ID}}

Las variables son etiquetas merge (o literalmente desde el inglés “etiquetas de fusión”) en la URL compuesta por valores reales (por ejemplo, el ID de un cliente, el correo electrónico del destinatario, el nombre de la persona, una fecha etc) en el momento en el que se envía el correo electrónico o la landing se carga.

Objetivos

Los principales objetivos de esta característica son:

1. Facilitar el uso de imágenes de tipo dinámico.

2. Permitir que el diseñador aplique configuraciones de imagen como lo puede hacer con cualquier otra imagen estática.

3. Permitir que el diseñador trabaje con una imagen de muestra o mockup en el editor para temas de diseño y pueda acceder a una vista previa del resultado en tiempo real.

4. Evitar el uso del módulo HTML y Mergear características de contenido cuando se elige utilizar una imagen dinámica, para mantener la simplicidad y eliminar la necesidad de introducir un código HTML externo.

Ejemplos de utilización de imágenes dinámicas:

Algunos buenos ejemplos de usos de imágenes dinámicas incluyen:

- tarjetas personalizadas

- cuenta atrás

- anuncios dinámicos

- recomendaciones de productos

etc.

Veamos algunos ejemplos:

Tarjetas de cumpleaños personalizadas

¿Cómo se puede enviar una tarjeta de cumpleaños a miles de clientes, por correo electrónico, personalizada con su nombre? Con una imagen dinámica.

Con nuestra herramienta es muy fácil de hacer. Existen plataformas que pueden generar imágenes dinámicas en un momento, por ejemplo lo puedes hacer con Niftyimages.

Con nuestra herramienta, utilizar imágenes dinámicas nunca ha sido tan fácil.

En una imagen fija se utiliza un nombre codificado de forma fija ("Allan") en la URL (es decir, la URL puesta por defecto), mientras que en una URL dinámica se usa ("{{firstname}}") para ser sustituido en el momento del envío (o tiempo de rendering si es una página de destino) por el nombre del destinatario de la imagen, el nombre asociado al correo electrónico (o visitor de la landing).

Temporizadores de cuenta atrás dinámicos

Otra gran forma de aprovecharse de las imágenes dinámicas son las cuentas atrás.

Una vez introducida se pasará a una URL dinámica con la fecha de un evento, la hora de una gran inauguración de una nueva tienda, la fecha y hora en que vence una promoción ... lo que necesites en función del objetivo de tu campaña.

El sistema por otro lado generará automáticamente una animación GIF que se verá como un temporizador de cuenta regresiva, indicando el tiempo restante para cumplir dicho evento.

Puedes usar una imagen temporal en la URL mientras diseñas para ir viendo cómo se visualizará e insertará en el diseño final.

Hay muchos servicios que puedes usar para conseguir esto. Niftyimages pero también Fresh Relevance, CountdownMail y muchos otros.

Anuncios dinámicos

También puede usar imágenes dinámicas para generar ingresos con anuncios, si tienes una gran audiencia y estás abierto a la idea de alojar anuncios de terceros en tus campañas de email marketing. Empresas como LiveIntent ofrecen una solución de calidad para los que desean monetizar sus boletines de noticias, blogs, etc.

Diseño final con el ejemplo de Liveintent

Por lo general, deberás proporcionar las variables a LiveIntent, incluido el correo electrónico del suscriptor. Te ayudarán a configurar la URL dinámica, que luego simplemente tendrás que añadir en el campo correspondiente en el editor.

Preguntas frecuentes sobre imágenes dinámicas

¿Qué pasa si añado una URL dinámica pero dejo el campo de la URL vacío?

El campo URL dinámica solo está disponible cuando se ha seleccionado un archivo de imagen para ese bloque de contenido. Es decir, el campo URL no puede estar vacío.

¿Qué sucede si habilito la imagen dinámica pero dejo vacío el campo URL dinámica?

Cuando la herramienta genera el HTML de tu campaña de email marketing o landing, usará la imagen estática como siempre, sin tener en cuenta la configuración dinámica.

¿La URL dinámica puede ser un texto por defecto, como {{MyDynURL}} en lugar de https://someSite.com?someVariable={{MyDynURL}}?

Sí, no es necesario agregar el protocolo u otros elementos relacionados con la URL si ya lo proporciona tu plataforma de envío. Sin embargo, en muchos casos, utilizarás una URL para algún servicio y pasará a ser parte de la URL con algunas variables en forma de etiquetas merge, que serán utilizadas por ese servicio para crear o personalizar la imagen que se utilice.

- Las variables típicas incluyen: correo electrónico, nombre, fecha / hora, ID de cliente, ID de pedido, ID de la oferta, etc.

- La sintaxis de esas etiquetas de combinación dependerá completamente de ti. Por lo general, dependerá del sistema que envíe el correo electrónico o publique la landing. Esto es igual que usar cualquier otra etiqueta merge en el editor.

¿Qué sintaxis / caracteres se pueden usar como URL dinámica?

La herramienta no realizará ninguna verificación de la sintaxis proporcionada. Puedes usar cualquier sintaxis y/o caracteres que desees.

Regístrate gratis

Comienza a usar gratis nuestro servicio y disfruta de 2.000 emails al mes para siempre. No necesita tarjeta de crédito