Diseño Plantillas How-to
~ 8 min. leídos
2 comentarios
34641 vistas
valóralo
23 junio 2019

Cómo Crear un carrusel AMP para Tus Emails con Stripo

Stripo / Blog / Cómo Crear un carrusel AMP para Tus Emails con Stripo

Este mes de marzo, Google lanzó su AMP para emails. Y el 2 de julio estará disponibles para usuarios de G Suite y estará “encendido” por defecto para todos los usuarios de Gmail.

Sabemos que esto permitirá a los lectores añadir artículos al carrito, aplicar efecto lightbox a las imágenes y otras cosas más. Y, por supuesto, todas estas acciones pueden ahora hacerse directo en los emails.

Esta es la nueva era del email marketing que, de hecho, nos lleva a grandes oportunidades: Los ESP ahora deben modificar sus tipos de protocolo, los lectores deben aprender que los emails ahora son versiones pequeñas de sitios web y son casi igual de funcionales que estos, y nosotros, como especialistas en marketing, necesitamos adquirir nuevas habilidades de código. Todos estos cambios consumen mucho tiempo.

Reducir el tiempo que pasas en la producción del email automatizando los procesos de creación siempre ha sido la meta principal de Stripo.

Por lo tanto, nos esforzamos por automatizar la creación de emails con AMP. El 18 de junio lanzamos nuestro bloque “Carrusel AMP” para arrastrar y soltar.

Building-AMP-carousel-with-Stripo_Simple-Carousel

Antes de comenzar con la guía, quisiera resaltar los beneficios de crear emails AMP con Stripo.

Por qué crear emails AMP con Stripo:

  1. No necesitas añadir elementos de código AMPHTML al encabezado del email;
  2. No hace falta habilidades de código — utilizas un elemento ya preparado;
  3. Ahorra tiempo — simplemente insertas los enlaces a tus imágenes en este módulo de contenido;
  4. Por cada imagen en tu carrusel AMP que creas con nosotros, puedes fijar los enlaces que llevará a los lectores a las respectivas páginas de tu sitio web.

Guía de cómo crear un carrusel AMP con el editor Stripo:

Son dos pasos para crear un carrusel AMP de imágenes con Stripo:

Paso 1. Crear el carrusel AMP en sí

  • arrastra el bloque carrusel AMP en la plantilla HTML con la que estés trabajando;

Building AMP Carousel With Stripo_Blocks_ES

Verás que este elemento tendrá un símbolo “⚡HTML” cerca. Esto significa que este elemento solo se mostrará en emails AMP, y estará oculto en los clientes de email que no soporten AMP. Necesitaremos crear un plan b para otros lectores. Hablaremos de eso luego.

AMPHTML-odule-in-Email

  • haz doble clic para activarlo en el panel de ajustes;
  • ahora, en el panel de ajustes, necesitas activar el botón “Display preview” si quieres mostrar pequeñas imágenes previas;
  • fija el ancho para estas imágenes previas;

Building AMP Carousel_Preview Image Button

  • Carga la imagen 1 para tu diapositiva;
  • ingresa el texto Alternativo;
  • pega un enlace al producto respectivo;

Building AMP Carousel_Slides_ES

  • presiona el botón “Add slide”;

Building AMP Carousel_Add New Slide Button

  • haz lo mismo con otras imágenes;
  • verifica si los tamaños de las imágenes coinciden. Si no, recórtalas con nuestro editor de imágenes;
  • ¡listo!

Dragging-Image-AMP-carousel

Crea un carrusel AMP con Stripo Ahora

Nota importante:

He añadido 16 diapositivas, y todas funcionaron bastante bien en Gmail en varios dispositivos.

Paso 2. Crear un plan b para otros lectores

Entonces, ahora que todos los lectores que usan Gmail verán este carrusel, necesitamos pensar en quienes prefieren utilizar otros clientes.

