Ricettario di progettazione email Zendesk

What's my plan?

Suite

Team, Growth, Professional, Enterprise, or Enterprise Plus

Support

Team, Professional, or Enterprise

Posizione: Centro amministrativo > Canali > Talk ed email > Email

Questo ricettario contiene ricette HTML per personalizzare l’aspetto delle email inviate dal tuo account. La personalizzazione dell’aspetto dell’email può aiutarti a migliorare la coerenza del brand e il coinvolgimento dei clienti. Ad esempio, puoi aggiungere il logo della tua azienda o un banner di invito all’azione al layout dell’email in modo che corrisponda all’identità del brand aziendale o all’aspetto del centro assistenza.

L’aspetto delle notifiche email inviate dal tuo account Zendesk è in gran parte determinato da una coppia di modelli nel Centro amministrativo , uno in formato HTML e l’altro in testo normale. Il modello di testo normale non assistenza il tipo di personalizzazione discusso nel ricettario. Per maggiori dettagli, consulta Personalizzazione dei modelli email per le notifiche.

Questo ricettario include i seguenti argomenti:

• Modelli di progettazione comuni per le email di notifica
• Linee guida HTML e best practice per le email
• Procedura: Aggiungi il logo della tua azienda
• Procedura: Aggiungi un banner aziendale
• Procedura: Aggiungi un banner di invito all’azione
• Procedura: Aggiungere un piè di pagina
• Procedura: Aggiungere link ai social media al piè di pagina
• Procedura: Personalizza il corpo dell’email
• Test delle modifiche in corso

Le ricette usano HTML e CSS per personalizzare le notifiche email. Per un’introduzione e un riferimento ai CSS, consulta CSS: Fogli di stile sovrapposti in Mozilla Developer Network.

Nota: Zendesk fornisce questo articolo solo a scopo didattico. Zendesk non fornisce assistenza per HTML e CSS nelle ricette. Per risposte o soluzioni, cerca in Internet o chiedi al tuo bot di chat AI preferito.

Modelli di progettazione comuni per le email di notifica

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 è costituita solo da una manciata di componenti:

• Logo: Un’immagine del logo.
• Banner azienda: Un’alternativa all’uso di un logo da solo.
• Contenuto: Il corpo dell’email.
• Banner di invito all’azione: Un invito all’azione per entrare a far parte della community, usare il centro assistenza, provare un nuovo prodotto e così via.
• Piè di pagina: Può contenere varie informazioni, tra cui informazioni di contatto, link ai social media e così via.

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 e abbinare 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 trovare ispirazione, consulta alcuni design email nel blog di Lotus Themes.

Linee guida HTML e best practice per le email

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:

• Semplifica: Semplifica il design ed evita layout complessi.
• Usa tabelle per il layout: Alcune applicazioni email potrebbero non eseguire il rendering dei layout basati su CSS in modo affidabile. La creazione di layout con tabelle HTML è più affidabile.
• Usa stili CSS incorporati: Usa gli stili incorporati , ovvero gli stili definiti in style attributo di un elemento HTML, come: <p style="width=400px;">. Fogli di stile o stili importati definiti in a <style> il tag potrebbe non essere supportato in tutte le applicazioni email.
• Usa caratteri sicuri per il web: Usa caratteri sicuri per il Web come Arial, Verdana o Georgia. I caratteri personalizzati potrebbero non essere supportati o non essere visualizzati correttamente in tutte le applicazioni email.
• Riduci al minimo la formattazione del testo: La riduzione al minimo della formattazione del testo aiuta a mantenere il layout pulito e ordinato. Inoltre, molto testo in grassetto può attivare filtri anti-spam.

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 collegare alle immagini in un account Zendesk chiuso: Le immagini saranno interrotte se il destinatario previsto non è registrato e non ha effettuato l’accesso.

Set di istruzioni: Aggiungi il logo della tua azienda

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

Ingredienti

• URL dell’immagine del logo aziendale

Procedura

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

   <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
    <tbody>
       <tr>
        <td align="center" style="padding-top: 0px; padding-bottom: 0px;">
           <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto;">
         </td>
       </tr>
     </tbody>
   </table>

