Questa guida spiega come personalizzare e stilizzare il template HTML esterno per tutte le email inviate dal tuo sito Discourse.
Livello utente richiesto: Amministratore
Tutte le email inviate dal tuo sito sono racchiuse in un template HTML che può essere personalizzato.
Questa guida copre:
- Accesso alla sezione di personalizzazione dello stile delle email
- Modifica del template HTML
- Aggiunta di CSS personalizzato
- Test dei template email
- Ripristino delle modifiche
- Un esempio di template personalizzato
- Interazione con le email di riepilogo (digest)
- Modifica dei caratteri (font) delle email
Accesso alla personalizzazione dello stile delle email
- Naviga alla pagina Aspetto (Appearance) nella sezione Email della barra laterale di amministrazione, oppure vai direttamente a
/admin/customize/email_style. - Vedrai un editor con due schede â HTML e CSS â dove puoi modificare il template e gli stili per le tue email.
Modifica del template HTML
Il markup predefinito nella scheda HTML contiene diversi segnaposto (placeholder):
%{email_content}â Obbligatorio. Questo è il punto in cui verrĂ inserito il contenuto di ogni email. Non devi rimuovere questo segnaposto.%{email_preview}â Inserisce un testo di anteprima nascosto per i client di posta elettronica che mostrano uno snippet.%{html_lang}â Inserisce il codice della lingua del sito nel tag<html>.%{dark_mode_meta_tags}â Inserisce i meta tag per il supporto della modalitĂ scura.%{dark_mode_styles}â Inserisce gli stili CSS per il rendering della modalitĂ scura.
Quando crei un template personalizzato, dovresti includere tutti questi segnaposto per garantire la piena compatibilitĂ . Puoi fare riferimento al template predefinito (visibile quando apri lâeditor per la prima volta) come punto di partenza.
Per informazioni su come personalizzare il contenuto che sostituisce il segnaposto %{email_content}, consulta come personalizzare template email specifici.
Aggiunta di CSS personalizzato
Puoi utilizzare la scheda CSS dellâeditor Stile Email per iniettare stili inline nel tuo template. Ecco un esempio:
-
Aggiungi una classe CSS a un elemento HTML nel template:
<td> class="my-outer-td"> </td> -
Crea una regola per la classe nella scheda CSS:
.my-outer-td { padding: 30px 0 30px 0; }
Discourse sostituirĂ la classe CSS con la regola CSS effettiva prima di inviare lâemail. Puoi aggiungere qualsiasi regola CSS desideri qui.
Test dei template email
Ă fondamentale testare le modifiche al template email su vari client di posta elettronica, poichĂŠ potrebbero interpretare lâHTML in modo diverso. Utilizza un servizio di testing delle email per visualizzare in anteprima come appariranno le tue email su diversi client, specialmente per modifiche significative.
Ripristino delle modifiche
Per ripristinare la personalizzazione del tuo template:
- Seleziona la scheda che desideri ripristinare (HTML o CSS).
- Fai clic sul pulsante âReimposta a predefinitoâ (Reset to default) sotto lâeditor.
Questo ripristinerĂ quella specifica sezione (HTML o CSS) al template email predefinito di Discourse. Ogni scheda viene reimpostata in modo indipendente.
Esempio di template personalizzato
Ecco un template email di base che limita la larghezza delle email a un massimo di 600px e aggiunge un logo in alto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<!--[if mso]>
<style type="text/css">
body, table, td, th, h1, h2, h3 { font-family: Helvetica, Arial, sans-serif !important; }
</style>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 30px 0;">
<!--[if gte mso 9]>
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;border-collapse: collapse;">
<tr>
<td style="padding: 20px 15px 20px 15px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<a href="https://forum.example.com">
<img src="https://your-site-logo-url" alt="Your site name" width="150" height="40" style="display: block;"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 15px 0 15px;">
<hr style="background-color: #ddd; height: 1px; border: 1px;" />
</td>
</tr>
<tr>
<td style="padding: 20px 15px 30px 15px; color: #153643; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">
%{email_content}
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
Ricorda di sostituire gli attributi src, alt e href dellâimmagine con le informazioni specifiche del tuo sito.
Ecco come appare su diversi schermi
iPad Pro (10.5 inch) (iOS 13.1):
Gmail (Chrome):
iPhone 11 Pro Max (iOS 13.1):
Outlook 2019 (Windows 10)
Interazione con le email di riepilogo (digest)
Se il tuo template personalizzato aggiunge un logo a tutte le email, hai due opzioni per le email di riepilogo (digest):
-
Per utilizzare lo stile predefinito delle email di riepilogo:
- Disabilita lâimpostazione del sito
apply custom styles to digest.
- Disabilita lâimpostazione del sito
-
Per mantenere uno stile coerente su tutte le email di notifica:
- Rimuovi qualsiasi immagine impostata come opzione del sito
digest logo. - Aggiungi
<span></span>alla personalizzazione del testo in.../admin/customize/site_texts/user_notifications.digest.custom.html.header.
- Rimuovi qualsiasi immagine impostata come opzione del sito
Modifica dei caratteri (font) delle email
Per cambiare i caratteri nelle tue email:
-
Utilizza caratteri web-safe per la massima compatibilitĂ . Consulta CSS Font Stack per un elenco dei caratteri disponibili su Windows e Mac.
-
Aggiungi regole CSS per i caratteri al tuo template email di Discourse.
-
Puoi impostare i caratteri direttamente negli elementi HTML, ad esempio:
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;"> %{email_content} </td>
Nota che i caratteri web provenienti da servizi esterni non sono supportati da molti client di posta elettronica.
Risorse aggiuntive
Per maggiori informazioni sulla creazione di email HTML, puoi consultare questa guida completa sulla creazione di un template email HTML da zero.
