• HOME
  • Blog
  • Tutorial: come creare un’email con griglia di immagini per desktop e mobile
Kelly Shetron
13 Settembre 2018
Tempo di lettura: 8 min.

Tutorial: come creare un’email con griglia di immagini per desktop e mobile

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)
256x218
Al tuo fianco per crescere, ogni giorno

Dallo sviluppo di integrazioni al supporto strategico, dalla creazione di concept creativi all’ottimizzazione dei risultati.

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:

otherstories2 768x1895 415x1024 1

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:

otherstories1 412x1024 1

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:

OggettoSpring’s color pairing

otherstories 768x2135 368x1024 1

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.

otherstories structures 768x2135 368x1024 1

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.

other stories structure outline e1523045168822

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.

module 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:

middle structure

Quindi, rilasciamo le immagini.

structure 4

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:

4row

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

4images

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

4imagesfinal

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

email preview

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.

padding 1

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:

withpadding e1523287408305

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.

header 1024x511 2

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

width

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

width adjust 1024x428 1

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.

hideonmobile 1024x830 1

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

hiddenimage

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:

mobile view

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

do not stack 1024x476 1

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

mobile grid

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.

mailup trial ITA ok 27

Share this article

80x80
Kelly Shetron

Sono cresciuta a Philadelphia, negli Stati Uniti, e ho una doppia laurea in Inglese ed Economia. Amo riflettere sul modo in cui le persone vivono e lavorano, su come si sviluppano i processi creativi e su come interagiamo gli uni con gli altri. Collaborare a nuovi progetti è il mio carburante quotidiano.

    Ricevi aggiornamenti e novità con la nostra newsletter!