Usare immagini di sfondo nelle email

Oltre a scegliere il colore di sfondo di ciascuna sezione di un'email, è anche possibile applicare un'immagine di sfondo alle righe di un messaggio.

Puoi inserire una immagine visibile sull'intera larghezza del messaggio, ad esempio nella parte superiore, e aggiungere testo e bottone per un design moderno e di impatto come nell'esempio qui sotto.

In questo esempio, per rendere visibile tutta l'immagine in altezza, è stato sufficiente inserire dei separatori al di sotto del bottone.

In alternativa, puoi usare un'immagine come sfondo di una sezione, impostando un colore di sfondo del contenuto, come in quest'altro esempio.

Dove si trova?

Dopo aver selezionato la riga di un messaggio alla quale vuoi applicare un'immagine, vai nella sezione "Immagine di sfondo" in "Proprietà riga"

Vediamo nel dettaglio le impostazioni incluse in questa sezione.

Scegliere l'immagine

Dopo aver cliccato su "Abilitata", clicca su "Cambia immagine" per caricare e inserire l'immagine che verrà usata come sfondo. In alternativa, puoi inserire direttamente una URL nell'apposito spazio.

Larghezza piena, affianca, centra

Queste tre impostazioni sono importanti per allineare e posizionare al meglio l'immagine all'interno del messaggio.

Quando selezioni Larghezza piena, l'immagine viene usata come sfondo per l'intera larghezza della riga. Per esempio, questo è uno sfondo applicato a un'intera riga.

Quando invece Larghezza piena non è selezionato, l'immagine di sfondo viene applicata solo al corpo della mail. Ricorda che la larghezza del corpo è sempre modificabile nel tab "Corpo" dell'editor.

Ecco la stessa immagine applicata solo al corpo dell'email.

Scegliendo Affianca, invece, l'immagine viene ripetuta. Scegli questa impostazione se usi un'immagine simmetrica, ripetibile per coprire il maggior spazio possibile, come nell'esempio qui sotto. In questo caso, selezionando sia Larghezza piena che Affianca, l'immagine viene ripetuta per l'intera larghezza della riga. Se la riga è più alta dell'immagine, quest'ultima verrà ripetuta anche verticalmente.

Selezionando Centra, l'immagine verrà centrata. E' utile se usi un'immagine molto larga e vuoi centrarla, in modo che vengano tagliati i bordi esterni, anzichè la parte più a destra. Se invece l'immagine non è particolarmente larga e selezioni anche Affianca, l'immagine verrà ripetuta verso sinistra e verso destra. Se scegli Affianca senza centrarla, l'immagine verrà posizionata nell'angolo in alto a sinistra della riga e poi ripetuta verso destra.

Tutte e tre queste impostazioni possono essere abilitate e disabilitate indipendentemente l'una dall'altra. Prova a caricare immagini di diverse dimensioni e gioca con le diverse impostazioni per capire al meglio come viene modificato il posizionamento delle immagini.

Compatibilità con i client di posta elettronica

L'editor usa tecniche molto avanzate per garantire che le immagini di sfondo siano visibili sulla maggior parte dei client di posta elettronica. Secondo i nostri test più recenti, gli unici client per i quali non vengono mostrate le immagini di sfondo sono:

Outlook per Windows (dalla versione 2007 in avanti)
Outlook 2016 per Mac
Lotus Notes 7
Xfinity / Comcast

Per questi client - e per risultati migliori nei casi in cui le immagini vengono bloccate - assicurati di impostare un colore di sfondo della riga che stia bene con i contenuti della riga, in assenza dell'immagine di sfondo.

Ridimensionamento delle immagini

Per sfruttare al meglio questa funzionalità, abbiamo fatto delle modifiche al ridimensionamento delle immagini caricate nel file manager:

Le immagini vengono caricate nella dimensione nativa fino a 1920 pixel di larghezza;
Le immagini la cui larghezza supera 1920 pixel vengono ridimensionate ad una larghezza di 1920 pixel;
Il peso di tutte le immagini, indipendentemente dalla dimensione, viene ottimizzato con un algoritmo di compressione lossless (senza perdità di qualità);
Resta il limite di peso in fase di caricamento di un'immagine (non possono essere caricate immagini più pesanti di 5 megabyte).