Passa al contenuto principale

Rivolgiti a un professionista

Dalla formazione a un marketing completo, la nostra community di partner può aiutarti a realizzare i tuoi progetti.

Assumi un partner

Aggiungi un’immagine di sfondo a un template HTML personalizzato

Copia URL articolo
Copiato

Nota

Le informazioni riportate in questo articolo si applicano solo al builder classico. Per informazioni su come utilizzare il nuovo builder, consulta la sezione Progetta un’email nel nuovo builder.

Allo scopo di migliorare ulteriormente il design delle tue campagne di marketing, puoi aggiungere un’immagine di sfondo a un template Codice personalizzato nel Template Builder di Mailchimp.

I template HTML personalizzati sono una funzionalità avanzata consigliata agli utenti che hanno familiarità con la scrittura di codice personalizzato. Se hai bisogno di assistenza, contatta il tuo sviluppatore o un esperto Mailchimp.

In questo articolo scoprirai come aggiungere un’immagine di sfondo al tuo template HTML personalizzato.

Prima di iniziare

Ecco alcune cose da sapere prima di iniziare.

  • Le immagini di sfondo potrebbero non essere renderizzate in tutti i client email. Pertanto, assicurati di sapere quali client email supportano le immagini di sfondo consultando il nostro articolo Supporto CSS per i client email per scoprire maggiori informazioni.
  • Le immagini più grandi possono causare una visualizzazione errata delle campagne nelle caselle di posta dei destinatari. Per ottenere risultati migliori, imposta la risoluzione su 920x1080 pixel o meno e comprimi l’immagine.
  • Ospita le immagini su un server pubblico oppure utilizza un servizio gratuito come Imgur o Flickr e usa un percorso assoluto di file che punti direttamente alla posizione del file nel codice. Non dimenticare che, se ospiti le immagini su un server privato, i destinatari che non hanno accesso al server non saranno in grado di vedere l’immagine.
  • Mailchimp è anche in grado di ospitare le immagini per conto tuo in Content Studio se queste non superano i 10 MB.
  • Puoi anche aggiungere un’immagine di sfondo a una campagna standard. Per maggiori informazioni, consulta il nostro articolo Aggiungi un’immagine di sfondo a una campagna.

Aggiungi un’immagine di sfondo al tuo template HTML personalizzato

Questo processo usa CSS, HTML e VML per visualizzare un’immagine e un colore di sfondo. Incolla il nostro codice esemplificativo nel template e cambia l’immagine del segnaposto e il colore dello sfondo in base alle tue specifiche.

Per aggiungere un’immagine di sfondo a un template HTML personalizzato, segui questi passaggi.

  1. Fai clic su “Content” (Contenuti), quindi fai clic su “Email templates” (Template email).
  2. Fai clic su “Create Template” (Crea template).
  3. Fai clic sulla scheda “Code your own” (Codice personalizzato) e seleziona “Paste in code” (Incolla codice).
    Cursore sul pulsante Incolla codice
  4. Nell’Editor codice, inserisci il codice seguente appena dopo il tag di apertura <body>per aggiungere l’immagine di sfondo e il colore segnaposto.
    <div style="background-color:#7bceeb;">
<!--[if gte mso 9]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
 <v:fill type="frame" src="http://www.yoursite.com/yourimages/photo.jpg"color="#7bceeb" />
 <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
     <![endif]-->
 <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
  <td valign="top" align="left" background="http://www.yoursite.com/yourimages/photo.jpg" style="background-repeat:no-repeat; background-size:cover;">

    Questo codice mostra gli URL dell’immagine e i colori segnaposto. Li sostituirai con le informazioni relative all’immagine e al colore che preferisci nel prossimo passaggio.

  5. Sostituisci i due URL dell’immagine di sfondo segnaposto e i valori del colore di sfondo segnaposto in questo codice esemplificativo con il codice HEX del colore che preferisci e il percorso assoluto del file per l’URL dell’immagine.

  6. Inserisci il codice seguente appena prima del tag di chiusura <body>. 

    </td>
</tr>
 </table>
 <!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</div>

  7. Sostituisci o modifica il resto del codice della campagna con il tuo HTML personalizzato.

  8. Quando hai finito di modificare il codice, fai clic su “Save” (Salva).
  9. Fai clic su “Save and Exit” (Salva ed esci).
  10. Nella finestra pop-up modale “Save Template” (Salva il template), inserisci un nome per il tuo template.
  11. Fai clic su “Save” (Salva).

Puoi accedere al nuovo template nel Campaign Builder oppure sulla pagina Template.

Test e risoluzione dei problemi

Prima di inviare la campagna email, visualizza l’anteprima e testa con attenzione il template e invia alcune email di prova. Per capire come viene visualizzata l’immagine di sfondo in alcuni client email, usa lo strumento Anteprima posta in arrivo.

Effettua Anteprima e test della tua campagna email
Testa con Anteprima posta in arrivo

Di seguito ti presentiamo alcuni altri suggerimenti per usare le immagini di sfondo.

  • L’immagine di sfondo non viene visualizzata, se le immagini sono disattivate nella casella di posta del tuo destinatario. Per questo motivo, assicurati di scegliere un colore di sfondo che permetta di visualizzare il testo nella maniera corretta se l’immagine di sfondo non viene caricata.

  • Quando modifichi il tuo CSS, assicurati che il codice non presenti altre proprietà di sfondo, dal momento che queste possono sovrascrivere l’immagine di sfondo.

  • Quando usi il Template Editor, il rendering dei merge tag non viene visualizzato nelle anteprime o nelle email di prova. Se vuoi vedere il rendering dei merge tag per i contatti, crea una campagna a partire dal template e usa le opzioni di anteprima e test.

Assistenza tecnica

Hai una domanda?

Gli utenti a pagamento possono effettuare il login per accedere al supporto via email e chat.

Questo articolo è stato utile?

Correlati

Dove modificare il codice template

Con il linguaggio dei template di Mailchimp, puoi codificare un template email direttamente dal tuo account. Scopri come aggiungere le immagini del template e come trovare l'HTML del tuo.

CSS nelle email HTML

Questo articolo offre alcuni consigli di base sull’utilizzo del CSS nelle email HTML.

Informazioni sulle immagini template

I limiti sulle immagini variano a seconda del tuo template Mailchimp. Scopri consigli su come utilizzare le immagini in varie opzioni di template.