El carrusel AMP que hemos construido funciona bien en la versión de escritorio en Gmail por defecto. 

Debemos crear un plan b para los demás. 

En este caso, hay dos tipos de plan b:

Tipo 1: Carrusel interactivo

Es soportado solo por dispositivos Apple y por Yahoo! Mail.

  • crear un carrusel de contenido regular con FreshInbox;
  • copia el código incrustado;
  • arrastra el bloque HTML a tu plantilla de email;
  • haz doble clic para activar el editor de código;
  • en el editor de código, pega el código;
  • cierra el editor de código;

The-Close-the-Code-Editor-Button_Building-AMP-Emails-with-Stripo

  • haz doble clic en este módulo en la plantilla para activar el panel de ajustes;
  • en el panel de ajustes, en la línea “Include in”, selecciona la opción “HTML”. Al hacer esto, te asegurarás de que este módulo de contenido se mostrará solo en esos clientes de email, que no soportan AMP para los emails.

Include in HTML Button

¡Esto quiere decir que cada cliente de email decide qué versión de tu carrusel mostrar!

Nota importante:

Si el cliente de email de un lector no soporta este tipo de interactividad, solo verá la primera imagen.

Para más información sobre cómo crear un carrusel interactivo, por  favor, lee esta publicación.

Tipo 2. Módulos de contenido de producto estático

  • arrastra una estructura de 2 columnas en tu plantilla de email;
  • suelta el bloque de imagen en la 1er columna;
  • carga la imagen necesaria;
  • suelta el bloque de texto en la 2da columna;
  • coloca este texto en una fuente que combine;
  • en el panel de ajustes, en la sección “Include in”, selecciona la opción “HTML”. Como dijimos, al hacer esto te aseguras de que este módulo de contenido se mostrará solo en los clientes de email que no soporten AMP.

Product-Content-Modules_Building-AMP-Emails

Puedes añadir tantos módulos de producto como necesites. Para más información sobre cómo ahorrar tiempo al crear elementos similares, por favor lee esta publicación del blog, la sección “Copiar y mover elementos”.

Nota importante:

Una vez que actives la opción “Include in HTML”, el elemento elegido se mostrará en los clientes de email que soporten solo el tipo HTML tradicional.

Cuando actives la opción “Include in AMPHTML” (⚡HTML), el elemento seleccionado se mostrará en los clientes que soporten el tipo AMPHTML (text-x-amphtml).

Si no se selecciona ningún elemento en particular, este elemento se mostrará en todos los dispositivos y en todos los clientes.

Con estos pasos, hemos creado un carrusel AMP — se usaron imágenes sin descripción. Funciona mejor cuando quieres mostrar unos cuantos productos del mismo tipo o producto desde diferentes ángulos.

Pero ¿y si necesitas un carrusel complejo con más información y botones falsos? Puedes hacerlo también ya que nuestro editor permite añadir texto sobre imágenes y aplicar múltiples filtros ;)

Crear un carrusel AMP con descripciones y “botones” sobre imágenes

Antes que nada, necesitas crear un carrusel AMP regular como ya describimos anteriormente. Ahora, vayamos al diseño de las diapositivas:

a) escribir sobre las imágenes

  • una vez que cargas una imagen, abre el editor de imágenes;

Edit Image Button_Building AMP Emails with Stripo

  • en el panel de ajustes del editor de imágenes, elige la opción “ATEXT” para colocar texto sobre tus imágenes. El editor ofrece unas 1000 fuentes;

Embedded Photo Editor_Es

  • elige el tipo de fuente, el color;  
  • en la esquina superior derecha del editor, haz clic en el botón “apply” para guardar estos parámetros.

b) colocar un “botón” CTA sobre tus imágenes

  • primero, necesitas preparar este botón — el formato de imagen debería ser SVG o cualquier otro con fondo transparente; 
  • en la esquina superior izquierda en el panel de ajustes, haz clic en el botón “Open”;
  • selecciona la opción “overlay image”.

