How to Build AMP Carousel with Stripo_Cover Image
13 octubre 2022

Cómo construir un carrusel AMP para tus correos electrónicos con Stripo

Cree hermosos correos electrónicos con tecnología AMP
Tabla de contenido
  1. Por qué construir correos electrónicos AMP con Stripo:
  2. Guía sobre cómo construir un carrusel AMP con Stripo:
  3. Construir un carrusel AMP con una descripción y "botones" sobre las imágenes
  4. Un consejo
  5. Los mejores ejemplos de carruseles de correo electrónico para su inspiración
  6. Conclusión
1.
Por qué construir correos electrónicos AMP con Stripo:

En marzo de 2019, Google lanzó AMP para los correos electrónicos. Desde julio de 2019, está disponible para los usuarios de G-Suite y está "activado" por defecto para todos los usuarios de Gmail.

AMP permite a los destinatarios añadir artículos necesarios a los carros, realizar encuestas, etc. Y, por supuesto, todas estas acciones pueden realizarse ahora directamente en los correos electrónicos.

Reducir el tiempo que se dedica a la producción de correos electrónicos mediante la automatización de la mayoría de los procesos ha sido siempre el objetivo principal de Stripo.

Por eso hemos desarrollado nuestro constructor de emails AMP y el bloque "AMP-carousel" de arrastrar y soltar para acelerar el proceso de diseño.

Cómo agregar un carrusel AMP de arrastrar y soltar al correo electrónico con Stripo

Antes de llegar a la guía, quiero destacar los beneficios de construir correos electrónicos AMP con Stripo.

Por qué construir correos electrónicos AMP con Stripo:

  1. No necesitas añadir ningún elemento de código AMPHTML en la cabecera del email.        
  2. No se requieren conocimientos de codificación: puedes beneficiarte de elementos listos para usar.  
  3. Ahorro de tiempo - simplemente insertas los enlaces a tus imágenes en un módulo de contenido.     
  4. Puedes establecer enlaces para cada una de las imágenes de tu carrusel AMP que construyas con Stripo. Estos enlaces llevarán a los destinatarios a las respectivas páginas de tu sitio web.

Guía sobre cómo construir un carrusel AMP con Stripo:

Se necesitan dos pasos para construir un carrusel AMP de imágenes con Stripo:

Paso 1. Construir el carrusel AMP por sí mismo

  • arrastrar el bloque de carrusel AMP en la plantilla de correo electrónico HTML con la que estás trabajando;

AMP Carousel Block

Verás que este elemento tiene el icono "⚡HTML" cerca de él. Esto significa que este elemento se mostrará sólo en los correos electrónicos de AMP y se ocultará en los clientes de correo electrónico que no soportan AMP. Tendremos que construir un fallback para otros destinatarios. Hablaremos de ello más adelante.

Módulo AMPHTML en tu correo electrónico

  • haz clic en el icono "⚡ HTML" para activar el panel de configuración;
  • sube la imagen 1 ´para tu diapositiva;
  • ahora, en el panel de configuración, tienes que activar el botón "Mostrar vista previa" si quieres mostrar pequeñas imágenes de vista previa;
  • establecer el ancho de estas imágenes de vista previa;    

Conmutación del botón de vista previa y configuración del ancho de la vista previa

  • introducir el texto ALT; 
  • pegar un enlace al artículo respectivo del producto;

Añadir imágenes a las diapositivas _ Carrusel AMP con Stripo

  • pulsar el botón "Añadir diapositiva";

Botón de añadir diapositiva _ Construir carrusel AMP con Stripo

  • hacer lo mismo con otras imágenes;  
  • comprueba si los tamaños de todas las imágenes coinciden. Si no lo hacen, recórtalas con nuestro editor de fotos;
  • alternar el botón "Autoplay" si quieres que tus diapositivas cambien automáticamente;
  • activar el botón "Bucle" para que las diapositivas se muestren desde el principio cuando el usuario haga clic en la última imagen;

Cómo configurar tu carrusel AMP en Stripo

  • encontrar la sección "Vista previa de diapositivas" y elegir dónde se mostrará;

Sección de vista previa de diapositivas _ Stripo

  • activa el botón "Vista previa personalizada" para seleccionar el tipo de vista previa (imagen o color);

Establecer la vista previa personalizada en Stripo

  • activar el botón "Enlace general" para añadir un único enlace a todo el carrusel AMP;
  • ¡listo!

Construir AMP-carrusel con Stripo ahora
Comenzar

Es importante tenerlo en cuenta:

He añadido 16 diapositivas y todas han funcionado bastante bien en Gmail en varios dispositivos.

Paso 2. Construir una reserva para otros destinatarios

