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 supporta 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: Aggiungi un piè di pagina
- Procedura: Aggiungi link ai social media nel 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.
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 è composta 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 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.
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 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.
Set di istruzioni: Aggiungi il logo della tua azienda
Questa ricetta mostra come aggiungere il logo della tua azienda al modello email. Esempio:
Ingredienti
- L’URL dell’immagine del logo aziendale
Procedura
- 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>
- 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
alstyle
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; ..."
- Modifica gli altri valori in base alle esigenze.
- Salva il file con estensione .html e visualizza spesso in anteprima le modifiche in un browser.
- Visualizza in anteprima il logo in un modello email di prova prima di aggiungerlo al modello email nel tuo account.
- Quando sei pronto per la pubblicazione, 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
- L’URL dell’immagine del logo aziendale
- valori di colore per l’identità del brand
Procedura
- 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>
- 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
alstyle
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; ..."
- Modifica gli altri valori in base alle esigenze.
- Salva il file con estensione .html e visualizza spesso in anteprima le modifiche in un browser.
- Visualizza l’anteprima del banner in un modello email di prova prima di aggiungerlo al modello email nel tuo account.
- 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
- 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>
- Aggiungi il tuo invito all’azione nei tag di tre paragrafi. Aggiungi o rimuovi paragrafi secondo necessità.
- 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; ..."
- Modifica gli altri valori in base alle esigenze.
- Salva il file con estensione .html e visualizza spesso in anteprima le modifiche in un browser.
- Visualizza l’anteprima del banner in un modello email di prova prima di aggiungerlo al modello email nel tuo account.
- 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:
![](https://zen-marketing-documentation.s3.amazonaws.com/docs/en/email_cookbook_footer.png)
Ingredienti
- le informazioni di contatto della tua azienda
- valori di colore per l’identità del brand
Procedura
- 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>
- Modifica le informazioni di contatto nei tag dei tre paragrafi.
- 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; ..."
- Modifica gli altri valori in base alle esigenze.
- Salva il file con estensione .html e visualizza spesso in anteprima le modifiche in un browser.
- Visualizza l’anteprima del piè di pagina in un modello email di prova prima di aggiungerlo al modello email nel tuo account.
- 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).
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.
{{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
- 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).
- 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>
- Per ciascun link di social media, cambia l’URL del link (
href="..."
) e l’immagine dell’icona (src="..."
) per ciascun link di social media. - 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; ..."
- Modifica gli altri valori in base alle esigenze.
- Salva il file con estensione .html e visualizza spesso in anteprima le modifiche in un browser.
- Visualizza l’anteprima del piè di pagina in un modello email di prova prima di aggiungerlo al modello email nel tuo account.
- 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).
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
- 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>
- 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; ..."
- 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.
- Salva il file con estensione .html e visualizza spesso in anteprima le modifiche in un browser.
- Visualizza in anteprima le modifiche in un modello email di prova prima di aggiungerlo al modello email nel tuo account.
- 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).
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 SMS
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 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
- Scarica il modello email di prova, test_email_template.html allegato di seguito, e aprilo in un editor HTML o di testo.
- 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 -->
- Apri il modello di prova in un browser e rimpicciolisci la finestra del browser per emulare un’applicazione email.
- Apporta modifiche al codice nel modello di test, quindi aggiorna la pagina del browser per vedere l’effetto delle modifiche.
- Continua ad apportare modifiche iterative fino a quando non sei soddisfatto del design.
- 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.
0 commenti