How to Build AMP Carousel with Stripo_Cover Image
13 ottobre 2022

Come Realizzare un AMP-carousel per le Tue Email con Stripo

Inizia oggi stesso a creare bellissime email AMP
Sommario
  1. Perché creare email AMP con Stripo:
  2. Guida su come realizzare un AMP-carousel con Stripo:
  3. Realizza un AMP-carousel con una descrizione e dei "pulsanti" sulle immagini
  4. Consiglio
  5. I migliori esempi di email carousel dai cui trarre ispirazione
  6. Riassumendo
1.
Perché creare email AMP con Stripo:

A Marzo 2019, Google ha rilasciato AMP per le email. Da Luglio 2019 è disponibile per gli utenti di G-Suite ed è "attivo" da impostazione predefinita per tutti gli utenti di Gmail.

AMP consente ai destinatari di aggiungere gli articoli desiderati nei carrelli, partecipare a sondaggi, ecc. E, naturalmente, tutte queste azioni, ora, possono essere eseguite direttamente dalle email.

Far ridurre il tempo di produzione delle email automatizzando la maggior parte dei processi è sempre stato l'obiettivo principale di Stripo.

Per questo abbiamo sviluppato il nostro Costruttore di email AMP e il blocco drag-and-drop "AMP-carousel" per accelerare il processo di progettazione.

Come aggiungere un carosello AMP drag-n-drop alle e-mail con Stripo

Prima di passare alla guida vera e propria, voglio evidenziare i vantaggi che si hanno realizzando email AMP con Stripo.

Perché creare email AMP con Stripo:

  1. Non è necessario aggiungere alcun elemento di codice HTML AMP all'intestazione dell'email.         
  2. Non sono richieste competenze di programmazione — puoi beneficiare di elementi pronti all'uso.
  3. Risparmio di tempo — inserisci semplicemente i link alle tue immagini in un modulo di contenuto.
  4. Puoi impostare dei link per ogni singola immagine nel tuo AMP-carousel che crei con Stripo. Questi link conducono i destinatari alle rispettive pagine del tuo sito web.

Guida su come realizzare un AMP-carousel con Stripo:

Sono necessari due passaggi per realizzare un AMP-carousel di immagini con Stripo:

Passaggio 1. Costruire l’AMP carousel di per sé

  • trascina il blocco AMP carousel nel modello di email HTML con cui stai lavorando;

Blocco AMP Carousel

Vedrai che questo elemento ha l'icona "⚡HTML" vicino ad esso. Ciò significa che questo elemento viene mostrato solo nelle email AMP e sarà nascosto nei client di posta elettronica che non supportano AMP. Avremo bisogno di costruire un’alternativa per gli altri destinatari. Ne parleremo successivamente.

Modulo HTML AMP nella Tua Email

  • clicca sull'icona “⚡ HTML” per attivare il pannello delle impostazioni;
  • carica l’immagine 1 per la tua diapositiva;
  • ora, nel pannello delle impostazioni, attiva il pulsante "Visualizza anteprima" se vuoi mostrare piccole immagini di anteprima;    
  • imposta la larghezza di queste immagini di anteprima;   

Attivazione del Pulsante Anteprima e Impostazione della Larghezza dell'Anteprima

  • inserisci il testo ALT;    
  • incolla un link al rispettivo prodotto;

Aggiunta di Immagini alle Diapositive _ AMP Carousel con Stripo

  • premi il pulsante "Aggiungi diapositiva";

Pulsante Aggiungi Diapositiva _ Realizzazione di un AMP Carousel con Stripo

  • fai lo stesso con le altre immagini;     
  • controlla se le dimensioni di tutte le immagini corrispondono. In caso contrario, ritagliali con il nostro editor di foto;
  • attiva o disattiva il pulsante "Riproduzione Automatica" se desideri che le tue diapositive cambino automaticamente;
  • attiva o disattiva il pulsante "Loop" per visualizzare le diapositive dall'inizio quando un utente clicca sull'ultima immagine;

Configura il Tuo AMP Carousel con Stripo

  • vai alla sezione "Anteprima diapositiva" e scegli dove verrà visualizzata;

Sezione Anteprima Diapositiva _ Stripo

  • attiva o disattiva il pulsante "Anteprima personalizzata" per selezionare il tipo di anteprima (immagine o colore);

Imposta Anteprima Personalizzata con Stripo

  • attiva o disattiva il pulsante "Link generale" per aggiungere un singolo link all'intero AMP-carousel;
  • Il gioco è fatto!

Realizza ora un AMP-carousel con Stripo
Inizia

Nota importante:

Ho aggiunto 16 diapositive e tutte hanno funzionato abbastanza bene su Gmail e su più dispositivi.

Passaggio 2. Creazione di un’alternativa per altri destinatari

