10 min

En esta entrada hemos estudiado las distintas maneras en que las marcas utilizan los temporizadores de cuenta atrás en sus campañas de e-mail. Los elementos de cuenta atrás permiten añadir dinamismo e interactividad a los e-mail y atraer, al mismo tiempo, la atención sobre el mensaje. Las marcas los integran en sus comunicaciones para animar a los usuarios a beneficiarse de una oferta de último minuto, a registrarse  en los talleres, a seguir un evento y mucho más.

Hoy te mostramos en un sencillo tutorial cómo añadir un temporizador de cuenta atrás en tus e-mail. Utilizaremos el bloque HTML del editor de arrastrar y soltar de MailUp y una herramienta gratuita disponible online que permite generar el código HTML para el temporizador.

El tutorial está disponible en forma de vídeo (en inglés porque se hizo en las oficinas de MailUp de San Francisco); también puedes seguir la siguiente presentación paso a paso.

Herramientas necesarias

Hoy utilizaremos dos herramientas para construir nuestro temporizador dinámico:

  1. El editor de arrastrar y soltar BEE de MailUp. Su bloque de contenido HTML (el sexto recuadro abajo) permite añadir cadenas personalizadas de código HTML, exactamente como la que necesitaremos para el temporizador.
  2. Una herramienta para generar código HTML debajo del temporizador. Es conveniente asegurarse de elegir una herramienta que genere un GIF animado, para así saber exactamente cómo se verá en el e-mail. Nosotros hemos elegido Sendtric, pero hay muchas otras a disposición en la web (más detalles al final del texto).

Timer email BEE

Paso 1: Crear el mensaje con el editor BEE

Probaremos a reproducir el temporizador de cuenta atrás que aparece en el mensaje que anuncia el final de las rebajas de temporada de J. Crew Factory.

J Crew timer email

Una vez dentro del editor BEE, hay que abrir una plantilla simple, de una sola columna, para poder empezar a construir la cabecera. Se comienza añadiendo el bloque de imagen para el logotipo…

Timer conto alla rovescia email logo

Se pasa entonces al menú de navegación…

Timer conto alla rovescia email navigazione

Y al bloque de HTML para el temporizador…

Timer conto alla rovescia email blocco HTML

Añadimos otro bloque de texto bajo el temporizador y estamos listos para empezar a personalizar el mensaje. A nivel de contenido, haremos lo siguiente:

  • Cargar el logotipo de J.Crew Factory
  • Actualizar el texto

Por otro lado, a  nivel de formato, es necesario:

  • Actualizar el color y el estilo de la fuente (hemos elegido Tahoma cuerpo 14, negro sobre blanco y blanco sobre fondo negro)
  • Modificar a color negro el HTML correspondiente al color de fondo de la parte inferior de la cabecera.
  • Introducir líneas divisorias por encima y por debajo del menú de navegación.

¡Ya tenemos una buena parte! Veamos cómo está quedando el mensaje:

Timer email header

Paso 2: Crear el temporizador con Sendtric

Crear un temporizador con sendtric.com es fácil y rápido. Se comienza por introducir la fecha final de la cuenta atrás, que con esta herramienta puede establecerse hasta a un mes de distancia.

El segundo paso es personalizar los colores. El fondo sigue siendo negro, pero los números son de color verde para coordinarse con el resto del mensaje de J.Crew. También podríamos introducir con HTML el código de color exacto para estar completamente en línea con la identidad corporativa de la marca.

Para crear el temporizador debemos añadir también una dirección de e-mail (de modo que J.Crew pueda configurar sus campañas de e-mail). También se recomienda marcar la casilla para encapsular el temporizador en una tabla centrada.

Timer email Sendtric

Después de hacer clic en Generar, Sendtric nos lleva a una nueva ventana que contiene una vista previa del temporizador y un bloque de código HTML.

¡El temporizador está listo para usar!

Timer email Sendtric ok

Paso 3:  Añadir el temporizador al e-mail

Es el momento de copiar el código generado por Sendtric:

Sendtric timer email codice

Ya de nuevo en el editor BEE, basta hacer clic en el bloque HTML y pegar código dentro del campo Propiedades de Contenido, a la derecha. De esa manera, el temporizador se activa dentro del mensaje:

Timer email contenuto

En el modo Vista Previa, podemos comprobar que la anchura del temporizador se adapte correctamente a la visualización en pantallas más pequeñas. ¡Funciona!

Timer email preview

Herramientas adicionales para la creación de temporizadores

Hay varias plataformas online que permiten crear temporizadores para añadir en los e-mail de forma fácil y rápida. Por ejemplo:

¿Conoces alguno más? Comparte tu experiencia en los comentarios más abajo.

¿Te gustó este artículo? Tenemos muchos otros para ti.

Te mantendremos actualizado sobre las citas de marketing digital.

Lee también

Observatorio Estadístico 2020: resultados de 12 meses de envíos

El análisis de casi 14 mil millones de correos electrónicos reveló la tendencia de boletines informativos, DEM y correos electrónicos transaccionales, con algunos datos interesantes ...

Sigue leyendo

Email Marketing durante las semanas de emergencia: nuestro estudio y algunos consejos

Ciertamente, el engagement de algunos correos electrónicos podría mejorar dramáticamente en estos días. Sin embargo, al mismo tiempo, un mensaje incorrecto podría dañar tanto la ...

Sigue leyendo

Emojis y correo electrónico: últimas tendencias, el impacto en los clics y la optimización para lectores de pantalla

Desde nuevos emojis hasta su efectividad real en la línea de asunto y el cuerpo de los correos electrónicos y algunos consejos para optimizar su ...

Sigue leyendo

Longitud del email: mejores prácticas para campañas visuales y textuales

Desde la longitud vertical hasta el peso total, incluso el número de palabras: aclaremos los parámetros de longitud que favorecen las tasas de entrega, apertura ...

Sigue leyendo

Mapas de clics: qué son y cómo pueden mejorar el compromiso

La principal ventaja de los mapas de clics radica en ofrecer una imagen inmediata del compromiso de los destinatarios. Explicamos cómo funcionan y cómo se ...

Sigue leyendo

Guía para la segmentación del email: formas de pensar, herramientas y actividades

Organización de datos, tipos de segmentación, herramientas fundamentales y actividades para reenviar campañas que se ajusten a las características, intereses y necesidades de cada destinatario. Cuando ...

Sigue leyendo