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 su Amministrazione / Email / Aspetto nel tuo sito Discourse.
- Vedrai un editor dove puoi modificare lâHTML e il CSS per il tuo template email.
Modifica del template HTML
Il markup predefinito nellâeditor contiene un segnaposto %{email_content} nella sezione body. Questo segnaposto è il punto in cui verrĂ inserito il contenuto di ogni email. Puoi apportare qualsiasi modifica al template purchĂŠ non rimuovi questo segnaposto.
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 sezione 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 nellâeditor 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 tutte le regole CSS che 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 test 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:
- Scorri fino alla fine dellâeditor del template.
- Fai clic sul pulsante âRipristina predefinitoâ (Reset to default).
Questa azione sostituirĂ le tue modifiche con il template email predefinito di Discourse.
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 diverse dimensioni dello schermo
iPad Pro (10.5 pollici) (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:
-
Per utilizzare lo stile predefinito delle email di riepilogo:
- Disabilita lâimpostazione del sito
apply custom styles to digest(applica stili personalizzati al riepilogo).
- Disabilita lâimpostazione del sito
-
Per mantenere uno stile coerente su tutte le email di notifica:
- Rimuovi eventuali immagini impostate come impostazione del sito
digest logo(logo del riepilogo). - Aggiungi
<span></span>alla personalizzazione del testo in.../admin/customize/site_texts/user_notifications.digest.custom.html.header.
- Rimuovi eventuali immagini impostate come impostazione del sito
Modifica dei caratteri (font) delle email
Per cambiare i caratteri nelle tue email:
-
Utilizza caratteri web sicuri per la massima compatibilitĂ . Fai riferimento a CSS Font Stack per un elenco dei caratteri disponibili su Windows e Mac.
-
Aggiungi regole CSS per i caratteri al tuo template email 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 fare riferimento a questa guida completa sulla creazione di un template email HTML da zero.
