Open-Source-Transaktions-E-Mail-Vorlagen

Wenn Sie ein neues SendGrid-Konto einrichten, ist das Erstellen einer Reihe von E-Mail-Vorlagen für Ihr Konto eine der wichtigsten Aufgaben, die Sie erledigen müssen. Wenn Sie E-Mails über unsere API für Ihre App oder Ihren Dienst senden möchten, benötigen Sie höchstwahrscheinlich mehrere verschiedene Arten von E-Mail-Vorlagen. Einige der häufigsten sind Passwortzurücksetzungen, E-Mail-Bestätigungen und Quittungen.

Obwohl es im Internet eine große Auswahl an vorgefertigten E-Mail-Vorlagen gibt, ist es nicht immer einfach, ein Set zu finden, das sich leicht an Ihre Marke anpassen lässt.

Außerdem ist es wichtig, die Vorlagen gründlich in gängigen E-Mail-Clients zu testen. Dieser Vorgang kann zeitaufwändig sein und die Einrichtung Ihres SendGrid-Kontos und den Beginn des E-Mail-Versands verlangsamen.

Mir wurde klar, dass das Team von SendGrid unseren Kunden einen Mehrwert bieten konnte, indem es einen Open-Source-Satz von E-Mail-Vorlagen erstellte, die Benutzer nutzen konnten, um diese häufigen Anwendungsfälle abzudecken. Die Vorlagen sind nicht nur einfach anzupassen, sondern Sie können auch schnell loslegen!

Unser Vorlagensatz, den wir „Einfügen“ nennen, deckt 5 Anwendungsfälle ab:

• Kennwort wird zurückgesetzt
• Email Bestätigung
• Willkommensbriefe
• Quittungen
• Digests (täglich, wöchentlich oder monatlich)

Laden Sie die Vorlagen auf GitHub herunter

Um mit unseren Einfügevorlagen zu beginnen, gehen Sie zu GitHub und klonen Sie das Repository oder laden Sie den Ordner Einfügevorlagen herunter. Erwähnenswert ist auch, dass sich diese Vorlagen in einem Open-Source-Repository mit E-Mail-Vorlagen befinden, zu denen andere SendGrid-Benutzer während unseres letzten Hacktoberfests beigetragen haben.

Anpassen der Einfügevorlagen

Sobald Sie eine lokale Kopie der Einfügevorlagen haben, öffnen Sie sie in Ihrem bevorzugten Code-Editor (ich würde VSCode oder Atom empfehlen; beide sind kostenlos).

Ich würde empfehlen, mit base.html zu beginnen, da es die meisten wiederverwendbaren Komponenten enthält, die in vielen anderen Vorlagen zu finden sind. Diese Vorlagen haben alle eine gemeinsame Struktur für den HTML-Code, und obwohl das Dokument einige grundlegende Stile enthält, befindet sich die Mehrheit der Stile inline.

Wenn Sie den HTML-Code durchkämmen, werden Sie viele HTML-Kommentare bemerken, die angeben, wo Blöcke beginnen und enden. Dies sind wichtige Hinweise, die Ihnen beim Durchsuchen der Vorlagen und beim Beginnen ihrer Änderung helfen werden.

Sie werden auch Stile auf HTML-Elementen für Hintergrundfarben, Typografie, Abstände usw. bemerken. Ich möchte Sie ermutigen, damit zu experimentieren, um ein Gefühl dafür zu bekommen, wie sie das Erscheinungsbild dieser Vorlagen verändern.

Fügen Sie Ihr Logo zu den Vorlagen hinzu

Eines der ersten Dinge, die Sie tun sollten, ist, das Logo zum Einfügen von Vorlagen durch Ihr eigenes zu ersetzen. Sie können den Logo-Block schnell finden, indem Sie nach seinem HTML-Kommentar suchen, der seinen Startpunkt angibt:

Suchen Sie in diesem Block nach dem Anchor-Tag (<a> ) und ändern Sie HREF in Ihre URL. Die Vorlage sollte standardmäßig mit der Startseite von SendGrid verknüpft sein.

Lassen Sie uns nach dem Anpassen der URL das Einfügen-Logo durch Ihr eigenes ersetzen. Ich würde empfehlen, Ihr Logo an einem Ort zu speichern, auf den Sie leicht verlinken können, z. B. auf Ihrem Webserver oder einem CDN. Nachdem Sie die Logo-Quelle ersetzt haben, passen Sie die Inline-Stile so an, dass die Breite/Höhe korrekt ist – dies hängt vom Seitenverhältnis Ihres Logos ab. Standardmäßig ist das Einfügen-Logo 48 Pixel groß, also haben wir Breitenstile auf 48 Pixel eingestellt.

Beispiel:

In diesem Beispiel wird auf die URL zum Einfügen des Logos zusammen mit einigen Breitenstilen verwiesen, um sie auf die gewünschte Größe von 48 Pixel einzustellen. Passen Sie diese Werte für Ihr eigenes Logo an, um sicherzustellen, dass es scharf aussieht.

