Ricevi aggiornamenti
su Messenger
9 min.

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 di colore, o color blocks: circa metà dell’email ha un colore di sfondo in evidenza mentre l’altra metà è bianca. Questa è una tecnica semplice che trova largo impiego nelle caselle di posta. In questo tutorial spiegheremo come creare un’email con la tecnica del color blocking in pochi e semplici passaggi.

Scopriremo anche come:

  • Aggiungere più colori di sfondo HTML all’interno di un’email
  • Configurare un layout a più colonne
  • Formattare il testo (colore, dimensione, altezza della riga, collegamenti ecc.)
  • Migliorare un’email ottimizzando la spaziatura e il riempimento

Un esempio da cui prendere ispirazione: Offscreen Dispatch

Offscreen è una rivista stampata e una newsletter settimanale “che pone una riflessione meditata e antropocentrica sulla tecnologia e sul web”. La newsletter è chiamata Offscreen Dispatch, di cui abbiamo ammirato più volte il design semplice e distinto. Offscreen utilizza la stessa tecnica di color blocking in ogni email, con l’effetto cercato di rendere l’email come se fosse la pagina di una rivista. La parte superiore, in cui il web designer Kai Brach scrive una nota agli abbonati, è sempre rosa. Il resto dell’email è sempre bianco.

Color blocks: l'email di Dispatch

Non c’è niente di particolarmente rilevante, né arte né fotografia, ma il layout dinamico, il testo ben formattato e il design a colori rendono questa email un tutt’uno ben integrato.

Anche la progettazione non presenta difficoltà e non richiede alcuna codifica nell’editor BEE. Tuffiamoci dentro! Apri l’editor BEE e segui i passaggi seguenti (in inglese).

Passaggio 1: crea la struttura

Apri l’editor BEE nella tua piattaforma MailUp e inizia con un modello base a una colonna, vuoto.

Prima di iniziare a trascinare gli elementi della struttura, dedichiamo un minuto a esaminare l’email di Offscreen Dispatch per identificare i componenti del layout. Ecco una versione suddivisa per blocchi:

Email color blocks

L’email si alterna tra strutture a una colonna e a due colonne, modello facile da assemblare in BEE.

Trascina i blocchi corrispondenti dal menu Moduli a destra. Per questa email avremo bisogno delle prime due tipologie di modulo (blocco singolo e due blocchi):

Composizione moduli

Ecco come appare la nostra email con i moduli in posizione:

Struttura vuota

Passaggio 2: disponi i blocchi di contenuto con testo/immagini

Ora che abbiamo creato l’ossatura della nostra email, trasciniamo i blocchi di contenuto che corrispondono allo specifico tipo di contenuto: testo e/o immagine, che vogliamo in ogni sezione. Quindi, incolla il testo e trascina le immagini.

Ecco una piccola guida in 3 passaggi su come posizionare i contenuti. A partire dalla prima riga, l’header, ecco come fare:

(1) Inserisci una struttura a due colonne:

Modulo a due colonne

(2) Aggiungi blocchi di testo a sinistra; un blocco di contenuto immagine a destra:

Blocco di testo e immagine

(3) Inserisci il testo e l’immagine:

Trascina immagine e testo

Ripetiamo la stessa operazione per ogni modulo del messaggio. Ecco la nostra email con i blocchi di contenuto rimanenti al posto giusto:

Ora, finiamo aggiungendo il testo:

Voilà! È il momento di passare alla formattazione.

Passaggio 3: formatta i colori di sfondo

Adesso arriva la parte divertente. Guarda quanto è facile creare l’effetto di color blocking.

In primo luogo, per abbinare la tonalità esatta di rosa pallido dall’email di Offscreen Dispatch, abbiamo usato HTML-Color-Codes.info per identificare il colore dall’immagine nell’intestazione.

