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

6 consejos esenciales para crear títulos de e-mail irresistibles

Cuando repasas una página de tu plataforma de redes sociales preferida o un sitio web, ¿qué elemento del contenido te hace desear hacer clic y ...

Sigue leyendo

La diferencia entre un e-mail bueno y uno impresionante: 7 factores

Asunto, enfoque, seguimiento y mucho más. Aquí hay 7 tácticas operativas para crear email brillantes, efectivos y centrados en el cliente. Cada vez que aparece algo ...

Sigue leyendo

Tres tácticas de Email Marketing para fomentar la compra por impulso

El email marketing es uno de los mejores canales para traer tráfico a su sitio web. No solo puede usarlo para compartir noticias sobre su ...

Sigue leyendo

Tutorial: Cómo crear un e-mail en bloques de color

Nos gustan mucho los email coloreados. Un estilo que nos encanta (y lo vemos mucho) son los bloques de colores: la mitad del e-mail tiene un ...

Sigue leyendo

Tutorial: Cómo crear un e-mail con galería en cuadrícula para PC y móvil

¿Quieres diseñar un e-mail simple, hermoso, adaptable al móvil con un montón de fotos? Aquí encontrarás cómo. La entrada de hoy es una guía paso ...

Sigue leyendo

¿Cuánto valen tus campañas? Todo sobre el ROI del Email Marketing

Qué es, cómo calcularlo y con qué acciones optimizar la métrica del canal e-mail que responde a la más urgente de las preguntas: "¿qué rendimiento ...

Sigue leyendo