Charles Nadeau

La comprensione dei modelli di progettazione comuni può aiutarti a creare layout email coerenti ed efficaci in linea con il tuo brand.

La maggior parte delle email di notifica è composta solo da una manciata di componenti:

Tutti i componenti sono facoltativi nel modello email, tranne il contenuto.

Le ricette in questo ricettario descrivono come creare e inserire elementi di design nel modello email. Puoi combinare gli elementi per creare il tuo design email. Di seguito sono riportati alcuni modelli di progettazione comuni:

Logo azienda	Logo aziendale con piè di pagina

Banner aziendale con piè di pagina	Banner aziendale con banner e piè di pagina CTA

Per trarre ispirazione, consulta alcuni design email nel blog di Lotus Themes.

Progettare l’aspetto delle email può essere difficile perché HTML e CSS possono essere visualizzati in modo diverso nelle diverse applicazioni email. Alcuni tipi di formattazione possono persino essere interpretati come spam.

Segui queste linee guida generali durante la progettazione delle email:

Segui queste linee guida per le immagini:

• Usa le immagini con parsimonia: Un minor numero di immagini aiuta a mantenere il layout pulito e ordinato. Inoltre, molte immagini possono attivare filtri anti-spam.
• Imposta le dimensioni delle immagini con CSS: Usa gli stili incorporati per ridimensionare le immagini nel layout. Le immagini senza dimensioni definite spesso distorcono il layout delle email. Per una maggiore tranquillità, ridimensiona fisicamente le immagini usando il ricampionamento.
• Usa tag ALT su tutte le immagini: I tag ALT visualizzano una descrizione delle immagini prima che gli utenti ne consentano la visualizzazione.
• Non creare link a immagini in un account Zendesk chiuso: Le immagini saranno interrotte se il destinatario previsto non è registrato e non ha effettuato l’accesso.

Questa ricetta mostra come aggiungere il logo della tua azienda al modello email. Esempio:

Ingredienti

• L’URL dell’immagine del logo aziendale

Procedura

Questa ricetta mostra come aggiungere un banner aziendale al modello email. Un banner aziendale in genere è costituito dal logo e dal nome dell’azienda impostati su un colore di sfondo. Esempio:

Ingredienti

• L’URL dell’immagine del logo aziendale
• valori di colore per l’identità del brand

Procedura

1. Incolla il seguente blocco di codice in un editor HTML o di testo:

   <table style="background-color: #c0c7d8;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px;">
           <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto; margin-right: 10px;">
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 24px; font-weight: bold; color: #333; margin-top: 50px;">Company name</p>
         </td>
       </tr>
     </tbody>
   </table>

2. Apporta una delle seguenti modifiche per personalizzare il banner aziendale:

   Modifica
   Immagine del logo	Elemento: img > src Sostituisci il valore del segnaposto di src con l’URL dell’immagine del logo. Esempio: img src="https://www.example.com/images/logo_acme.png"
   Dimensioni del logo	Elemento: img > stile > larghezza Cambia il width per ridimensionare il logo. Esempio: img style="width: 120px; height: auto; ..."
   Spazio intorno al logo	Se c'è troppo spazio intorno al logo, potresti dover ritagliare lo spazio bianco attorno all'immagine con uno strumento di modifica delle immagini. Se lo spazio intorno all’immagine non è sufficiente, puoi aumentare il riempimento della cella della tabella. Elemento: td > stile Aggiungi padding al style attributo e modificarne il valore. Esempio: td style="padding: 10px; ..."
   Formato del nome dell’azienda	Elemento: p > stile Cambia uno degli stili di testo o aggiungine di nuovi. Esempio: p style="font-size: 30px; color: #553e3e; ..."
   Spazio tra il logo e il nome dell’azienda	Elemento: img > stile > margine-destra Aumenta o diminuisci il margin-right per aumentare o diminuire lo spazio tra il logo e il nome. Esempio: img style="margin-right: 15px; ..."
   Allineamento verticale del nome dell’azienda rispetto al logo	Elemento: p > stile > margin-top Aumenta o diminuisci il margin-top per spostare il nome dell’azienda in alto o in basso rispetto al logo. Esempio: p style="margin-top: 40px; ..."
   Colore di sfondo del banner	Elemento: tabella > stile > background-color Sostituisci il valore esadecimale di #d3d3d3 di background-color stile con il tuo valore. Consulta le linee guida per il branding o un selettore di colori online come html-color.codes. Esempio: table style="background-color: #d8e3fb; ..."