Quindi, ora che tutti i destinatari che utilizzano Gmail vedranno questo carousel, dobbiamo pensare a coloro che preferiscono altri client di posta elettronica.

L’AMP-carousel che abbiamo appena realizzato funziona bene sui dispositivi desktop su Gmail per impostazione predefinita.

Ora è il momento di realizzare un’alternativa per gli altri.

A questo proposito, ci sono due tipi alternative:

Tipo 1: Carousel interattivo

Tale carousel è supportato solo dai dispositivi Apple e da Yahoo! Mail.

  • realizza un normale carousel di contenuti con FreshInbox;
  • copia il codice di incorporamento;
  • trascina il blocco HTML nel tuo modello di email;
  • fai doppio click per attivare l'editor di codice;
  • nell'editor di codice, incolla il codice;
  • chiudi l'editor di codice;

Disattiva il Pulsante Editor di Codice _ Creazione di Email AMP con Stripo

  • fai click su questo modulo direttamente nel modello per attivare il pannello delle impostazioni;
  • nel pannello delle impostazioni, trova la sezione "Includi in" e seleziona l'opzione "HTML". In questo modo, ti assicuri che questo modulo di contenuto venga mostrato solo in quei client di posta elettronica che non supportano la funzionalità AMP nelle email.

Includi nel Pulsante HTML _ Creazione di Email AMP

Ciò significa che ogni client di posta elettronica decide quale versione del tuo carousel mostrare!

Nota importante:

Se il client di posta elettronica di un destinatario non supporta questo tipo di interattività, viene visualizzata solo la prima immagine.

Per ulteriori informazioni su come creare un carousel di immagini interattivo, leggi questo post sul blog.

Tipo 2. Moduli di contenuto del prodotto statico

  • trascina una struttura a 2 colonne nel tuo modello di email;
  • trascina il blocco dell'immagine nella prima colonna;
  • carica l'immagine che preferisci;
  • trascina il blocco di testo nella seconda colonna;
  • utilizza per questo testo un carattere corrispondente;
  • nel pannello delle impostazioni, trova la sezione "Includi in" e seleziona l'opzione "HTML". Come abbiamo detto, in questo modo ti assicuri che questo modulo di contenuto viene mostrato solo in quei client di posta elettronica che non supportano la funzionalità AMP nelle email.

Moduli di Contenuto del Prodotto _ Creazione di Email AMP

Puoi aggiungere alla tua email tutti i moduli di prodotto di cui hai bisogno. Per ulteriori informazioni su come risparmiare tempo durante la creazione di elementi email simili, leggi questo post sul blog, alla sezione "Copia e sposta elementi".

Nota importante:

Una volta selezionata l'opzione "Includi in HTML", l'elemento scelto verrà visualizzato dai client di posta elettronica che supportano solo il tipo di file HTML tradizionale.

Dopo aver selezionato l'opzione "Includi in HTML AMP" (⚡HTML), l'elemento scelto verrà visualizzato su quei client di posta elettronica che supportano il tipo AMPHTML TRADIZIONALE (text-x-amphtml).

Se non viene impostata nessuna opzione per un particolare elemento di posta elettronica, questo elemento verrà mostrato su tutti i dispositivi e tutti i client di posta elettronica.

Seguendo questi semplici passaggi, abbiamo realizzato un semplice AMP-carousel — abbiamo utilizzato immagini senza descrizioni. Funziona meglio quando si mostrano alcuni articoli dello stesso tipo o lo stesso prodotto da diverse angolazioni.

Ma cosa succede se hai bisogno di un carousel complesso con immagini più informative e pulsanti "finti" su di esse? Puoi sempre farlo con Stripo poiché il nostro editor consente di aggiungere testo alle immagini e applicare diversi filtri ;).

Realizza un AMP-carousel con una descrizione e dei "pulsanti" sulle immagini

Quindi, prima di tutto, devi costruire un normale AMP-carousel come descritto nel paragrafo precedente. Adesso, passiamo alla progettazione delle diapositive:

a) Immettere del testo sulle immagini

  • una volta caricata un'immagine, apri l'editor di foto;

Creazione di Email AMP con Stripo _ Modifica delle Immagini

  • nel pannello delle impostazioni dell'editor di foto, scegli l'opzione "Testo" per posizionare il testo sulle tue immagini. L'editor offre circa 1000 caratteri;

Editor di Foto Incorporato

  • scegli il tipo di carattere e il colore;   
  • nell'angolo in alto a destra dell'editor, fai click sul pulsante "Applica" per salvare questi parametri.       

b) posizionare un "pulsante" CTA sulle tue immagini

  • prima di tutto, devi preparare questo pulsante — il formato dell'immagine deve essere in SVG o qualsiasi altro con uno sfondo trasparente; 
  • nell'angolo in alto a sinistra del pannello delle impostazioni, fai click sul pulsante "Apri";         
  • seleziona l'opzione "Sovrapponi immagine";

