Editor de Demo Entrar →
Design Marketing Modelos Como fazer AMP
~ 8 minutos de leitura
58774 visualizações
23 junho 2019

Como construir um carrossel AMP para seus e-mails com Stripo

Stripo / Blog / Como construir um carrossel AMP para seus e-mails com Stripo

Em março deste ano, o Google lançou seu suporte à conteúdo AMP para e-mails. A partir de 2 de julho, estará disponível mesmo para os usuários do G-Suite e estará ativado por padrão para todos os usuários do Gmail.

Sabemos que isso permitirá que os destinatários adicionem itens necessários aos carrinhos, apliquem o efeito lightbox à imagens e assim por diante. E, claro, todas essas ações agora podem ser feitas diretamente nos e-mails.

Esta é a nova era do marketing por e-mail que, de fato, leva a grandes mudanças: Os serviços de envio de e-mails agora precisam modificar seus tipos de protocolo, os destinatários precisam aprender que os e-mails são agora pequenas versões dos sites e são quase tão funcionais quanto eles, e nós, como profissionais de marketing por e-mail, precisamos aprender novas habilidades de programação. Todas essas mudanças são tão demoradas.

Reduzir o tempo que você gasta na produção de e-mails, automatizando a maioria dos processos de construção, sempre foi o principal objetivo da Stripo.

Portanto, nos esforçamos para automatizar a criação de e-mails com base no conteúdo AMP. Em 18 de junho, lançamos nosso bloco de arrastar e soltar “Carrossel AMP”.

Antes de chegar ao guia, quero destacar os benefícios da criação de e-mails com conteúdo AMP com a plataforma Stripo.

Por que criar e-mails com AMP com o Stripo:

  1. Você não precisa adicionar nenhum elemento de código AMPHTML ao cabeçalho do e-mail;

  2. Não é preciso saber programar — você usa um elemento já preparado;

  3. Economia de tempo — basta inserir os links para suas imagens neste módulo de conteúdo;

  4. Para cada imagem no carrossel AMP que você cria conosco, você pode definir links que levarão os leitores às respectivas páginas da sua página.

Guia sobre como construir um carrossel AMP com o editor Stripo:

São necessários apenas dois passos para construir um carrossel AMP com Stripo:

Passo 1: Construindo o carrossel AMP por si

  • arraste o bloco do carrossel AMP no template de e-mail HTML com o qual você está trabalhando;

Building AMP-carousel_Dragging AMP-carousel into template_Stripo

Você verá que este elemento terá o sinal “⚡HTML” próximo a ele. Isso significa que esse elemento será mostrado apenas nos e-mails com AMP e ficará oculto nos clientes de e-mails que não suportam AMP. Precisamos criar um substituto para outros destinatários. Vamos falar sobre isso mais tarde.

AMPHTML odule in Email

  • clique duas vezes para ativá-lo no painel de configurações;

  • agora, no painel de configurações, você precisa alternar o "botão Exibir" se quiser mostrar pequenas imagens de visualização;

  • defina a largura para essas imagens de visualização;

Toggling Preview Button and Setting Preview Width

  • envie a imagem 1 para o seu slide;

  • informe o texto alternativo;

  • cole um link para o respectivo item do produto;

Adding Images to Slides_AMP Carousel with Stripo

  • clique no botão "Adicionar slide";

Add Slide Button_Building AMP Carousel with Stripo

  • faça o mesmo com outras imagens;

  • verifique se os tamanhos de todas as imagens correspondem. se não, corte-as com o nosso editor de fotos;

  • pronto!

Construa o carrossel AMP com o Stripo agora mesmo

Observações importantes:

Eu adicionei 16 slides, e todos funcionaram muito bem no Gmail em vários dispositivos.

Passo 2: Criando um substituto para outros destinatários

Então, agora que todos os nossos destinatários que usam o Gmail verão esse carrossel, precisamos pensar naqueles que preferem outros clientes de e-mail.

O carrossel AMP que acabamos de criar funciona bem em desktops no Gmail por padrão.

Precisamos criar uma alternativa para os outros.

Nesse caso, existem dois tipos de alternativa:

Tipo 1: Carrossel interativo

