Zendesk-Rezeptbuch für das E-Mail-Design

Welchen Plan habe ich

Suite

Beliebiger Plan

Support

Beliebiger Plan

Direktzugriff: Admin Center > Kanäle > Talk und E -Mail > E-Mail

In den HTML-Rezepten in diesem Beitrag erfahren Sie, wie Sie das Aussehen der von Ihrem Konto aus gesendeten E-Mail-Nachrichten anpassen können. Das kann zu einem einheitlichen Erscheinungsbild Ihrer Marke beitragen und die Interaktion mit Ihren Kunden verbessern. Sie können Ihrem E-Mail-Layout zum Beispiel Ihr Firmenlogo oder ein Call-to-Action-Banner hinzufügen, um Ihre Nachrichten an das Erscheinungsbild Ihrer Marke oder Ihres Help Centers anzupassen.

Das Aussehen der von Ihrem Zendesk-Konto aus gesendeten E-Mail-Benachrichtigungen wird im Wesentlichen durch eine HTML-Vorlage und eine Nur-Text-Vorlage im Admin Center bestimmt. Für die in diesem Rezeptbuch beschriebenen Anpassungen verwenden wir die HTML-Vorlage, da die Nur-Text-Vorlage die dafür notwendigen Funktionen nicht unterstützt. Weitere Informationen finden Sie unter Anpassen Ihrer E-Mail-Vorlagen für Benachrichtigungen.

Dieses Rezeptbuch enthält die folgenden Themen:

• Gängige Designmuster für E-Mail-Benachrichtigungen
• HTML-Richtlinien und Best Practices für E-Mail-Nachrichten
• Rezept: Firmenlogo hinzufügen
• Rezept: Firmenbanner hinzufügen
• Rezept: Call-To-Action-Banner hinzufügen
• Rezept: Fußbereich hinzufügen
• Rezept: Social-Media-Links zum Fußbereich hinzufügen
• Rezept: E-Mail-Text anpassen
• Änderungen testen

In diesen Rezepten wird HTML- und CSS-Code verwendet, um E-Mail-Benachrichtigungen anzupassen. Eine Einführung und Referenzinformationen zu CSS finden Sie unter CSS: Cascading Style Sheets auf der Mozilla Developer Network-Website.

Hinweis: Dieser Beitrag ist nur für Schulungszwecke gedacht. Zendesk bietet keine Unterstützung für den in den Rezepten verwendeten HTML- und CSS-Code. Wenn Sie Antworten oder Lösungen benötigen, suchen Sie im Internet oder fragen Sie Ihren bevorzugten KI-Chatbot.

Gängige Designmuster für E-Mail-Benachrichtigungen

Die Kenntnis gängiger Designmuster kann Ihren helfen, einheitliche und effektive E-Mail-Layouts zu erstellen, die zu Ihrer Marke passen.

Die meisten E-Mail-Benachrichtigungen enthalten nur einige wenige Komponenten:

• Logo: Ein Logo-Bild.
• Firmenbanner: Kann anstelle von oder zusätzlich zu einem Logo verwendet werden.
• Inhalt: Der E-Mail-Text.
• Call-To-Action-Banner: Eine Aufforderung, Ihrer Community beizutreten, Ihr Help Center zu besuchen, ein neues Produkt auszuprobieren usw.
• Fußbereich: Kann Kontaktinformationen, Social-Media-Links und ähnliche Informationen enthalten.

Bis auf den Inhalt sind alle Komponenten der E-Mail-Vorlage optional.

In diesem Rezeptbuch wird beschrieben, wie Sie diese Designelemente erstellen und in die E-Mail-Vorlage einfügen. Sie können die Elemente nach Belieben zu Ihrem individuellen E-Mail-Design kombinieren. Die folgende Tabelle zeigt einige gängige Designmuster:

Firmenlogo	Firmenlogo mit Fußbereich

Firmenbanner mit Fußbereich	Firmenbanner mit Call-To-Action-Banner und Fußbereich

Einige Anregungen für Ihr E-Mail-Design finden Sie im Lotus Themes Blog.