3. Modifica gli altri valori in base alle esigenze.
4. Salva il file con estensione .html e visualizza spesso in anteprima le modifiche in un browser.
5. Visualizza l’anteprima del banner in un modello email di prova prima di aggiungerlo al modello email nel tuo account.
6. Quando sei pronto per la pubblicazione, incolla il blocco di codice banner nel seguente percorso nel modello email HTML nel Centro amministrativo (Centro amministrativo > Canali > Email).

   

Questa ricetta mostra come aggiungere un banner di invito all’azione (CTA) al modello email. In genere, dopo il corpo dell’email si trova un banner di invito all’azione. In genere, invita l’utente a entrare a far parte della community, usare il centro assistenza, provare un nuovo prodotto e così via. È costituito da un elemento grafico, un testo e un link impostato su un colore di sfondo. Esempio:

Ingredienti

• testo dell’invito all’azione
• URL di un’immagine di invito all’azione
• URL di un link per aiutare gli utenti a completare l’invito all’azione
• valori di colore per l’identità del brand

Procedura

1. Incolla il seguente blocco di codice in un editor HTML o di testo:

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
   <tbody>
     <tr>
       <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px; padding-left: 50px; margin-top: 12px; margin-bottom: 8px;">
   
         <div id="cta-text" style="width: 300px;">
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #333; margin-top: 6px;">Take a hand, lend a hand</p>
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 14px;">Join our worldwide community to ask expert users for advice or share your own.</p>
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px;"><a href="#">Ask the community</a></p>
         </div>
   
         <div id="cta-image" style="padding-left: 20px;">
           <img src="cta_image.png" alt="cta_image" style="width: 140px; height: auto; border-radius: 50% 50% 0 0;">
         </div>
   
       </td>
     </tr>
   </tbody>
   </table>

2. Aggiungi il tuo invito all’azione nei tag di tre paragrafi. Aggiungi o rimuovi paragrafi secondo necessità.
3. Apporta una delle modifiche seguenti per personalizzare il banner di invito all’azione:

   Modifica
   Immagine di invito all’azione	Elemento: img > src Sostituisci il valore del segnaposto di src con l’URL dell’immagine di invito all’azione. Esempio: img src="https://www.example.com/images/cta_image.png"
   Dimensioni immagine	Elemento: img > stile > larghezza Cambia il width per ridimensionare l’immagine. Esempio: img style="width: 120px; height: auto; ..."
   Formato dei messaggi di invito all’azione	Elemento: p > stile Cambia uno degli stili di testo o aggiungine di nuovi. Esempio: p style="font-size: 30px; color: #553e3e; ..."
   Spazio tra i messaggi e l’immagine	Elemento: div id="cta-image" > stile > padding-left Aumenta o diminuisci il padding-left per aumentare o diminuire lo spazio tra i messaggi e l’immagine. Esempio: div id="cta-image" style="padding-left: 30px; ..."
   Colore di sfondo del banner	Elemento: tabella > stile > background-color Sostituisci il valore esadecimale di #d8e3fb di background-color stile con il tuo valore. Consulta le linee guida per il branding o un selettore di colori online come html-color.codes. Esempio: table style="background-color: #d3d3d3; ..."

4. Modifica gli altri valori in base alle esigenze.
5. Salva il file con estensione .html e visualizza spesso in anteprima le modifiche in un browser.
6. Visualizza l’anteprima del banner in un modello email di prova prima di aggiungerlo al modello email nel tuo account.
7. Quando sei pronto per la pubblicazione, incolla il blocco di codice banner nel seguente percorso nel modello email HTML nel Centro amministrativo (Centro amministrativo > Canali > Email).

   

Questa ricetta mostra come aggiungere un piè di pagina al modello email. Un piè di pagina può contenere una serie di informazioni, tra cui informazioni di contatto, link ai social media e così via. Per i link ai social media, consulta la ricetta successiva, Ricetta: Aggiungi link ai social media nel piè di pagina.