Hintergrundfarben anpassen

Wie oben erwähnt, wird die Hintergrundfarbe auf einer Vielzahl von Blöcken festgelegt, um den Standardstil der Einfügevorlagen festzulegen (Grau und Weiß). Sie können dies leicht ändern (und Sie sollten es tun), um es an Ihre Markenfarben anzupassen.

Der einfachste Weg, zwischen diesen Stilen zu wechseln, besteht darin, Ihren Editor zu verwenden, um nach den Inline-Stilen, bgcolor und Hintergrundfarbe zu suchen. Der Wert dieser Eigenschaften kann durch Hex-Werte (z. B. #000000) oder Farbnamen (z. B. Schwarz) ersetzt werden. Während Sie diese Änderungen durcharbeiten, ist es einfach, die Dinge im Auge zu behalten, wenn Sie eine der Vorlagen in Ihrem bevorzugten Browser öffnen und aktualisieren, während Sie Änderungen vornehmen.

Beispiel:

In diesem Beispiel ist das Body-Tag mit einer hellgrauen Hintergrundfarbe gestaltet. Dieser Farbwert und andere in der Vorlage sollten an Ihre Marke angepasst werden.

Anpassen von Schaltflächen

Schaltflächen sind eine der häufigsten Schnittstellenkomponenten in E-Mail-Vorlagen. Sie verwenden diese als Handlungsaufforderung und heben die wichtigste Aktion hervor, die ein Benutzer ausführen soll, z. B. das Bestätigen seiner E-Mail-Adresse.

Standardmäßig sind die Schaltflächen von Paste als blaue Blöcke mit einem subtilen Randradius zum Abrunden der Ecken gestaltet. Das Anpassen dieser Schaltflächen an Ihre Marke ähnelt den Änderungen, die wir bereits an der Hintergrundfarbe unserer Vorlage vorgenommen haben. Suchen Sie mithilfe des HTML-Kommentars, den wir für Sie hinzugefügt haben, nach dem Block:

Wir haben mehrere Tabellenzellen mit weißem Hintergrund (#ffffff), um den Block um die Schaltfläche herum zu erstellen, aber Sie sollten die Tabellenzelle mit den folgenden Stilen unten finden.

Beispiel:

In diesem Beispiel hat <td> eine bgcolor, die verwendet wird, um die Farbe der Schaltfläche festzulegen, zusammen mit einem Rahmenradius, um die Ecken subtil abzurunden. Experimentieren Sie mit diesen Stilen, um ein einzigartiges Aussehen für Ihre Schaltflächen zu erzielen, das zu Ihrer Marke passt.

Der zweite Teil unserer Schaltfläche ist der Anker (<a> ) innerhalb der oben gezeigten Tabellenzelle.

Dieser Anker steuert die URL, wohin Ihre Schaltfläche führt, wenn sie angeklickt wird, aber auch die Textstile für das Label. Sie können die Stile anpassen, um das Etikett basierend auf Ihren Vorlieben und dem, was zu Ihrer Marke passt, anzupassen.

Typografie anpassen

Standardmäßig werden die Einfügevorlagen über Google Fonts im Webfont Source Sans Pro geladen. Sie können eine andere Webfont aus der Google-Sammlung verwenden oder den Standardsatz von Schriftarten verwenden, die heutzutage auf den meisten Computern zu finden sind (Arial, Georgia, Times usw.).

Wenn Sie vorhaben, eine andere Webschriftart zu verwenden, finden Sie einige hilfreiche Hinweise in meinem Post mit Tipps und Tricks zur E-Mail-Entwicklung. Stellen Sie sicher, dass Sie den HTML-Code nach Inline-Stilen durchkämmen, die auf die Schriftfamilie verweisen, und passen Sie sie entsprechend Ihren Vorlieben an.

Beispiel:

In diesem Beispiel hat <td> einen Schriftfamilienstil, der Source Sans Pro verwendet, mit einigen Rückgriffen auf Standardschriften, falls der Webfont nicht geladen wird.

Gedanken beenden

Ich hoffe, dass diese Hinweise Ihnen helfen, diese Vorlagen an Ihre Marke anzupassen und Sie auf der Plattform von SendGrid zum Laufen zu bringen. In Zukunft hoffe ich, unser E-Mail-Vorlagen-Repository um weitere Vorlagen zu erweitern, aber auch um ein Build-Tool, das den Anpassungsprozess viel schneller machen wird.

Wenn Sie unterwegs auf Probleme stoßen, reichen Sie bitte ein Problem für das GitHub-Repo ein, und wenn Sie etwas beitragen möchten, reichen Sie bitte eine Pull-Anfrage ein. Suchen Sie nach weiteren Vorlagen zum Experimentieren? Probieren Sie die kostenlosen responsiven HTML-E-Mail-Vorlagen von SendGrid aus.