HTML-Richtlinien und Best Practices für E-Mail-Nachrichten

Die Gestaltung von E-Mail-Nachrichten kann eine Herausforderung darstellen, da HTML und CSS in verschiedenen E-Mail-Umgebungen möglicherweise unterschiedlich wiedergegeben werden. Manche Formatierung wird u. U. sogar als Spam interpretiert.

Beachten Sie bei der Gestaltung Ihrer E-Mail die folgenden allgemeinen Richtlinien:

• Einfach halten: Verwenden Sie ein möglichst einfaches Design ohne komplexe Layouts.
• Tabellen für das Layout verwenden: In einigen E-Mail-Anwendungen werden CSS-basierte Layouts nicht immer zuverlässig dargestellt. Sicherer ist es, das Layout mithilfe von HTML-Tabellen zu erstellen.
• Inline-CSS-Stile verwenden: Verwenden Sie Inline-Stile, die im style-Attribut eines HTML-Elements definiert werden. Beispiel: <p style="width=400px;">. Importierte Stylesheets oder in einem <style>-Tag definierte Stile werden möglicherweise nicht von allen E-Mail-Programmen unterstützt.
• Websichere Schriftarten verwenden: Verwenden Sie websichere Schriftarten wie Arial, Verdana oder Georgia. Angepasste Schriftarten werden möglicherweise nicht von allen E-Mail-Programmen unterstützt oder korrekt dargestellt.
• Möglichst wenig Textformatierung verwenden: Eine einfache Textformatierung sorgt für ein sauberes und übersichtliches Layout. Außerdem kann viel fett gedruckter Text Spamfilter auslösen.

Beachten Sie die folgenden Richtlinien für die Verwendung von Bildern:

• Bilder sparsam verwenden: Weniger Bilder sorgen für ein sauberes und übersichtliches Layout. Außerdem kann eine hohe Anzahl von Bildern Spamfilter auslösen.
• Bildgröße per CSS festlegen: Verwenden Sie Inline-Stile, um die Größe der Bilder in Ihrem Layout vorzugeben. Bilder ohne festgelegte Größe können das Layout der E-Mails verzerren. Als zusätzliche Sicherheitsmaßnahme können Sie die Bildgröße durch Resampling anpassen.
• ALT-Tags für alle Bilder verwenden: ALT-Tags zeigen eine Beschreibung der Bilder an, bevor der Benutzer die Anzeige gestattet.
• Keine Bilder in einem geschlossenen Zendesk-Konto verlinken: Wenn der Empfänger kein registrierter und angemeldeter Benutzer ist, werden diese Bilder nicht angezeigt.

Rezept: Firmenlogo hinzufügen

In diesem Rezept wird beschrieben, wie Sie der E-Mail-Vorlage Ihr Firmenlogo hinzufügen. Beispiel:

Zutaten

• URL der Bilddatei Ihres Firmenlogos

Rezept

1. Fügen Sie in einem HTML- oder Texteditor den folgenden Codeblock ein:

   <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. Nehmen Sie die folgenden Änderungen vor, um das Logo anzupassen:

   Änderung
   Logo-Bild	Element: img > src Ersetzen Sie den Platzhalterwert des src-Attributs durch die URL Ihrer Logo-Bilddatei. Beispiel: img src="https://www.example.com/images/logo_acme.png"
   Größe des Logos	Element: img > style > width Ändern Sie den width-Wert, um die Größe Ihres Logos zu ändern. Beispiel: img style="width: 120px; height: auto; ..."
   Abstand um das Logo	Wenn der Abstand um das Logo zu groß ist, müssen Sie die Bilddatei womöglich mit einem Bildbearbeitungsprogramm zuschneiden. Wenn der Abstand um das Bild zu klein ist, können Sie den Abstandswert für die Tabellenzelle erhöhen. Element: td > style Fügen Sie padding in das style-Attribut ein und passen Sie den Wert an. Beispiel: td style="padding: 10px; ..."
   Horizontale Ausrichtung des Logos	Element: td > align Verwenden Sie „center“, „left“ oder „right“. Beispiel: td align="left"
   Vertikaler Abstand des Logos	Element: td > style > padding-top Ändern Sie den padding-top-Wert, um den Abstand über dem Logo zu vergrößern. Element: td > style > padding-top Ändern Sie den padding-bottom-Wert, um den Abstand unter dem Logo zu vergrößern. Beispiel: td style="padding-top: 15px; padding-bottom: 5px; ..."

