Non perderti una notizia!

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

Sì, voglio ricevere aggiornamenti sulla formazione e sugli eventi di MailUp.
Ricevi aggiornamenti
su Messenger
5 min.
  • 35
  • 1

Scopriamo un rapido tutorial per imparare a inserire immagini di sfondo nelle email, a cui sovrapporre testo, altre immagini e bottoni CTA. Risolvendo così diverse problematiche legate alla visualizzazione delle immagini.

Per l’interessante tutorial di oggi andremo alla scoperta di una delle funzionalità più interessanti dell’editor BEE di MailUp, grazie alla quale potrai aggiungere immagini di sfondo alle tue email. Siamo certi che diventerà il tuo nuovo strumento di email design preferito, quindi vediamo più da vicino di cosa si tratta.

Immagini di sfondo: alcuni esempi

Se cerchi bene, troverai immagini con testo sovrapposto nella maggior parte delle email della tua casella di posta. Ecco un esempio da parte di Skillshare:

Immagini sfondo 01

Un altro di Huckberry:

Immagini sfondo 02

Uno di Brit + Co.:

Immagini sfondo 03

E uno di Everlane:

Immagini sfondo 04

Possiamo continuare all’infinito. Aggiungere testo alle immagini è infatti un ottimo modo per:

  • Personalizzare le foto stock con il proprio tocco
  • Invitare i lettori a fare clic su un’immagine
  • Portare il testo nell’area “above the fold”, ovvero quella più visibile della tua email (invece di posizionare il testo sotto l’immagine)

Tuttavia, anche se lo sembrano, queste immagini non sono delle vere e proprie immagini di sfondo. Infatti, testo e immagine fanno parte di un unico file JPG, PNG o di altro formato. Il testo non è testo semplice, ma è parte dell’immagine ed è stato aggiunto con Photoshop o con un altro tool. Di conseguenza, se la visualizzazione delle immagini è bloccata, non verrà visualizzato nemmeno il testo. Inoltre, per modificare il testo è necessario modificare l’immagine.

Oggi ti mostreremo come creare vere immagini di sfondo per email con testo semplice sovrapposto. Ciò significa che il testo viene visualizzato anche se le immagini non vengono caricate, inoltre la modifica del testo non richiede la modifica dell’immagine.

Ti mostreremo anche come ripetere un’immagine su un’intera riga per creare pattern o texture.

Come inserire le immagini di sfondo nelle email

Oggi come fonte di ispirazione utilizzeremo il seguente modulo email di Litmus e lo ricreeremo con l’editor MailUp.

Litmus

Video tutorial

Vuoi vedere rapidamente come aggiungere immagini di sfondo alle tue email? Guarda il nostro video tutorial (in inglese) e segui i passaggi descritti di seguito:

Scegli un template per l’email

Apri l’editor BEE di MailUp (oppure crea un account di prova) e scegli un template per iniziare. Di solito consigliamo il template di base a una colonna.

Abilita l’opzione Immagine di sfondo

Basta fare clic su una qualsiasi riga di contenuto per visualizzare l’opzione Immagine di sfondo nel menu Struttura nel pannello sulla destra. Attiva questa opzione (basta cliccare sul pulsantino a destra e assicurarsi che sia azzurro), quindi fai clic su Cambia immagine per cercare una foto.

Immagini sfondo 06

Cerca un’immagine

Puoi trovare foto stock gratuite e ad alta risoluzione direttamente nell’editor: scegline una per questo progetto (o, in alternativa, carica una tua foto o incolla l’indirizzo URL di un’immagine).

Nella schermata successiva, apri una delle tue cartelle dal file manager. Quindi, fai clic sul pulsante CTA Cerca immagini gratuite che si trova in alto.

Immagini sfondo 08

Prendendo ispirazione dall’email di Litmus, cerca “stars” o “night sky” e vedi cosa viene fuori.

Immagini sfondo 09

Seleziona un’immagine da importare, quindi inseriscila nell’email. Ecco il risultato:

Immagini sfondo 10

Trascina e rilascia il contenuto

Utilizzando il riquadro già presente nel modello, aggiungi l’immagine del calendario semplicemente trascinandola. Continua ad aggiungere i riquadri di contenuto per il logo Litmus, il testo e il pulsante CTA. Dopo aver trascinato e rilasciato ogni modulo, dai un’occhiata al layout dell’email che stai creando:

Immagini sfondo 11

Nota che testo, immagini e pulsante CTA si trovano sopra all’immagine di sfondo. Ciò permette di inserire testo semplice e un pulsante CTA bulletproof, come consigliamo sempre di fare, potendo così creare l’intera email all’interno dell’editor BEE.

