Diseño Marketing Plantillas How-to AMP
~ 8 min. leídos
58976 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.

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!

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:

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 2 años

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 2 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.

Te podría interesar

anterior siguiente
3 días · 18 min. leídos
Los mejores tipos de letra para el correo electrónico: Consejos y trucos de uso

Una de las preocupaciones más llamativas en el proceso de producción del correo electrónico es la elección del tipo de letra adecuado. El peso, la altura, la anchura, el color, la forma, el espaciado... ¿Todo es importante? Sí, lo es, pero también una de las cosas más cruciales es elegir la fuente que sea legible. En este post, vamos a mostrarle cómo elegir la mejor fuente profesional para el correo electrónico. Diseñe elegantes correos electrónicos con Stripo en un abrir...

Diseño Plantillas
Greatest Examples of GIF animations in Emails_Cover Image
27 octubre 2021 · 10 min. leídos
16 grandes ejemplos de GIFs animados en correos electrónicos

Los GIFs en los correos electrónicos serán de gran utilidad si quieres mostrar tu producto, llamar la atención de los usuarios sobre ciertos elementos, o simplemente decorar ligeramente tu texto. En este artículo, hemos proporcionado algunos de los mejores ejemplos de animación gif en correos electrónicos. Ejemplos de GIFs animados en correos electrónicos Aquí tienes una recopilación de los mejores ejemplos con GIFs en correos electrónicos. Cada GIF cumple su misión. 1. Adidas (Fuente: Correo electrónico de Adidas) Adidas utilizó...

Diseño Marketing
08 abril 2021 · 17 min. leídos
Los 14 mejores ejemplos de diseño de firmas de correo electrónico

Las buenas firmas de correo electrónico nos ayudan a construir nuestro negocio y a causar una buena impresión a los clientes. Dado que es el último elemento que la gente ve en los correos electrónicos, debemos hacer que nuestras firmas personales sean creativas y memorables. Examinemos los mejores ejemplos de firmas de correo electrónico y su uso apropiado en correos electrónicos y plantillas de boletines para correo electrónico. Cabe mencionar que todos los tipos de negocios requieren firmas de correo electrónico...

Diseño Marketing Plantillas
banner9
11 septiembre 2020 · 15 min. leídos
10 Mejores Creadores de Plantillas Para Email Gratuitos del 2021

¿Todos los creadores de plantillas para email lucen similares? ¿Estás confundido sobre cuál usar para crear las mejores plantillas para email? Por supuesto, hay muchos de ellos. Vamos a analizar varios de ellos para encontrar sus características que los distinguen. Intentaré crear la misma plantilla en todos los editores para los mismos archivos de medios. Veamos en qué difieren los creadores. Para esto hemos elegido Stripo.email y sus competidores: BEE Free, CampaignMonitor, EDM Designer, GetResponse, Mailchimp, MailStyler2, Mosaico, Topol.io, Unlayer. Algunas...

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