Charles Nadeau

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:

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.

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:

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.

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

Zutaten

• URL der Bilddatei Ihres Firmenlogos

Rezept

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

   

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

   

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:

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

   

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

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

   

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

   

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