3. Passen Sie je nach Bedarf weitere Werte an.
4. Speichern Sie die Datei zwischendurch immer wieder mit der Erweiterung „.html“ und überprüfen Sie Ihre Änderungen in einem Browser.
5. Überprüfen Sie das Logo in einer E-Mail-Testvorlage, bevor Sie es in die E-Mail-Vorlage Ihres Kontos übernehmen.
6. Wenn alles bereit ist, fügen Sie den Logo-Codeblock an der folgenden Stelle in die HTML-Mailvorlage im Admin Center ein (Admin Center > Kanäle > E-Mail).

   

Rezept: Firmenbanner hinzufügen

In diesem Rezept wird beschrieben, wie Sie der E-Mail-Vorlage ein Firmenbanner hinzufügen. Ein Firmenbanner besteht in der Regel aus dem Logo und dem Namen des Unternehmens vor einem farbigen Hintergrund. Beispiel:

Zutaten

• URL der Bilddatei Ihres Firmenlogos
• Dem Erscheinungsbild Ihrer Marke entsprechende Farbwerte

Rezept

1. Fügen Sie in einem HTML- oder Texteditor den folgenden Codeblock ein:

   <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. Nehmen Sie die folgenden Änderungen vor, um das Firmenbanner anzupassen:

   Änderung
   Logo-Bild	Element: img > src Ersetzen Sie den Platzhalterwert des src-Attributs durch die URL Ihrer Logo-Bilddatei. Beispiel: img src="https://www.example.com/images/logo_acme.png"
   Größe des Logos	Element: img > style > width Ändern Sie den width-Wert, um die Größe Ihres Logos zu ändern. Beispiel: img style="width: 120px; height: auto; ..."
   Abstand um das Logo	Wenn der Abstand um das Logo zu groß ist, müssen Sie die Bilddatei eventuell mit einem Bildbearbeitungsprogramm zuschneiden. Wenn der Abstand um das Logo zu klein ist, können Sie den Abstandswert für die Tabellenzelle erhöhen. Element: td > style Fügen Sie padding in das style-Attribut ein und passen Sie den Wert an. Beispiel: td style="padding: 10px; ..."
   Formatierung des Unternehmensnamens	Element: p > style Ändern Sie die vorhandenen Textstile, oder fügen Sie eigene Stile hinzu. Beispiel: p style="font-size: 30px; color: #553e3e; ..."
   Abstand zwischen dem Logo und dem Unternehmensnamen	Element: img > style > margin-right Erhöhen oder verringern Sie den margin-right-Wert, um den Abstand zwischen dem Logo und dem Namen zu vergrößern oder zu verkleinern. Beispiel: img style="margin-right: 15px; ..."
   Vertikale Ausrichtung des Firmennamens im Verhältnis zum Logo	Element: p > style > margin-top Erhöhen oder verringern Sie den margin-top-Wert, um den Unternehmensnamen gegenüber dem Logo nach unten oder nach oben zu verschieben. Beispiel: p style="margin-top: 40px; ..."
   Hintergrundfarbe des Banners	Element: table > style > background-color Ersetzen Sie den Hex-Wert #d3d3d3 des background-color-Stils durch den Wert der gewünschten Farbe. Ziehen Sie Ihre Branding-Richtlinien zurate, oder verwenden Sie einen Online-Farbwähler wie html-color.codes. Beispiel: table style="background-color: #d8e3fb; ..."

