Ricevi aggiornamenti
su Messenger

Vuoi progettare un’email semplice e piacevole che possa essere visualizzata senza problemi sui dispositivi mobili anche con diverse foto? Sei nel posto giusto. Il post di oggi è una guida passo passo alla realizzazione di un’efficace email con griglia di immagini. Puoi utilizzare questo layout dinamico per presentare un nuovo prodotto, lanciare una promozione, realizzare una vendita o raccontare qualsiasi tipo di storia per immagini. Usando un’email del marchio di moda & Other Stories, ti illustreremo come organizzare e ottimizzare una griglia di foto in un’email, incluso come:

  • Creare configurazioni creative della griglia di immagini
  • Impostare una larghezza automatica per immagini selezionate
  • Nascondere immagini specifiche su dispositivi mobili
  • Impilare le immagini nella versione mobile (o lasciarle in una griglia)

Un esempio da cui prendere ispirazione: & Other Stories

Il marchio di e-commerce & Other Stories invia regolarmente email progettate con cura. Anche se sono piene di foto di prodotti, le email rimangono semplici, pulite e non generano confusione. Inoltre, il marchio fa un ottimo lavoro nell’uso di un testo semplice ben formattato, facendo in modo che le griglie di immagini siano visualizzate correttamente anche su dispositivi mobili. Scopri di cosa stiamo parlando: ecco alcune email recenti di & Other Stories:

Una delle email di & Other Stories

Nessuna email è uguale all’altra, ma la maggior parte include una griglia di foto con immagini di dimensioni diverse. Questa presenta due immagini principali, seguite da una griglia:

Un'email di & Other Stories con due hero e una griglia di immagini

Preferiamo l’uso di immagini di dimensioni diverse che si adattano perfettamente tra di loro. Sapere come creare configurazioni di immagini intelligenti può davvero migliorare il design delle tue email. Scopriamo come farlo nel tutorial di oggi.

L’ispirazione per la nostra griglia fotografica

Nel tutorial di oggi spiegheremo come creare un’email come questa:

Oggetto: Spring’s color pairing

L'email di & Other Stories che prenderemo in esame

Bellissima, no? E non è difficile da creare. Andiamo!

Passaggio 1: crea la struttura

Apri l’editor BEE dal tuo account MailUp e inizia a creare l’email partendo da un modello base a una colonna. Nelle immagini di questo post troverai la versione inglese di BEE: nel testo abbiamo però provveduto a darti l’equivalente voce in italiano.

Partiamo, ipotizzando che l’email abbia sei strutture o moduli.

La struttura dell'email

Dal menu Struttura (Structure) a destra, creeremo un layout di email che riproduce il nostro esempio trascinando i moduli. La prima metà è una singola colonna, mentre la seconda metà ha una serie di strutture a più colonne.

Lo scheletro della struttura modulare

L’utilizzo di una serie di strutture a più colonne asimmetriche come questa consente di progettare una griglia fotografica dinamica. Quando un layout si alterna da una riga all’altra, è facile creare una griglia fotografica con immagini di dimensioni diverse. Continua a leggere per vedere come.

Passaggio 2: disponi i blocchi di contenuto

Procedendo riga per riga, trascineremo blocchi di contenuto che corrispondono al contenuto di ogni struttura. Ad esempio, la prima struttura (o riga) necessita di un blocco di testo per mostrare “STOCKHOLM ATELIER”, di una linea di separazione e quindi un blocco immagine per il logo & Other Stories. Inseriremo ciascuno di questi blocchi di contenuto nella Struttura 1.

Il primo modulo dell'email

La struttura seguente avrà bisogno solo di un blocco del contenuto immagine per contenere l’immagine principale, mentre quella successiva richiederà solo testo.

Per costruire la prima struttura della griglia di immagini, nella riga 4, trascineremo i segnaposto del contenuto dell’immagine, quindi la riga avrà il seguente aspetto:

I moduli ibridi

Quindi, rilasciamo le immagini.

L'inserimento delle immagini nei moduli

A causa della struttura o del layout scelto per questa riga, la foto sulla destra ha spazio per essere grande quanto le due immagini impilate sulla sinistra.

Sotto di essa, la seguente struttura a quattro colonne conterrà quattro immagini di dimensioni uguali.

(1) Ecco la struttura base:

Il modulo a quattro colonne

(2) Ecco la struttura con blocchi di contenuti immagine:

I blocchi di contenuto in una struttura a quattro colonne

(3) Ecco la struttura finale dopo aver trascinato le immagini:

Il modulo a quattro colonne con le immagini

Basta scorrere ogni riga, aggiungendo le immagini e i blocchi di contenuti come desiderato per completare la tua email! Ecco il nostro risultato finale:

L'anteprima dell'email

3. Formattazione delle immagini: suggerimenti e trucchi

Ora che hai le idee chiare su come organizzare le immagini, ecco alcuni suggerimenti su come farle apparire come desideri.

Riempimento ottimizzato

Ricorda che puoi allineare ogni immagine accanto a un’altra, senza spazio intermedio, impostando il riempimento dell’immagine su zero. Basta fare clic su un’immagine, quindi utilizzare il menu Proprietà contenuto (Content Properties) sulla destra per apportare modifiche.

Come definire il padding dell'email

Viceversa, se desideri creare spazio tra le immagini, aumenta leggermente il riempimento. Ecco la nostra riga a quattro colonne con un piccolo riempimento (5 pixel) aggiunto tra le immagini:

