Tutorial: come creare un’email con griglia di immagini per desktop e mobile
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)
Dallo sviluppo di integrazioni al supporto strategico, dalla creazione di concept creativi all’ottimizzazione dei risultati.
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:
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:
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
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.
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.
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.
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:
Quindi, rilasciamo le immagini.
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:
(2) Ecco la struttura con blocchi di contenuti immagine:
(3) Ecco la struttura finale dopo aver trascinato 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:
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.
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.
Per diminuire la larghezza dell’immagine, deseleziona l’opzione Dimensione automatica (Auto width) a destra…
…quindi trascina la barra della percentuale verso il basso, più vicina al 20%, per ridurre le dimensioni del logo.
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.
L’anteprima dell’email consente di vedere come appare l’email con l’immagine principale nascosta:
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:
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).
Ora, la nostra anteprima per dispositivi mobili si presenta così:
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.