3. Passen Sie je nach Bedarf weitere Werte an.
4. Speichern Sie die Datei zwischendurch immer wieder mit der Erweiterung „.html“ und überprüfen Sie Ihre Änderungen in einem Browser.
5. Überprüfen Sie das Banner in einer E-Mail-Testvorlage, bevor Sie es in die E-Mail-Vorlage Ihres Kontos übernehmen.
6. Wenn alles bereit ist, fügen Sie den Banner-Codeblock an der folgenden Stelle in die HTML-Mailvorlage im Admin Center ein (Admin Center > Kanäle > E-Mail).

   

Rezept: Call-To-Action-Banner hinzufügen

In diesem Rezept wird beschrieben, wie Sie der E-Mail-Vorlage ein Call-To-Action (CTA)-Banner hinzufügen. Ein Call-to-Action-Banner befindet sich in der Regel unter dem Text der E-Mail. Darin wird der Benutzer meist aufgefordert, etwas zu tun – Ihrer Community beizutreten, Ihr Help Center zu besuchen, ein neues Produkt auszuprobieren usw. Es besteht aus einer Grafik, einem Text und einem Link vor einem farbigen Hintergrund. Beispiel:

Zutaten

• Text der Handlungsaufforderung
• URL des Call-To-Action-Bildes
• URL für einen Link, auf den der Benutzer klicken soll, um der Handlungsaufforderung zu folgen
• Dem Erscheinungsbild Ihrer Marke entsprechende Farbwerte

Rezept

1. Fügen Sie in einem HTML- oder Texteditor den folgenden Codeblock ein:

   <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. Fügen Sie die Handlungsaufforderungen in die drei Absatz-Tags ein. Sie können je nach Bedarf Absätze hinzufügen oder entfernen.
3. Nehmen Sie die folgenden Änderungen vor, um das Call-To-Action-Banner anzupassen:

   Änderung
   Call-to-Action-Bild	Element: img > src Ersetzen Sie den Platzhalterwert des src-Attributs durch die URL Ihrer Call-To-Action-Bilddatei. Beispiel: img src="https://www.example.com/images/cta_image.png"
   Bildgröße	Element: img > style > width Ändern Sie den width-Wert, um die Größe Ihres Bildes zu ändern. Beispiel: img style="width: 120px; height: auto; ..."
   Format der Call-to-Action-Nachrichten	Element: p > style Ändern Sie die vorhandenen Textstile, oder fügen Sie eigene Stile hinzu. Beispiel: p style="font-size: 30px; color: #553e3e; ..."
   Abstand zwischen Nachrichten und Bild	Element: div id="cta-image" > style > padding-left Erhöhen oder verringern Sie den padding-left-Wert, um den Abstand zwischen den Nachrichten und dem Bild zu vergrößern oder zu verkleinern. Beispiel: div id="cta-image" style="padding-left: 30px; ..."
   Hintergrundfarbe des Banners	Element: table > style > background-color Ersetzen Sie den Hex-Wert #d8e3fb des background-color-Stils durch den Wert der gewünschten Farbe. Ziehen Sie Ihre Branding-Richtlinien zurate, oder verwenden Sie einen Online-Farbwähler wie html-color.codes. Beispiel: table style="background-color: #d3d3d3; ..."

4. Passen Sie je nach Bedarf weitere Werte an.
5. Speichern Sie die Datei zwischendurch immer wieder mit der Erweiterung „.html“ und überprüfen Sie Ihre Änderungen in einem Browser.
6. Überprüfen Sie das Banner in einer E-Mail-Testvorlage, bevor Sie es in die E-Mail-Vorlage Ihres Kontos übernehmen.
7. Wenn alles bereit ist, fügen Sie den Banner-Codeblock an der folgenden Stelle in die HTML-Mailvorlage im Admin Center ein (Admin Center > Kanäle > E-Mail).

   

Rezept: Fußbereich hinzufügen

In diesem Rezept wird beschrieben, wie Sie der E-Mail-Vorlage einen Fußbereich hinzufügen. Ein Fußbereich kann Kontaktinformationen, Social-Media-Links und ähnliche Informationen enthalten. Wie Sie Social-Media-Links hinzufügen, erfahren Sie im nächsten Rezept: Social-Media-Links zum Fußbereich hinzufügen.