Il modello email standard fornisce già i seguenti segnaposto per un piè di pagina:

Puoi sostituire o integrare questi segnaposto con il tuo piè di pagina.

In questa ricetta creerai un piè di pagina che fornisce le informazioni di contatto. Sostituirà il {{footer}} e {{footer_link}} segnaposto. Esempio:

Ingredienti

• le informazioni di contatto della tua azienda
• valori di colore per l’identità del brand

Procedura

1. Incolla il seguente blocco di codice in un editor HTML o di testo:

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;">
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p>    
         </td>
       </tr>
     </tbody>
   </table>

2. Modifica le informazioni di contatto nei tag dei tre paragrafi.
3. Apporta una delle seguenti modifiche per personalizzare il piè di pagina:

   Modifica
   Colore di sfondo del piè di pagina	Elemento: tabella > stile > background-color Sostituisci il valore esadecimale di #d8e3fb di background-color stile con il tuo valore. Consulta le linee guida per il branding o un selettore di colori online come html-color.codes. Esempio: table style="background-color: #d3d3d3; ..."
   Colore del testo	Elemento: p > stile > colore Cambia il color valore. Esempio: p style="color: #553e3e; ..."
   Formattazione testo	Elemento: p > stile Cambia uno degli stili di testo o aggiungine di nuovi. Esempio: p style="font-family: Georgia, sans-serif; ..."
   Spazio dai bordi superiore e inferiore	Elemento: td > stile > padding-top Aumenta o diminuisci il padding-top per cambiare lo spazio tra il bordo superiore e il testo. Esempio: td style="padding-top: 8px; ..." Elemento: td > stile > padding-bottom Aumenta o diminuisci il padding-bottom per cambiare lo spazio tra il testo e il bordo inferiore. Esempio: td style="padding-bottom: 8px; ..."

4. Modifica gli altri valori in base alle esigenze.
5. Salva il file con estensione .html e visualizza spesso in anteprima le modifiche in un browser.
6. Visualizza l’anteprima del piè di pagina in un modello email di prova prima di aggiungerlo al modello email nel tuo account.
7. Quando sei pronto per l’attivazione, incolla il blocco di codice nella posizione seguente nel modello email HTML nel Centro amministrativo (Centro amministrativo > Canali > Email).

   

Questa ricetta mostra come aggiungere link ai social media a un piè di pagina personalizzato.

Esempio:

Ingredienti

• URL alle immagini dei social media da usare come pulsanti
• link ai tuoi account di social media

Procedura

1. Incolla il seguente blocco di codice in un editor HTML o di testo:

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;">
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p>    
         </td>
       </tr>
     </tbody>
   </table>

   Questa è la procedura per creare un piè di pagina con le informazioni di contatto (Ricetta: Aggiungi un piè di pagina).

2. Aggiungi le icone social all’HTML prima del tag del primo paragrafo. Esempio:

   <div style="padding-top: 12px; padding-bottom: 0px;">
     <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_facebook.png"/></a>
     <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_x.png"/></a>
     <a href="#"><img style="width: 30px;" src="https://www.example.com/images/icon_instagram.png"/></a>  
   </div>

3. Per ciascun link di social media, cambia l’URL del link (href="...") e l’immagine dell’icona (src="...") per ciascun link di social media.
4. Apporta una delle seguenti modifiche per personalizzare le icone:

   Modifica
   Dimensioni delle icone	Elemento: img > stile > larghezza Assicurati che tutte le icone abbiano lo stesso valore per la larghezza. Esempio: img style="width: 24px; ..."
   Spaziatura tra le icone	Elemento: img > stile > padding-right Cambia il valore di padding-right per ogni link di social media tranne l’ultimo. Esempio: img style="padding-right: 8px; ..."
   Spazio sopra e sotto le icone	Elemento: div > stile > padding-top Aumenta o diminuisci il padding-top per regolare lo spazio sopra le icone. Esempio: div style="padding-top: 8px; ..." Elemento: div > stile > padding-bottom Aumenta o diminuisci il padding-bottom per regolare lo spazio sotto le icone. Esempio: div style="padding-bottom: 10px; ..."

