Un paio di mesi fa ho ricevuto un'e-mail da HubSpot Academy sui diversi corsi disponibili. Ricordo questa parte dell'email specificamente perché mi è piaciuto l'uso di un'immagine di sfondo. Sono un grande fan di come le aziende trovano ottimi modi per massimizzare il loro contenuto di posta elettronica e un modo per farlo è con un'immagine di sfondo.
Piuttosto che un'immagine utilizzata come protagonista dell'e-mail, le immagini di sfondo sono un po 'come i personaggi di supporto. Tendono ad avere la possibilità di essere stratificati in modo da poter aggiungere elementi multimediali sopra di essi. L'applicazione dell'HTML alle immagini di sfondo è cruciale perché rendono l'immagine – e il contenuto al di sopra di essa – adattabile alla vista e-mail del lettore.
Immagine di sfondo e-mail HTML
Le immagini di sfondo aggiungono un elemento visivo per rendere le e-mail più coinvolgenti. HTML rende le immagini personalizzabili, dandoti la possibilità di aggiungere testo, CTA, loghi e link social.
Dai un'occhiata a questa email che ho ricevuto da JetBlue, di seguito. Le loro immagini di sfondo sono fotografie di destinazione semplici e di alta qualità, con didascalia, collegamento ipertestuale e testo che descrive in dettaglio la destinazione. Tutti questi fattori sono componenti di una fantastica immagine di sfondo.
Nota che il testo sotto le immagini di sfondo è spesso un'offerta o un'esclusiva. Sono fantastici da utilizzare in questo modo perché l'immagine affascina il lettore e l'offerta li incoraggia a fare clic, aumentando quel prezioso CTR per te.
Come creare immagini di sfondo per e-mail
- Crea un nuovo modulo e-mail.
- Crea e dai un nome ai campi modificabili.
- Aggiungi link social.
- Anteprima e pubblicazione.
Ora esamineremo come creare un'immagine di sfondo e-mail utilizzando gli strumenti di marketing di HubSpot.
1. Crea un nuovo modulo e-mail
Nel pannello HubSpot, vai alla scheda Marketing, quindi passa con il mouse su "File e modelli" e fai clic su "Strumenti di progettazione". Questo ti porterà nello spazio in cui puoi creare nuovi moduli, come i pulsanti CTA o nuove aggiunte al tuo sito web.
Da lì, fai clic su "File",> "Nuovo file", "Modulo" dalla finestra popup.
Dopo aver selezionato "Modulo", si dovrebbe aprire una finestra popup. Tutto ciò che devi fare in questa finestra pop-up è selezionare la casella che dice Modelli email sotto "Dove vorresti usare questo modulo?"
Assicurati che sia un file locale e dai un nome appropriato al tuo file. Nell'immagine seguente, ho chiamato il file "Email immagine di sfondo". Quindi, fai clic sul pulsante arancione "Crea".
2. Creare e denominare i campi modificabili
I campi modificabili sono componenti della tua e-mail che puoi aggiornare e modificare una volta creato il modulo. Creeremo testo avanzato, in modo che tu possa modificare il testo delle tue e-mail e l'immagine. Per fare ciò, guarda la barra degli strumenti a destra sotto "Campi".
Fai clic sul comando "Aggiungi campo" e digita la barra di ricerca "Immagine" e chiamala "Immagine di sfondo". Quindi digitare "Rich text" e denominarlo "Contenuto". Questi nomi ti aiuteranno a notare ciò con cui stai lavorando (aiuta davvero).
La barra degli strumenti ora dovrebbe apparire così.
Per risparmiare tempo, personalizziamo i campi ora. Modifica il campo "Immagine di sfondo" e aggiungi la tua immagine. Ho usato una foto d'archivio che avevo salvato nel File Manager di HubSpot. Sarai in grado di trovare tutte le foto che hai caricato in HubSpot facendo clic sullo spazio Immagine.
Dopo aver aggiunto la tua immagine, è tempo di aggiungere il testo della tua e-mail. Nel rich text editor, puoi aggiungere un CTA, diversi tipi di carattere e ravvivare il tuo marchio. Sono andato molto semplice.
Un buon consiglio da notare qui è assicurarsi che il testo sia bianco quando hai finito; sembrerà migliore sull'immagine se quell'immagine è scura. Ho evidenziato il mio testo perché era già bianco.
3. Aggiungi link social
Avrai bisogno di un po 'di codice. Lo sviluppatore web Stephanie O'Gray Garcia ha a disposizione un codice di esempio da utilizzare per la creazione di immagini di sfondo. Puoi trovarlo qui e copiarlo e incollarlo nella sezione di codifica. Questo è solo al centro dello schermo; pensalo come uno spazio di lavoro.
Quando apri "Anteprima", dovresti essere in grado di vedere il testo e l'immagine di sfondo.
Nel codice, ci sono sezioni in cui è possibile inserire collegamenti social ai propri contenuti. Sono nelle linee 27-34. Quando vedi href = "http://blog.hubspot.com/#" o src = "http://blog.hubspot.com/#", puoi inserire i tuoi collegamenti social tra le citazioni. Per motivi di walkthrough, ho eliminato questa sezione.
4. Anteprima e pubblicazione
L'immagine di sfondo dovrebbe essere simile a questa. Sono sicuro che sembra molto più elaborato del mio, ma questa è un'idea generale.
Questo è un modello per e-mail con immagini di sfondo, che non solo consente di risparmiare tempo nella creazione di e-mail, ma le rende uniformi. Quando i clienti aprono le tue e-mail, dovrebbero sapere da chi stanno ricevendo il messaggio e perché. Le immagini di sfondo e-mail sono un'opportunità per aggiungere personalità alle e-mail aziendali.
Quando ricevo e-mail da HubSpot Academy, so, a causa delle immagini di sfondo e del marchio, che sto guardando un'e-mail da HubSpot.
Quando ricevo e-mail da JetBlue, le immagini di sfondo e i caratteri sono un chiaro indicatore del marchio dell'azienda. Le immagini di sfondo e-mail migliorano la tua strategia di marketing. Provali oggi sulla tua prossima e-mail.