Die standardmäßige E-Mail-Vorlage weist bereits folgende Platzhalter für einen Fußbereich auf:

• {{footer}}: Zeigt die folgende Zeile an: „Diese E-Mail ist ein Service von Acme.“, wobei „Acme“ der Name Ihres Unternehmens ist.
• {{footer_link}}: Zeigt die folgende Zeile in der E-Mail an: „Bereitgestellt von Zendesk.“, wobei „Zendesk“ mit zendesk.com verlinkt ist.

Sie können diese Platzhalter durch Ihre eigenen Fußbereich ersetzen oder ergänzen.

In diesem Rezept erstellen Sie einen Fußbereich mit Ihren Kontaktinformationen, der die Platzhalter {{footer}} und {{footer_link}} ersetzt. Beispiel:

Zutaten

• Kontaktinformationen Ihres Unternehmens
• Dem Erscheinungsbild Ihrer Marke entsprechende Farbwerte

Rezept

1. Fügen Sie in einem HTML- oder Texteditor den folgenden Codeblock ein:

   <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. Ändern Sie die Kontaktinformationen in den drei Absatz-Tags.
3. Nehmen Sie die folgenden Änderungen vor, um den Fußbereich anzupassen:

   Änderung
   Hintergrundfarbe des Fußbereichs	Element: table > style > background-color Ersetzen Sie den Hex-Wert #d8e3fb des background-color-Stils durch den Wert der gewünschten Farbe. Ziehen Sie Ihre Branding-Richtlinien zurate, oder verwenden Sie einen Online-Farbwähler wie html-color.codes. Beispiel: table style="background-color: #d3d3d3; ..."
   Textfarbe	Element: p > style > color Ändern Sie den color-Wert. Beispiel: p style="color: #553e3e; ..."
   Textformatierung	Element: p > style Ändern Sie die vorhandenen Textstile, oder fügen Sie eigene Stile hinzu. Beispiel: p style="font-family: Georgia, sans-serif; ..."
   Abstand vom oberen und unteren Rand	Element: td > style > padding-top Erhöhen oder verringern Sie den padding-top-Wert, um den Abstand zwischen dem oberen Rand und dem Text zu vergrößern oder zu verkleinern. Beispiel: td style="padding-top: 8px; ..." Element: td > style > padding-bottom Erhöhen oder verringern Sie den padding-bottom-Wert, um den Abstand zwischen dem Text und dem unteren Rand zu vergrößern oder zu verkleinern. Beispiel: td style="padding-bottom: 8px; ..."

4. Passen Sie je nach Bedarf weitere Werte an.
5. Speichern Sie die Datei zwischendurch immer wieder mit der Erweiterung „.html“ und überprüfen Sie Ihre Änderungen in einem Browser.
6. Überprüfen Sie den Fußbereich in einer E-Mail-Testvorlage, bevor Sie ihn in die E-Mail-Vorlage Ihres Kontos übernehmen.
7. Wenn alles bereit ist, fügen Sie den Codeblock an der folgenden Stelle in die HTML-Mailvorlage im Admin Center ein (Admin Center > Kanäle > E-Mail).

   

Rezept: Social-Media-Links zum Fußbereich hinzufügen

In diesem Rezept wird beschrieben, wie Sie einem angepassten Fußbereich Social-Media-Links hinzufügen.

Hinweis: Wenn Sie Ihrem Zendesk-Konto Social-Media-Kanäle hinzugefügt haben, können Sie mit dem Platzhalter {{footer}} Schaltflächen für Ihre Social-Media-Kanäle anzeigen. Weitere Informationen finden Sie unter Hinzufügen von Social-Media-Schaltflächen zu E-Mails.

Beispiel:

Zutaten

• URLs zu Social-Media-Symbolen für die Schaltflächen
• Links zu Ihren Social-Media-Konten

Rezept

1. Fügen Sie in einem HTML- oder Texteditor den folgenden Codeblock ein:

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

   Wie Sie einen Fußbereich mit Kontaktinformationen erstellen, erfahren Sie im Rezept: Fußbereich hinzufügen.