Ele é suportado apenas pelos dispositivos da Apple e pelo Yahoo! Mail.

  • construir um carrossel de conteúdo regular com FreshInbox;
  • copie o código de incorporação;
  • arraste o bloco HTML para o seu template de e-mail;
  • clique duas vezes para ativar o editor de código;
  • no editor de código, cole o código;
  • feche o editor de código;

The Close the Code Editor Button_Building AMP Emails with Stripo

  • clique duas vezes neste módulo no template para ativar o painel de configurações;
  • no painel de configurações, na linha "Incluir em", selecione a opção "HTML". Ao fazer isso, você garante que esse módulo de conteúdo seja exibido apenas nos clientes de e-mail, que não oferecem suporte a AMP para e-mails.

The Include in HTML Button_Building AMP Emails

Isso significa que cada cliente de e-mail decide qual versão do seu carrossel exibir!

Observações importantes:

Se o cliente de e-mail de um destinatário não oferecer suporte a esse tipo de interatividade, ele verá apenas a primeira imagem.

Para mais informações sobre como construir um carrossel interativo de imagens, por favor, leia esta postagem do blog.

Tipo 2. Módulos de conteúdo estático de produto

  • arraste uma estrutura de 2 colunas no seu template de e-mail;
  • solte o bloco de imagem na primeira coluna;
  • faça o upload de uma imagem necessária;
  • solte o bloco de texto na segunda coluna;
  • envolva este texto com uma fonte correspondente;
  • no painel de configurações, na seção "Incluir em", selecione a opção "HTML". Como dissemos, ao fazer isso, você garante que esse módulo de conteúdo seja exibido apenas nos clientes de e-mail, que não oferecem suporte a AMP para e-mails.

Product Content Modules_Building AMP Emails

Você pode adicionar tantos módulos de produtos ao seu e-mail quanto precisar. Para mais informações, sobre como economizar tempo ao criar elementos de e-mail semelhantes, por favor leia esta postagem do blog, a seção "Copiando e movendo elementos".

Observações importantes:

Depois de clicar na opção "Incluir em HTML", o elemento escolhido será mostrado em todos os clientes de e-mail, que suportam apenas o tipo tradicional de HTML-mime.

Quando você clicar na opção "Incluir no AMPHTML" (⚡HTML), o elemento escolhido será mostrado nos clientes de e-mail que suportam o AMPHTML (text-x-amphtml) tipo MIME.

Se nenhum for definido para um elemento de e-mail específico, esse elemento será mostrado em todos os dispositivos e em todos os clientes de e-mail.

Ao seguir essas etapas simples, criamos um carrossel AMP simples - você usou imagens sem descrições. Ele funciona melhor quando você demonstra alguns itens de um tipo ou o mesmo produto de diferentes ângulos.

Mas e se você precisar de um carrossel complexo com fotos mais informativas e botões “falsos” sobre elas? Você ainda pode fazer isso conosco, pois nosso editor permite adicionar texto sobre imagens e aplicar vários filtros ;)

Construindo o carrossel AMP com descrição e “botões” sobre as imagens

Então, primeiro de tudo, você precisa construir um carrossel AMP regular como descrito no parágrafo acima. Agora, vamos continuar com o design dos slides:

a) escrevendo sobre as imagens

  • Depois de carregar uma imagem, abra o editor de fotos.

Buildng AMP Emails with Stripo Editing Images

  • no painel de configurações do editor de fotos, escolha a opção “ATEXT” para escrever sobre suas imagens. O editor oferece cerca de 1000 fontes;

Embedded Photo Editor_Stripo

  • escolha o tipo de fonte e a cor;

  • no canto superior direito do editor, clique no botão "aplicar" para salvar esses parâmetros.

b) colocando um “botão” de CTA sobre suas imagens

  • primeiro de tudo, você precisa preparar este botão - o formato da imagem deve ser SVG ou qualquer outro com um fundo transparente;

  • no canto superior esquerdo no painel de configurações, clique no botão "Abrir";

  • selecione a opção “imagem sobreposta”;

Adding CTA Button as an Image_Stripo

  • carregue sua imagem de botão;

  • coloque-o exatamente onde você quer vê-lo no seu slide;

  • defina os tamanhos;

  • clique no botão "Salvar" para salvar as alterações que você fez no slide.