Aggiungere un Pulsante CTA come Immagine

  • carica l'immagine del tuo pulsante;    
  • posizionala esattamente dove vuoi vederlo nella diapositiva;    
  • imposta le dimensioni;

Aggiungere un Pulsante CTA alla Diapositiva

  • fai click sul pulsante "Salva" per salvare le modifiche apportate alla diapositiva.

Il Pulsante Salva _ Lavorare con l'Editor

Quindi, ecco cosa abbiamo appena realizzato insieme:

Consiglio

Ecco un promemoria pensato per te. Per poter inviare contenuti AMP, devi:

  • essere inserito nella whitelist con Google;
  • correggere tutti gli eventuali bug. Li visualizzerai nella Modalità anteprima (altrimenti gli utenti vedranno un'email HTML);
  • aggiungi un’alternativa — versione HTML — a questa email;
  • assicurati che il tuo ESP/CRM è in grado di inviare email AMP;
  • tieni presente che attualmente solo Gmail (sia la versione Web che app su tutti i sistemi operativi) e Yahoo! Mail sono in grado di eseguire il rendering delle email AMP;
  • Le email AMP perdono i loro componenti AMP se vengono inoltrate.

I migliori esempi di email carousel dai cui trarre ispirazione

Ora che hai capito come creare AMP-carousel in pochi minuti, diamo un'occhiata a come le aziende famose traggono vantaggio da questa funzione.

Ecco i 5 migliori esempi di email carousel per darti qualche idea creativa:

1. Stripo

Aggiungiamo spesso dei carousel al nostro digest settimanale per renderlo più funzionale e accattivante. In questo esempio, abbiamo consentito agli abbonati di sfogliare i nuovi modelli di email per trovare quello più adatto alle loro esigenze.

(Fonte: Email da Stripo)

2. Breguet

In questo esempio, l'azienda ha utilizzato un carousel per mostrare agli abbonati i propri prodotti e offrire ai destinatari di prenotare un appuntamento direttamente dall’email.

Esempio di Email Carousel da Breguet

(Fonte: Email da Breguet)

3. MamaGourmand

 

MamaGourmand ha utilizzato AWeber Image Carousel per condividere delle idee di ricette con gli abbonati. È un modo fantastico per coinvolgere i destinatari e mostrare una varietà di prodotti o servizi.

(Fonte: Email da MamaGourmand)

4. Offset

Oltre a proporre agli abbonati di acquistare i tuoi prodotti, puoi usare i carousel per creare contenuti divertenti. Nell'esempio che segue, si può vedere come una popolare risorsa di immagini abbia progettato l'email con un carousel per mostrare ai propri abbonati una collezione di bellissime foto.

(Fonte: Email da Offset)

5. HP

HP ha aggiunto un carousel all'email di presentazione di un nuovo computer per mostrarlo da diverse angolazioni. È un modo fantastico per fornire ai clienti maggiori dettagli, ma è fondamentale assicurarsi che le foto dei prodotti siano chiare e con una buona illuminazione.

In questo esempio, il carousel è realizzato con HTML5, ma puoi realizzarlo anche utilizzando AMP.

(Fonte: Email da HP)

Riassumendo

Abbiamo appena realizzato 2 AMP-carousel per consentirti di mostrare i tuoi prodotti da diverse angolazioni o mostrare nuovi prodotti della tua collezione. Ogni diapositiva porta i destinatari alle rispettive pagine del tuo sito web. Questo è un ottimo modo per ravvivare le tue email, coinvolgere il pubblico di destinazione e rendere i messaggi più funzionali.

Per scoprire come visualizzare in anteprima ed esportare le tue email AMP, leggi i rispettivi paragrafi nel nostro post sul blog.

Realizzare email AMP è un gioco da ragazzi utilizzando il Costruttore di email AMP Stripo ;).

Inizia oggi stesso a creare bellissime email AMP con Stripo
Questo articolo è stato utile?
Tell us your thoughts
Grazie per il tuo feedback!
2 commenti
Elly Peers 5 anni fa
How does this look / functon in other non-AMP compatible email providers? Like older Outlooks for exmaple? Thanks
Hanna Kuznietsova 5 anni fa
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.
Tipo
Settore
Stagioni
Integrazione
Editor Stripo
Semplifica il processo di realizzazione delle email.
Plugin Stripo
Integra l'editor drag-n-drop di Stripo nella tua applicazione web
Ordina un modello personalizzato
Il nostro team può progettarlo e programmarlo per te. Ti basta compilare il brief, e ti risponderemo al più presto.

Editor Stripo

Per i team di email marketing e i creatori di email individuali.

Plugin Stripo

Per i prodotti che potrebbero beneficiare di un generatore di email white-label integrato.