2. Apporta una delle seguenti modifiche per personalizzare il logo:

   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 hai 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 è insufficiente, 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; ..."
   Allineamento orizzontale del logo	Elemento: td > allinea Scegli centro, sinistra o destra. Esempio: td align="left"
   Spaziatura verticale del logo	Elemento: td > stile > padding-top Cambia il padding-top per aggiungere spazio sopra il logo. Elemento: td > stile > padding-top Cambia il padding-bottom per aggiungere spazio sotto il logo. Esempio: td style="padding-top: 15px; padding-bottom: 5px; ..."

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 in anteprima il logo in un modello email di prova prima di aggiungerlo al modello email nel tuo account.
6. Quando sei pronto per l’attivazione, inserisci il blocco di codice del logo nella posizione seguente nel modello email HTML nel Centro amministrativo (Centro amministrativo > Canali > Email).

   

Set di istruzioni: Aggiungi un banner aziendale

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

• 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 qualsiasi 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).

   

Set di istruzioni: Aggiungi un banner di invito all’azione

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 in base alle esigenze.
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 qualsiasi 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 ridurre 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).

   

Set di istruzioni: Aggiungi un piè di pagina

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:

• {{footer}} : Visualizza la riga seguente: "Questa email è un servizio di Acme.", dove "Acme" è il nome della tua azienda.
• {{footer_link}}: Visualizza la riga seguente nell’email: "Consegnato da Zendesk.", con un link su "Zendesk" che rimanda a zendesk.com.

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 qualsiasi 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 in anteprima il 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 nel seguente percorso nel modello email HTML nel Centro amministrativo (Centro amministrativo > Canali > Email).

   

Set di istruzioni: Aggiungi link ai social media nel piè di pagina

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

Nota: Se hai aggiunto canali di social media al tuo account Zendesk, puoi impostare il {{footer}} pulsanti di visualizzazione segnaposto per i canali dei social media. Consulta Aggiunta di pulsanti dei social media alle email.

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 Modifica il valore di padding-right per ogni link ai 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 in anteprima il 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 nel seguente percorso nel modello email HTML nel Centro amministrativo (Centro amministrativo > Canali > Email).

   

Set di istruzioni: Personalizza il corpo dell’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 alcuni limiti. Usa caratteri 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 è la spaziatura interna per la parte sinistra e 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 nel seguente percorso nel modello email HTML nel Centro amministrativo (Centro amministrativo > Canali > Email).

   

Limitazioni alla personalizzazione del corpo dell’email

Zendesk sostituisce {{content}} segnaposto con il proprio codice HTML quando invia l’email. Tuttavia, il codice HTML generato dal sistema contiene stili incorporati per determinati elementi del corpo dell’email. Purtroppo, non puoi accedere a questi stili per modificarli. Inoltre, non puoi sovrascriverli usando gli stili incorporati nel modello email. In CSS, gli stili incorporati degli elementi secondari hanno la precedenza sugli stili incorporati degli elementi principali come div.

Questa sezione descrive alcune delle limitazioni alla personalizzazione del corpo dell’email. Assicurati di prendere in considerazione queste impostazioni quando prendi decisioni di progettazione sul resto del corpo dell’email.

Corpo del testo

Non puoi cambiare gli stili seguenti per il corpo del testo:

• colore del carattere
• altezza linea
• margini intorno al testo

Le impostazioni per questi stili sono le seguenti:

color: #2b2e2f; line-height: 22px; margin: 15px 0

Nome e data di invio del testo

Non puoi cambiare gli stili seguenti per il nome e la data di invio del testo:

• colore del carattere
• famiglia di caratteri
• dimensione carattere
• altezza linea
• margini intorno al testo

Le impostazioni per il testo del nome sono le seguenti:

color: #1b1d1e"; font-family: Verdana, Tahoma, sans-serif; font-size: 15px;
line-height: 18px; margin-bottom: 0; margin-top: 0;padding: 0; color: #1b1d1e"

Le impostazioni per la data di invio dell’SMS sono le seguenti:

font-family: Verdana, Tahoma, sans-serif; font-size: 13px; line-height: 25px; 
margin-bottom: 15px; margin-top: 0; padding: 0; color: #bbbbbb"

Test delle modifiche in corso

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

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

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).

Avvertenza sulla traduzione: questo articolo è stato tradotto usando un software di traduzione automatizzata per fornire una comprensione di base del contenuto. È stato fatto tutto il possibile per fornire una traduzione accurata, tuttavia Zendesk non garantisce l'accuratezza della traduzione.

Per qualsiasi dubbio sull'accuratezza delle informazioni contenute nell'articolo tradotto, fai riferimento alla versione inglese dell'articolo come versione ufficiale.