5. Modifica gli altri valori in base alle esigenze.
6. Salva il file con estensione .html e visualizza spesso in anteprima le modifiche in un browser.
7. Visualizza l’anteprima del piè di pagina in un modello email di prova prima di aggiungerlo al modello email nel tuo account.
8. Quando sei pronto per l’attivazione, incolla il blocco di codice nella posizione seguente nel modello email HTML nel Centro amministrativo (Centro amministrativo > Canali > Email).

   

Questa ricetta mostra come personalizzare il corpo dell’email. Potrai cambiare il carattere tipografico e le dimensioni del testo, nonché lo spazio attorno al corpo dell’email.

L’email è composta dal messaggio di notifica e dalla conversazione email. Nel modello email, il corpo dell’email è rappresentato da {{content}} segnaposto. Zendesk sostituisce il segnaposto con il codice HTML prima di inviare l’email. Esempio:

Parte del codice HTML inserito da Zendesk contiene stili che non possono essere modificati o sostituiti. Per maggiori dettagli, consulta Limitazioni alla personalizzazione del corpo dell’email.

Procedura

1. Incolla il {{content}} segnaposto e il relativo tag div principale in un editor HTML o di testo. Esempio:

   <div style="padding: 10px; line-height: 1.5; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;">
     {{content}}
   </div>

2. Apporta una delle seguenti modifiche agli stili del div principale per personalizzare il corpo dell’email.

   Modifica
   Dimensioni del testo del messaggio	Elemento: div > stile > font-size Cambia il font-size valore. Tieni presente che questa modifica non cambierà le dimensioni del testo del nome utente o l’ora di invio dell’email. Esempio: div style="font-size: 11px; ..."
   Carattere di testo	Elemento: div > stile > font-family Puoi cambiare il carattere entro determinati limiti. Usa font sicuri per il web come Trebuchet MS, Verdana o Georgia. Altri caratteri potrebbero non essere supportati in tutte le applicazioni email. Esempio: div style="font-family: 'Trebuchet MS', sans-serif; ..."
   Spazio intorno al corpo dell’email	Elemento: div > stile > riempimento Aumenta o diminuisci il padding per cambiare lo spazio intorno al corpo dell’email. Esempio: div style="padding: 15px; ..." Se vuoi cambiare lo spazio a sinistra e a destra (ad esempio 25 px), specifica due valori per padding stile. Il primo valore è la spaziatura interna per la parte superiore e inferiore, mentre il secondo valore è la spaziatura interna per la parte sinistra e quella destra. Esempio: div style="padding: 15px 25px; ..."

3. Aggiungi altri stili incorporati o modifica altri valori in base alle esigenze.

   Tieni presente che alcune proprietà del corpo dell’email non possono essere modificate. Consulta Limitazioni alla personalizzazione del corpo dell’email.

4. Salva il file con estensione .html e visualizza spesso in anteprima le modifiche in un browser.
5. Visualizza in anteprima le modifiche in un modello email di prova prima di aggiungerlo al modello email nel tuo account.
6. Quando sei pronto per l’attivazione, incolla il blocco di codice nella posizione seguente nel modello email HTML nel Centro amministrativo (Centro amministrativo > Canali > Email).

   

Puoi testare le modifiche con il modello email di prova allegato a questa ricetta.

Le modifiche apportate direttamente al modello email nel Centro amministrativo diventano immediatamente attive. Pertanto, prima di aggiungerle al modello email nel tuo account, dovresti testare a fondo le modifiche nel modello di test per assicurarti che funzionino come previsto.

Per provare le modifiche

1. Scarica il modello email di prova, test_email_template.html allegato di seguito, e aprilo in un editor HTML o di testo.
2. Incolla il blocco di codice per il componente nella posizione indicata nel modello email di prova. Esempio:

   <!-- Paste logo or company banner code block here -->

3. Apri il modello di prova in un browser e rimpicciolisci la finestra del browser per emulare un’applicazione email.
4. Apporta modifiche al codice nel modello di test, quindi aggiorna la pagina del browser per vedere l’effetto delle modifiche.
5. Continua ad apportare modifiche iterative fino a quando non sei soddisfatto del design.
6. Quando sei pronto per l’attivazione, incolla il blocco di codice per il componente nella stessa posizione nel modello email nel Centro amministrativo (Centro amministrativo > Canali > Email).