Ricevi aggiornamenti
su Messenger
5 min.

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

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

3 tattiche di Email Marketing per favorire gli acquisti d’impulso

L'Email Marketing è uno dei migliori canali per indirizzare il traffico verso i siti web. Non solo può essere sfruttato per condividere le ultime notizie ...

Continua a leggere

Tutorial: come creare un’email con la tecnica dei color blocks

Abbiamo un debole per le email colorate. Uno stile che ci piace particolarmente (e che vediamo utilizzato spesso) è quello che prevede l'utilizzo di blocchi ...

Continua a leggere

5 efficaci tecniche di copywriting per migliorare il CTR delle email

Secondo Templafy, una persona riceve in media 121 email al giorno. Si tratta di 121 messaggi diversi, 121 promozioni diverse, 121 call-to-action diverse. Con tutte queste ...

Continua a leggere