2. Fügen Sie Ihre Social-Media-Symbole vor dem ersten Absatz-Tag in den HTML-Code ein. Beispiel:

   <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. Ändern Sie für jeden Social-Media-Link die URL (href="...") und das Symbolbild (src="...").
4. Nehmen Sie die folgenden Änderungen vor, um die Symbole anzupassen:

   Änderung
   Größe der Symbole	Element: img > style > width Achten Sie darauf, dass alle Werte dieselbe Breite aufweisen. Beispiel: img style="width: 24px; ..."
   Abstände zwischen den Symbolen	Element: img > style > padding-right Ändern Sie für jeden Social-Media-Link mit Ausnahme des letzten den Wert des padding-right-Stils. Beispiel: img style="padding-right: 8px; ..."
   Abstand über und unter den Symbolen	Element: div > style > padding-top Erhöhen oder verringern Sie den padding-top-Wert, um den Abstand über dem jeweiligen Symbol anzupassen. Beispiel: div style="padding-top: 8px; ..." Element: div > style > padding-bottom Erhöhen oder verringern Sie den padding-bottom-Wert, um den Abstand unter dem jeweiligen Symbol anzupassen. Beispiel: div style="padding-bottom: 10px; ..."

5. Passen Sie je nach Bedarf weitere Werte an.
6. Speichern Sie die Datei zwischendurch immer wieder mit der Erweiterung „.html“ und überprüfen Sie Ihre Änderungen in einem Browser.
7. Überprüfen Sie den Fußbereich in einer E-Mail-Testvorlage, bevor Sie ihn in die E-Mail-Vorlage Ihres Kontos übernehmen.
8. Wenn alles bereit ist, fügen Sie den Codeblock an der folgenden Stelle in die HTML-Mailvorlage im Admin Center ein (Admin Center > Kanäle > E-Mail).

   

Rezept: E-Mail-Text anpassen

In diesem Rezept wird beschrieben, wie Sie den Text der E-Mail-Nachricht anpassen. Dabei ändern Sie die Schriftart, die Schriftgröße und den Abstand um den Text.

Die E-Mail besteht aus der Benachrichtigung und der E-Mail-Konversation. In der E-Mail-Vorlage wird der E-Mail-Text durch den Platzhalter {{content}} repräsentiert. Zendesk ersetzt den Platzhalter vor dem Versenden der E-Mail durch den HTML-Code. Beispiel:

Ein Teil des von Zendesk eingefügten HTML-Codes enthält Stile, die nicht geändert oder überschrieben werden können. Weitere Informationen finden Sie unter Einschränkungen beim Anpassen des E-Mail-Texts.

Rezept

1. Fügen Sie in einem HTML- oder Texteditor den Platzhalter {{content}} und sein übergeordnetes div-Tag ein. Beispiel:

   <div style="padding: 10px; line-height: 1.5; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;">
     {{content}}
   </div>

2. Nehmen Sie die folgenden Änderungen an den Stilen des übergeordneten div-Tags vor, um den E-Mail-Text anzupassen.

   Änderung
   Größe des Nachrichtentexts	Element: div > style > font-size Ändern Sie den font-size-Wert. Beachten Sie, dass die Textgröße des Benutzernamens und des Versanddatums der E-Mail dadurch nicht geändert werden. Beispiel: div style="font-size: 11px; ..."
   Schriftart für Text	Element: div > style > font-family Sie können bestimmte Änderungen an der Schriftart vornehmen. Verwenden Sie websichere Schriftarten wie Trebuchet MS, Verdana oder Georgia. Andere Schriftarten werden möglicherweise nicht von allen E-Mail-Programmen unterstützt. Beispiel: div style="font-family: 'Trebuchet MS', sans-serif; ..."
   Abstand um den E-Mail-Text	Element: div > style > padding Erhöhen oder verringern Sie den padding-Wert, um den Abstand um den E-Mail-Text anzupassen. Beispiel: div style="padding: 15px; ..." Wenn Sie den linken und rechten Abstand unabhängig vom oberen und unteren Abstand einstellen möchten (z. B. auf 25px), geben Sie zwei Werte für den padding-Stil ein. Der erste Wert gibt den oberen und unteren Abstand an, der zweite Wert den linken und rechten Abstand. Beispiel: div style="padding: 15px 25px; ..."