HTML Color Codes identifica il codice esadecimale come #F5BBA2. Per applicare alla prima riga il colore giusto:

  1. Seleziona la riga
  2. Ci spostiamo su Colore di sfondo della riga nel menu sulla destra
  3. Incolla il codice colore (o selezionalo manualmente)

Colore di sfondo

Il colore sarà edge-to-edge continuo! Ora completiamo il blocco di colore rosa. Selezioneremo semplicemente la riga seguente e faremo di nuovo la stessa cosa. In modo semplice e intuitivo abbiamo creato dei color blocks.

Passaggio 4: formatta il testo

Completiamo l’email con alcuni accorgimenti di formattazione. Iniziamo con il testo.

Scegli un font predefinito per l’email

Invece di passare su ogni singolo blocco di contenuto per scegliere il font della tua email, accedi al menu Impostazioni a destra e seleziona il font che desideri utilizzare per l’intera email.

Scegli il font

Successivamente, puoi cambiare il font dell’header o selezionare le sezioni che desideri.

Adatta le dimensioni del font

Tocca qualsiasi blocco di testo e utilizza il menu a discesa per mettere a punto le dimensioni del font.

Adatta le dimensioni del font

Personalizza i colori del testo

Usa lo stesso menu per scegliere i colori che preferisci. Anche in questo caso, utilizza lo stesso codice colore corrispondente per ottenere la sfumatura precisa.

Personalizza i colori del testo

Formatta lo stile dei link

Non dimenticare i link! Nello stesso menu Impostazioni in cui hai scelto il font predefinito del corpo, puoi anche formattare lo stile dei link. In questo caso, scegliamo il nero.

Formatta il colore dei link

Aggiusta l’interlinea

Assicurati che il testo del corpo dell’email abbia spazio per “respirare”. Per qualsiasi blocco di contenuti che modifichi, regola l’altezza dell’interlinea.

Aggiusta l'interlinea

Suggerimento: come duplicare i moduli

Se hai passato molto tempo a formattare il testo in una particolare riga, puoi semplicemente duplicarla, invece di riprodurre manualmente le stesse impostazioni in un’altra riga.

Tocca la riga che vuoi copiare. Quindi, fai clic sull’immagine della doppia casella sulla destra.

Duplica riga

La riga viene copiata. Quindi, trascinala e afferra l’icona direzionale sulla sinistra per posizionare la nuova riga nell’email.

Passaggio 5: regola padding e spaziature

Ultimo passaggio! Uno dei più importanti. Prima di completare l’email, osserva attentamente la spaziatura tra i blocchi di contenuto. Se ci sono ancora troppi spazi o di spazio ce n’è poco, è molto facile fare delle regolazioni.

Ad esempio, c’è ancora uno spazio tra “Offscreen” e “Dispatch” nell’intestazione della nostra bozza dell’email. Per aumentare il valore, tocca il blocco di contenuto, scorri verso il basso fino a Proprietà colonna nel menu a destra e assicurati che in Padding sia attivato Altre opzioni. Quindi, puoi ridurre (o aumentare) le spaziature su qualsiasi lato in qualsiasi punto del contenuto.

Aggiusta il padding

Passaggio 6: visualizza in anteprima l’email finita!

Ok, manca ancora un ultimissimo passaggio. Durante la fase di creazione di qualsiasi email, controlla sempre l’anteprima per assicurarti che il messaggio venga visualizzato correttamente sia su desktop che su mobile. Ed ecco come appare la nostra email:

Preview

Visto? Semplice, veloce, dal grande impatto visivo. Facci sapere nei commenti se hai testato questa tecnica e quali risultati hai ottenuto. Puoi inoltre scaricare la nostra Guida all’Email Design per approfondire temi legati a creatività ed email.

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

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

Tutorial: come creare un’email con griglia di immagini per desktop e mobile

Vuoi progettare un'email semplice e piacevole che possa essere visualizzata senza problemi sui dispositivi mobili anche con diverse foto? Sei nel posto giusto. Il post ...

Continua a leggere