Así que, ahora que todos los destinatarios que utilizan Gmail verán este carrusel, tenemos que pensar en los que prefieren otros clientes de correo electrónico.

El carrusel AMP que acabamos de construir funciona bien en los equipos de escritorio de Gmail por defecto.

Ahora es el momento de construir una alternativa para otros.

En este caso, hay dos tipos de fallback:

Tipo 1: Carrusel interactivo

Este carrusel sólo es compatible con los dispositivos de Apple y con Yahoo! Mail.

  • construir un carrusel de contenido regular con FreshInbox;
  • copiar el código de incrustación;
  • arrastrar el bloque HTML a su plantilla de correo electrónico;
  • hacer doble clic en él para activar el editor de código;
  • en el editor de código, pegar el código;
  • cerrar el editor de código;

Cerrar el botón del editor de código _ Construir correos electrónicos AMP con Stripo

  • haga clic en este módulo justo en la plantilla para activar el panel de configuración;
  • en el panel de configuración, busca la línea "Incluir en" y selecciona la opción "HTML". Al hacer esto, te aseguras de que este módulo de contenido se mostrará sólo en aquellos clientes de correo electrónico, que no soportan AMP para los correos electrónicos.

Incluir en el botón HTML _ Construir un correo electrónico AMP

Esto significa que cada cliente de correo electrónico decide qué versión de su carrusel mostrar.

Es importante tenerlo en cuenta:

Si el cliente de correo electrónico del destinatario no admite este tipo de interactividad, sólo verá la primera imagen.

Para más información sobre cómo construir un carrusel de imágenes interactivo, por favor lee este post.

Tipo 2. Módulos de contenido de productos estáticos

  • arrastra una estructura de 2 columnas en su plantilla de correo electrónico;
  • suelta el bloque de imágenes en la 1ª columna;
  • sube una imagen necesaria;
  • suelta el bloque de texto en la 2ª columna;
  • envuelve este texto en una fuente a juego;
  • en el panel de configuración, busca la sección "Incluir en" y selecciona la opción "HTML". Como hemos dicho, al hacer esto, te aseguras de que este módulo de contenido se mostrará sólo en aquellos clientes de correo electrónico que no soportan AMP para los correos electrónicos.

Módulos de contenido de productos _ Creación de correos electrónicos AMP

Puede añadir tantos módulos de productos a su correo electrónico como necesite. Para obtener más información sobre cómo ahorrar tiempo al construir elementos de correo electrónico similares, por favor lee este post, la sección "Copiar y mover elementos".

Es importante tenerlo en cuenta:

Una vez que se pulsa la opción "Incluir en HTML", el elemento elegido se mostrará en aquellos clientes de correo electrónico que sólo admiten el tipo de archivo HTML tradicional.

Si pulsa la opción "Incluir en AMPHTML" (⚡HTML), el elemento elegido se mostrará en los clientes de correo electrónico que admitan AMPHTML (text-x-amphtml) MIME-type.

Si no se establece ninguno para un elemento de correo electrónico en particular, este elemento se mostrará en todos los dispositivos y todos los clientes de correo electrónico.

Siguiendo estos sencillos pasos, hemos construido un sencillo carrusel AMP: hemos utilizado imágenes sin descripciones. Funciona mejor cuando demuestras unos pocos artículos de un tipo o el mismo producto desde diferentes ángulos.

¿Pero qué pasa si necesitas un carrusel complejo con imágenes más informativas y botones "falsos" sobre ellas? Todavía puedes hacerlo con Stripo ya que nuestro editor permite añadir texto sobre las imágenes y aplicar múltiples filtros ;).

Construir un carrusel AMP con una descripción y "botones" sobre las imágenes

Por lo tanto, en primer lugar, usted necesita para construir un AMP-carrusel regular como se describe en el párrafo anterior. Ahora, vamos a proceder al diseño de las diapositivas:

a) escribir sobre las imágenes

  • una vez que hayas subido una imagen, abre el editor de fotos;

Construyendo AMP Email con Stripo _ Editar imágenes

  • en el panel de configuración del editor de fotos, elige la opción "Texto" para colocar una copia sobre tus imágenes. El editor ofrece alrededor de 1000 fuentes;

Editor de fotos integrado

  • elige el tipo de letra y el color;
  • en la esquina superior derecha del editor, haga clic en el botón "Aplicar" para guardar estos parámetros.     

b) colocar un "botón" CTA sobre sus imágenes

  • en primer lugar, usted necesita para preparar este botón - el formato de imagen debe ser SVG o cualquier otro con un fondo transparente;         
  • en la esquina superior izquierda del panel de configuración, haga clic en el botón "Abrir"; 
  • seleccionar la opción "Imagen superpuesta";