Impostare una larghezza automatica per immagini selezionate

Quando trascini un’immagine nella tua email, questa riempirà automaticamente la larghezza della casella. Ma puoi anche usare il menu Proprietà contenuto (Content Properties) per regolare la larghezza di un’immagine. Ad esempio, nella nostra email corrente, quando trasciniamo l’immagine dell’intestazione di & Other Stories, questa riempie automaticamente la larghezza dell’email.

Come impostare la dimensione automatica

Per diminuire la larghezza dell’immagine, deseleziona l’opzione Dimensione automatica (Auto width) a destra…

Il pannello dove impostare la dimensione automatica

…quindi trascina la barra della percentuale verso il basso, più vicina al 20%, per ridurre le dimensioni del logo.

Come appare l'header con il dimensionamento automatico

Nota: puoi anche selezionare la casella Adatta in larghezza su mobile (Full width on mobile) per assicurarti che il logo venga visualizzato correttamente su uno schermo più piccolo.

Nascondere immagini specifiche su dispositivi mobili

Se devi inviare un’email con immagini pesanti, considera la possibilità di nascondere alcune di quelle immagini sui dispositivi mobili. Ciò consente di velocizzare il download delle email sui dispositivi mobili e di migliorare la leggibilità: con un numero inferiore di immagini, il lettore non deve scorrere a lungo. Potresti anche avere un’immagine principale di grandi dimensioni, come in questa email & Other Stories, che non dovrebbe occupare così tanto spazio sullo schermo di dispositivi più piccoli. Per questi motivi, BEE ora ha una funzione Nascondi su dispositivo mobile (Hide on mobile) che può essere selezionata per un’immagine.

L’opzione Nascondi su dispositivo mobile (Hide on mobile) si trova nella parte inferiore del menu Proprietà contenuto (Content Properties) per qualsiasi immagine selezionata. Se selezioni l’immagine principale, ad esempio, puoi scorrere verso il basso e scegliere di nasconderla.

La funzione Nascondi su mobile

L’anteprima dell’email consente di vedere come appare l’email con l’immagine principale nascosta:

L'anteprima dell'email con l'opzione Nascondi su mobile attivata

Impilare le immagini nella versione mobile (o lasciarle in una griglia)

Tutte le email progettate nell’editor BEE sono responsive su dispositivo mobile. Ciò significa che quando si dispone di una griglia di immagini come quella di un’email, la versione mobile imposterà automaticamente le immagini una sopra l’altra per facilitarne la visualizzazione su schermi piccoli. Di conseguenza, la nostra griglia di immagini appare di solito su un dispositivo mobile con ciascuna immagine a schermo intero una alla volta:

L'anteprima su mobile con immagini incolonnate

Tuttavia, ora hai la possibilità di chiedere a BEE di non impilare le immagini, se preferisci che la griglia rimanga intatta anche sugli schermi mobili.

Basta selezionare la struttura della griglia dell’immagine, quindi utilizzare il menu Proprietà contenuto (Content Properties) per attivare la funzionalità Non incolonnare su mobile (Do not stack on mobile).

La funzione "Non incolonnare su mobile"

Ora, la nostra anteprima per dispositivi mobili si presenta così:

L'anteprima su mobile dell'email con griglia di immagini attivate

Nota bene! Tutte queste caratteristiche hanno lo scopo di fornirti uno strumento di regolazione più preciso per l’aspetto della tua email. Ci auguriamo che tu possa apprezzare la flessibilità di progettazione mentre crei (e gestisci) email ben strutturate con griglie di immagini nell’editor BEE, che puoi utilizzare da subito richiedendo la prova gratuita della piattaforma MailUp.

Prova MailUp

Ti è piaciuto questo articolo? Ne abbiamo molti altri in serbo per te.

Iscriviti ora per rimanere sempre aggiornato sulle novità di email e SMS marketing.

Leggi anche

Dolcetto o scherzetto? 9 idee per le newsletter di Halloween

Halloween si avvicina e la casella inbox è già piena di newsletter a tema. Qui trovi 9 idee per dare un irresistibile tocco dark alle ...

Continua a leggere

Riattiva i contatti dormienti del tuo e-commerce: la strategia in 5 step

Ti spieghiamo come recuperare clienti – dunque conversioni e vendite – del tuo store online. Alla scoperta delle strategie di Email Marketing dedicate alla riattivazione ...

Continua a leggere

Nessuno apre le tue email? Inizia a lavorare sul subject

L'Email Marketing resiste con successo da oltre due decenni. In effetti, sembra che l'Email Marketing sia più forte che mai, raggiungendo un ROI medio del ...

Continua a leggere

Cosa rende un’email davvero geniale? 7 fattori

Oggetto, focus, follow-up e altro ancora. Ecco 7 indirizzi operativi per creare email geniali, efficaci e incentrate sul cliente. Ogni volta che qualcosa di nuovo arriva ...

Continua a leggere

Come Iperal ha incrementato del 30% i clic nelle email

Abbiamo chiesto alla realtà della Grande distribuzione di raccontarci come ha raggiunto performance di Email Marketing nettamente superiori alla media di settore. Nel nostro blog spesso ...

Continua a leggere

Ci sono 5 ottimi motivi per inserire video nelle tue newsletter

Il formato video rappresenterà oltre l'80% del traffico web totale entro il 2019: se come motivazione non bastasse, ecco 5 ragioni per integrare il potenziale ...

Continua a leggere