Adding Second Image in Embedded Photo Editor

  • carga tu imagen de botón;
  • colócala justo donde quieres que se vea en tu diapositiva;
  • coloca el tamaño;
  • haz clic en el botón “save” para guardar los cambios que has hecho a la diapositiva.

Save Button_Embedded Photo Editor

Así, esto es lo que hemos creado juntos:

Building-AMP-carousel-with-Stripo-Images-with-Button

Cuáles clientes de email soportan AMP actualmente:

  • Gmail de escritorio — ya lo hace;
  • Mail.ru — ya lo hace.

Yahoo, AOL y Outlook lo harán pronto.

Conclusiones

Hemos creado 2 carruseles AMP sin abrir el editor de código HTML. Cada diapositiva muestra a los lectores tus productos desde diferentes ángulos o los últimos artículos de tu colección. Y cada diapositiva, cuando se hace clic, lleva a los lectores a las páginas respectivas de tu sitio web. Esta es una buena manera para dar vida a tus emails, para interactuar mejor con tu audiencia y para hacer los emails más funcionales.

Para saber más sobre cómo previsualizar y exportar tus emails AMP, por favor, lee los párrafos respectivos en nuestra publicación en el blog.

Crear emails con AMP puede ser algo fácil si utilizas el creador de plantillas de email Stripo ;)

Por favor, ten en cuenta que necesitas estar en la lista blanca de Google para tener permitido enviar emails AMP.

Prueba Stripo

Elly Peers hace 1 año

How does this look / functon in other non-AMP compatible email providers? Like older Outlooks for exmaple? Thanks

Hanna Kuznietsova comentado en Elly Peers hace 1 año

Hello, Elly. Thank you for your question. If your ESP or a recipient's email client is not on the list, he or she will see just the traditional HTML version of your email. And AMP element will be just cut off. List of ESPs that currently support AMP: 1. eSputnik — via the API method only. The SMTP method will be added soon; 2. Amazon SES and PinPoint — via the API method only; 3. SparkPost — via the SMTP and API methods; 4. SendGrid — via the API method only; As for email clients, only two do support AMP today: Gmail; Mail.ru. Outlook says they are about to release AMP support this summer. In this blog post, we show how to build and add a fallback in your email to make sure all recipients see your promo emails. Thank you. Hope this helps.

Te podría interesar

← anterior siguiente →
9 días · 8 min. leídos
Cómo Crear una Plantilla de Email de Boletín de Noticias para Outlook con Stripo

Hasta hace poco era difícil, casi imposible, enviar emails de boletines HTML vía Outlook que se mostraran correctamente. Y Stripo encontró la solución. Desde ahora, puedes exportar plantillas de email HTML desde nuestro editor para Outlook. Pero, ¿por qué usar Outlook cuando puedes enviar emails con GetResponse, eSputnik o cualquier otro ESP? Hay algunas razones... Por qué decidimos añadir la exportación directa a Outlook Muchos de nuestros usuarios se comunican con nosotros para preguntarnos cómo pueden exportar plantilla a este...

Marketing Plantillas How-to
28 abril · 18 min. leídos
Mejores Fuentes para Email: Consejos y Trucos de Uso

Una de las principales preocupaciones en el proceso de creación de email es elegir la fuente. Peso, altura, ancho, color, forma, espaciado... ¿Todo importa? Sí, importa. Pero lo más importante es elegir la fuente que sea fácil de leer, todo lo demás son detalles menores. Mira nuestro video corto sobre fuentes, los tipos, fuentes seguras para usar en la web, y cómo aplicar fuentes festivas con Stripo. Y lo más importante, cómo elegir la fuente adecuada para tus plantilla de...

Diseño Plantillas
Mantente siempre atento/a a las últimas noticias de marketing de correo electrónico, guías, artículos e instrucciones