3. Fügen Sie je nach Bedarf zusätzliche Inline-Stile hinzu oder passen Sie weitere Werte an.

   Beachten Sie, dass bestimmte Eigenschaften des E-Mail-Texts nicht geändert werden können. Weitere Informationen finden Sie unter Einschränkungen beim Anpassen des E-Mail-Texts.

4. Speichern Sie die Datei zwischendurch immer wieder mit der Erweiterung „.html“ und überprüfen Sie Ihre Änderungen in einem Browser.
5. Überprüfen Sie die Änderungen in einer E-Mail-Testvorlage, bevor Sie sie in die E-Mail-Vorlage Ihres Kontos übernehmen.
6. Wenn alles bereit ist, fügen Sie den Codeblock an der folgenden Stelle in die HTML-Mailvorlage im Admin Center ein (Admin Center > Kanäle > E-Mail).

   

Einschränkungen beim Anpassen des E-Mail-Texts

Zendesk ersetzt den Platzhalter {{content}} beim Versenden der E-Mail durch eigenen HTML-Code. Allerdings enthält der vom System generierte HTML-Code Inline-Stile für bestimmte Elemente des E-Mail-Texts. Diese Stile sind nicht zugänglich und können nicht geändert werden. Sie können sie auch nicht durch Inline-Stile in der E-Mail-Vorlage überschreiben. Im CSS-Code haben die Inline-Stile untergeordneter Elemente Vorrang vor den Inline-Stilen übergeordneter Elemente wie div-Tags.

In diesem Abschnitt werden einige der Einschränkungen hinsichtlich der Anpassung von E-Mail-Text beschrieben, die Sie bei der Gestaltung Ihres E-Mail-Texts berücksichtigen sollten.

Textkörper

Die folgenden Stile für den Textkörper können nicht geändert werden:

• Schriftfarbe
• Zeilenhöhe
• Abstand um den Text

Diese Stile weisen folgende Einstellungen auf:

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

Name und Versanddatum

Die folgenden Stile für den Namen und das Versanddatum können nicht geändert werden:

• Schriftfarbe
• Schriftfamilie
• Schriftgröße
• Zeilenhöhe
• Abstand um den Text

Der Namenstext weist folgende Einstellungen auf:

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

Der Text für das Versanddatum weist folgende Einstellungen auf:

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

Änderungen testen

Sie können Ihre Änderungen mit der diesem Rezept beigefügten E-Mail-Testvorlage überprüfen.

Direkt an der E-Mail-Vorlage im Admin Center vorgenommene Änderungen treten sofort in Kraft. Deshalb sollten Sie Ihre Änderungen anhand der Testvorlage sorgfältig prüfen und testen, bevor Sie sie in die E-Mail-Vorlage Ihres Kontos übernehmen.

So testen Sie Ihre Änderungen

1. Laden Sie die unten angehängte E-Mail-Testvorlage test_email_template.html herunter und öffnen Sie sie in einem HTML- oder Texteditor.
2. Fügen Sie den Codeblock für Ihre Komponente an der angegebenen Stelle in die E-Mail-Testvorlage ein. Beispiel:

   <!-- Paste logo or company banner code block here -->

3. Öffnen Sie die Testvorlage in einem Browser und verringern Sie die Breite des Browserfensters, um eine E-Mail-Anwendung zu simulieren.
4. Passen Sie den Code in der Testvorlage an und aktualisieren Sie die Browserseite, um die Auswirkungen Ihrer Änderungen zu überprüfen.
5. Nehmen Sie Schritt für Schritt weitere Änderungen vor, bis Sie mit dem Design zufrieden sind.
6. Wenn alles bereit ist, fügen Sie den Codeblock für Ihre Komponente an derselben Stelle in die E-Mail-Vorlage im Admin Center ein (Admin Center > Kanäle > E-Mail).