The Save Button_Working with the Editor

Então, eis o que acabamos de criar juntos:

Quais clientes de e-mail oferecem suporte às AMP hoje:

  • Gmail desktop — já suporta;
  • Mail.ru já suporta;

Yahoo, AOL e Outlook suportarão em breve.

Considerações finais

Acabamos de construir 2 carrosséis AMP sem precisar editar código HTML. Qualquer slide de cada um mostra os destinatários de seus produtos de diferentes ângulos ou os itens mais recentes de sua coleção. E cada slide, uma vez clicado, leva os destinatários para as respectivas páginas do seu site. Essa é uma boa maneira de dar vida aos seus e-mails, interagir melhor com seu público e tornar os e-mails mais funcionais.

Para saber como visualizar e exportar seus e-mails com conteúdo AMP, por favor leia os respectivos parágrafos em nossa postagem no blog.

Criar e-mails com tecnologia AMP pode ser fácil se você usar o construtor de templates de e-mail do Stripor ;)

Por favor, esteja ciente de que você precisa entrar na lista de permissões com o Google para poder enviar e-mails com conteúdo AMP.

Experimente o Stripo

Elly Peers há 2 anos

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

Hanna Kuznietsova comentou com Elly Peers há 2 anos

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.

Você talvez se interesse por

anterior próximo
Greatest Examples of GIF animations in Emails_Cover Image
27 outubro 2021 · 10 minutos de leitura
16 ótimos exemplos de GIFs animados em e-mails

GIFs em e-mails serão de grande utilidade se você quiser mostrar seu produto, chamar a atenção dos usuários para determinados elementos ou apenas decorar levemente seu texto. Neste artigo, fornecemos alguns dos melhores exemplos de animação gif de e-mail. Exemplos de GIFs animados em e-mails Aqui está um compilado dos melhores exemplos com GIFs em e-mails. Cada GIF cumpre sua missão. 1. Adidas (Fonte: E-mail da Adidas) A Adidas usou animações de e-mail para mostrar quais opções de cores eles...

Design Marketing
24 setembro 2021 · 18 minutos de leitura
Melhores fontes para E-mail: Dicas e Truques de Uso

Uma das preocupações mais marcantes no processo de produção de e-mail é a escolha da fonte correta. Peso, altura, largura, cor, forma, espaçamento... Tudo isso importa? Sim, é verdade, mas também uma das coisas mais importantes é escolher a fonte que seja legível. Neste post, iremos lhe mostrar como escolher a melhor fonte profissional para e-mail. É fácil trabalhar com fontes em e-mails com a Stripo Comece Fontes de e-mail HTML: Regras gerais a serem seguidas Existem três regras básicas...

Design Modelos
08 abril 2021 · 17 minutos de leitura
14 Melhores exemplos de design de assinatura de email

Boas assinaturas de email nos ajudam a construir nosso negócio e a causar uma boa impressão nos clientes. Como este é o último elemento que as pessoas visualizam nos emails, devemos fazer com que nossas assinaturas pessoais sejam criativas e memoráveis. Vamos examinar os melhores exemplos de assinaturas de email e seu uso apropriado em emails e templates de newsletter para emails. Deve-se mencionar que todos os tipos de negócios demandas assinaturas de email profissionais com as informações de contato...

Design Marketing Modelos
banner9
11 setembro 2020 · 15 minutos de leitura
10 melhores construtores grátis de templates de e-mail para 2021

Todos os construtores de templates de e-mail parecem semelhantes? Agora você está confuso sobre qual escolher para criar os melhores templates de e-mail? Claro, pois existem muitos deles. Vamos pesquisar muitos deles para encontrar suas características distintivas. Vou tentar criar o mesmo template em qualquer um dos editores com os mesmos arquivos de mídia. Vamos ver se os construtores diferem. Para uma pesquisa, escolhemos o Stripo.email e seus concorrentes: BEE Free, CampaignMonitor, Chamaileon.io, GetResponse, Mailchimp, MailGun, MailStyler2, Mosaico, Taxi for...

Design Marketing Modelos
Esteja sempre a par das notícias, guias, artigos e manuais de marketing de e-mail