Diese Anleitung erklärt, wie Sie die äußere HTML-Vorlage für alle von Ihrer Discourse-Site gesendeten E-Mails anpassen und gestalten.
Erforderliches Benutzerniveau: Administrator
Alle von Ihrer Website gesendeten E-Mails werden in eine HTML-Vorlage eingeschlossen, die angepasst werden kann.
Diese Anleitung behandelt:
- Zugriff auf den Bereich zur Anpassung der E-Mail-Gestaltung
- Modifizieren der HTML-Vorlage
- Hinzufügen von benutzerdefiniertem CSS
- Testen von E-Mail-Vorlagen
- Rückgängigmachen von Änderungen
- Ein Beispiel für eine benutzerdefinierte Vorlage
- Interaktion mit Digest-E-Mails
- Ändern von E-Mail-Schriftarten
Zugriff auf die Anpassung der E-Mail-Gestaltung
- Navigieren Sie in Ihrer Discourse-Site zu Admin / E-Mail / Erscheinungsbild.
- Sie sehen einen Editor, in dem Sie das HTML und CSS für Ihre E-Mail-Vorlage ändern können.
Modifizieren der HTML-Vorlage
Der Standard-Markup im Editor enthält einen Platzhalter %{email_content} im body-Abschnitt. Dieser Platzhalter ist die Stelle, an der der Inhalt jeder E-Mail eingefügt wird. Sie können beliebige Änderungen an der Vorlage vornehmen, solange Sie diesen Platzhalter nicht entfernen.
Informationen zur Anpassung des Inhalts, der den Platzhalter %{email_content} ersetzt, finden Sie unter Anpassen spezifischer E-Mail-Vorlagen.
Hinzufügen von benutzerdefiniertem CSS
Sie können den CSS-Abschnitt des E-Mail-Stil-Editors verwenden, um Inline-Stile in Ihre Vorlage einzufügen. Hier ist ein Beispiel:
-
Fügen Sie eine CSS-Klasse zu einem HTML-Element in der Vorlage hinzu:
<td> class="my-outer-td"> </td> -
Erstellen Sie eine Regel für die Klasse im CSS-Editor:
.my-outer-td { padding: 30px 0 30px 0; }
Discourse ersetzt die CSS-Klasse vor dem Senden der E-Mail durch die tatsächliche CSS-Regel. Sie können hier beliebige CSS-Regeln hinzufügen, die Sie wünschen.
Testen von E-Mail-Vorlagen
Es ist entscheidend, Ihre Änderungen an der E-Mail-Vorlage in verschiedenen E-Mail-Clients zu testen, da diese HTML unterschiedlich interpretieren können. Verwenden Sie einen E-Mail-Testdienst, um eine Vorschau anzuzeigen, wie Ihre E-Mails in verschiedenen Clients aussehen werden, insbesondere bei größeren Änderungen.
Rückgängigmachen von Änderungen
Um Ihre Vorlagenanpassung rückgängig zu machen:
- Scrollen Sie zum Ende des Vorlagen-Editors.
- Klicken Sie auf die Schaltfläche „Auf Standard zurücksetzen“.
Diese Aktion ersetzt Ihre Änderungen durch die Standard-Discourse-E-Mail-Vorlage.
Beispiel für eine benutzerdefinierte Vorlage
Hier ist eine einfache E-Mail-Vorlage, die die Breite von E-Mails auf maximal 600 Pixel begrenzt und oben ein Logo hinzufügt:
<!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>
Denken Sie daran, die Attribute src, alt und href des Bildes durch die spezifischen Informationen Ihrer Website zu ersetzen.
So sieht es auf verschiedenen Bildschirmgrößen aus
iPad Pro (10.5 Zoll) (iOS 13.1):
Gmail (Chrome):
iPhone 11 Pro Max (iOS 13.1):
Outlook 2019 (Windows 10)
Interaktion mit Digest-E-Mails
Wenn Ihre benutzerdefinierte Vorlage allen E-Mails ein Logo hinzufügt, haben Sie zwei Optionen für Digest-E-Mails:
-
Um das Standard-Styling für Digest-E-Mails zu verwenden:
- Deaktivieren Sie die Site-Einstellung
apply custom styles to digest(Benutzerdefinierte Stile auf Digest anwenden).
- Deaktivieren Sie die Site-Einstellung
-
Um ein konsistentes Styling für alle Benachrichtigungs-E-Mails beizubehalten:
- Entfernen Sie alle Bilder, die als Site-Einstellung
digest logofestgelegt sind. - Fügen Sie
<span></span>zur Textanpassung unter.../admin/customize/site_texts/user_notifications.digest.custom.html.headerhinzu.
- Entfernen Sie alle Bilder, die als Site-Einstellung
Ändern von E-Mail-Schriftarten
Um Schriftarten in Ihren E-Mails zu ändern:
-
Verwenden Sie websichere Schriftarten für maximale Kompatibilität. Eine Liste der auf Windows und Mac verfügbaren Schriftarten finden Sie unter CSS Font Stack.
-
Fügen Sie CSS-Regeln für die Schriftarten zu Ihrer Discourse-E-Mail-Vorlage hinzu.
-
Sie können Schriftarten direkt in HTML-Elementen festlegen, zum Beispiel:
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;"> %{email_content} </td>
Beachten Sie, dass Web-Schriftarten von externen Diensten von vielen E-Mail-Clients nicht unterstützt werden.
Zusätzliche Ressourcen
Weitere Informationen zum Erstellen von HTML-E-Mails finden Sie in dieser umfassenden Anleitung zum Erstellen einer HTML-E-Mail-Vorlage von Grund auf.