Per finire, aggiungi altre immagini e testo secondo necessità, quindi formatta stili, colori e riempimento. Ecco come appare il lavoro finito:

Immagini sfondo 12

Non male, vero? Con l’editor BEE di MailUp, inserire nelle email delle immagini di sfondo è estremamente semplice e veloce. In questo modo i messaggi guadagneranno non solo in appeal estetico, ma anche in efficacia e funzionalità.

Impostazioni immagine di sfondo

Una volta selezionata l’immagine di sfondo, puoi impostare il modo in cui viene visualizzata nell’email. Esistono tre impostazioni principali: Larghezza piena, Affianca e Centra.

Immagini sfondo 13

Usa queste impostazioni per trovare la migliore regolazione per la tua immagine di sfondo. Ad esempio, seleziona Affianca per creare un pattern. Questa funzione è particolarmente utile se l’immagine non copre l’intera larghezza dell’email come invece desideri.

Come per qualsiasi altra immagine in BEE, puoi anche eseguire modifiche utilizzando l’editor fotografico incorporato. Puoi tagliare l’immagine, aggiungere filtri ed effetti speciali, e così via.

Immagini sfondo 14

Compatibilità con client di posta elettronica e impostazione di un colore di sfondo alternativo

Proprio come per qualsiasi progetto avanzato di design di email, bisogna verificare se i dispositivi mobili e i client di posta elettronica supportano le immagini di sfondo. Secondo i nostri recenti test, i client di posta elettronica che non supportano la visualizzazione di immagini di sfondo nelle email sono:

  • Outlook 2016 su MAC OS X 10.10
  • Lotus Notes 7
  • Client di posta Xfinity / Comcast

Per questi client di posta elettronica (e per garantire i migliori risultati se la visualizzazione delle immagini è bloccata), assicurati di impostare un colore di sfondo nella relativa riga come alternativa nel caso in cui l’immagine di sfondo non venga visualizzata.

Per farlo, basta selezionare la riga e quindi spostarsi sul menu Struttura per scegliere un Colore di sfondo della riga o un Colore di sfondo del contenuto.

Immagini sfondo 15

In conclusione

Ottimizzare le email in termini di estetica, funzionalità ed efficacia è semplice e veloce grazie alle funzionalità dell’editor BEE di MailUp. Un’immagine di background inserita come spiegato qui sopra consente di risolvere in modo brillante alcune criticità legate all’utilizzo delle immagini nelle email, mantenendo al contempo il massimo impatto grafico.

Se vuoi imparare a creare email bellissime, infine, perché non scaricare il white paper gratuito dove trovi tanti consigli di email design?

La guida all'Email Design

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

Email deliverability: do’s e dont’s per garantire il recapito delle campagne

Quando un brand invia un’email al proprio cliente, che si tratti di una comunicazione di natura promozionale o transazionale, si dà per scontato che termini ...

Continua a leggere

15 modi originali di usare le GIF animate nelle email

Le GIF animate sono sempre più spesso scelte dai marketer per dar vita alle comunicazioni email. Ma come usarle in modo divertente, utile e diverso ...

Continua a leggere

Osservatorio 2017: tutti i dati in un’infografica

Analizzati i dati del 2016 dell'Email Marketing, oggi presentiamo le evidenze emerse nell'Osservatorio Statistico 2017 sotto una forma diversa: quella di un'infografica comoda da leggere ...

Continua a leggere

Marketing Automation: come si costruisce un flusso di email automatiche?

Marketing Automation: che cos'è e come si utilizza nel lavoro di tutti i giorni? Scopriamo le principali tipologie di campagne automatiche e i passi necessari ...

Continua a leggere

Come personalizzare le email: i campi dinamici

Con un semplice tag puoi instaurare una relazione uno a uno con i tuoi destinatari, a intero vantaggio di aperture e clic. Tutto sui campi ...

Continua a leggere

Come Terme di Saturnia sfrutta le email per incrementare le prenotazioni

Abbiamo chiesto alla celebre struttura italiana dedicata al benessere di raccontarci l’andamento di una delle sue ultime campagne di Email Marketing: obiettivi, strategia e risultati, ...

Continua a leggere
  • coccoinomane

    Ciao! Grazie per l’articolo esauriente 🙂
    Purtroppo tra la lista dei client che non supportano le immagini di sfondo noi abbiamo riscontrato anche Outlook su diverse versioni di Windows, in particolare (se non ricordo male) Outlook 2010 su Windows 7. Ci sono degli hack CSS per risolvere la cosa, ma non credo siano applicabili ad un’interfaccia grafica quale BEE.