Añadir un botón CTA como imagen

  • sube la imagen de tu botón;    
  • colocarlo exactamente donde quieres verlo en tu diapositiva;  
  • establecer los tamaños;

Añadir un botón CTA a su diapositiva

  • haz clic en el botón "Guardar" para guardar los cambios que has hecho en la diapositiva.

El botón de guardar _ Trabajar con el editor

Esto es lo que acabamos de construir juntos:

Un consejo

Aquí hay un recordatorio amistoso. Para poder enviar contenido AMP, es necesario:

  • obtener whitelisted con Google;
  • arreglar todos los errores si se produce alguno. Los verás en el modo previo (de lo contrario, los usuarios verán un correo electrónico HTML);
  • añadir el fallback - versión HTML - a este correo electrónico;
  • asegúrese de que su ESP/CRM es capaz de enviar correos electrónicos AMP;
  • tener en cuenta que actualmente sólo Gmail (tanto aplicaciones web como móviles en todos los sistemas operativos) y Yahoo! Mail son capaces de renderizar correos electrónicos AMP;
  • los correos electrónicos de AMP pierden sus componentes de AMP si los reenvías.

Los mejores ejemplos de carruseles de correo electrónico para su inspiración

Ahora que ya sabes cómo construir carruseles con AMP en cuestión de minutos, vamos a ver cómo las empresas más populares se benefician de esta función.

Aquí tienes los 5 mejores ejemplos de carruseles para alimentar tus ideas creativas:

1. Stripo

A menudo añadimos carruseles a nuestro boletín semanal para que sea más funcional y llame la atención. En este ejemplo, permitimos a los suscriptores navegar por nuevas plantillas de correo electrónico para encontrar la más adecuada.

(Fuente: Correo electrónico de Stripo)

2. Breguet

En este ejemplo, la empresa utilizó un carrusel para mostrar a los suscriptores sus productos y ofrecer a los destinatarios la posibilidad de reservar una cita sin tener que salir de sus bandejas de entrada.

Ejemplo de carrusel de correo electrónico de Breguet

(Fuente: Correo electrónico de Breguet)

3. MamaGourmand

MamaGourmand utilizó el carrusel de imágenes de AWeber para compartir ideas de recetas con los suscriptores. Es una forma excelente de atraer a los destinatarios y mostrar una variedad de sus productos o servicios.

(Fuente: Correo electrónico de MamaGourmand)

4. Offset

Además de ofrecer a los suscriptores que compren sus productos, puede utilizar los carruseles para crear contenido entretenido. En el siguiente ejemplo, puedes ver cómo un popular recurso de imágenes diseñó el correo electrónico con un carrusel para mostrar a sus suscriptores una colección de hermosas fotos.

(Fuente: Correo electrónico de Offset)

5. HP

HP ha añadido un carrusel a su correo electrónico para presentar un nuevo ordenador y mostrarlo desde diferentes ángulos. Es una forma fantástica de ofrecer a los clientes más detalles, pero es vital asegurarse de que las fotos del producto sean claras y estén bien iluminadas.

En este ejemplo, el carrusel está hecho con HTML5, pero puedes construir lo mismo usando AMP.

(Fuente: Correo electrónico de HP)

Conclusión

Acabamos de construir 2 carruseles AMP para permitirle mostrar sus productos desde diferentes ángulos o demostrar nuevos productos de su colección. Cada diapositiva lleva a los destinatarios a las respectivas páginas de su sitio web. Esta es una buena manera de animar sus correos electrónicos, atraer al público objetivo y hacer que los mensajes sean más funcionales.

Para saber cómo previsualizar y exportar sus correos electrónicos AMP, por favor lee los párrafos respectivos en nuestro post.

Construir correos electrónicos potenciados por AMP puede ser pan comido si utilizas la herramienta Stripo constructo de correo electrónico AMP ;).

Comience a crear hermosos correos electrónicos con AMP con Stripo hoy mismo
¿Le resultó útil este artículo?
Tell us your thoughts
¡Gracias por sus comentarios!
2 comentarios
Elly Peers hace 4 años
How does this look / functon in other non-AMP compatible email providers? Like older Outlooks for exmaple? Thanks
Hanna Kuznietsova hace 4 años
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.
Escribe a
Industria
Temporadas
Integración
Editor Stripo
Simplifique el proceso de producción de correos electrónicos.
Plugin de Stripo
Integre el editor Stripo drag-n-drop a su aplicación web.
Pide una plantilla personalizada
Nuestro equipo puede diseñarlo y programarlo para usted. Simplemente rellene el formulario y nos pondremos en contacto con usted en breve.