So erstellen und senden Sie eine benutzerdefinierte HTML-E-Mail

Eine interaktive HTML-E-Mail ist ein mächtiges Werkzeug. Unternehmen können sie für Werbeaktionen verwenden, Freiberufler können sie verwenden, um ihre Dienstleistungen anzubieten potenzielle Kunden und Enkelkinder können ihren Großeltern mit einem süßen Brauch ein Lächeln ins Gesicht zaubern Entwurf. Die einzigen beiden Technologien, die Sie benötigen, um eine benutzerdefinierte E-Mail von Grund auf neu zu erstellen, sind HTML und Inline-CSS. Alles, was Sie tun müssen, ist, sich ein Design zu überlegen, es in Form von Tabellenzeilen und -spalten zu analysieren, und schon können Sie mit dem Erstellen beginnen. In diesem Artikel erfahren Sie Schritt für Schritt, wie Sie eine benutzerdefinierte HTML-E-Mail erstellen und senden.

Erstellen Sie die E-Mail-Vorlage mit HTML

Die E-Mail-Vorlage basiert auf traditionellen HTML-Techniken. Sie arbeiten mit Tabellen und stapeln Tabellenzeilen und Tabellendaten die ganze Zeit. Die grundlegende HTML-E-Mail-Vorlage sieht so aus:

...
...
...
...
...
...
...




...

Ausgabe:

Es wäre am besten, ein Design vorzubereiten, damit Sie planen können, wo und wie Sie das Design aufteilen werden. Darüber hinaus werden Sie mental darauf vorbereitet, daraus eine Tabellenstruktur zu entwerfen.

Hier beginnen Sie mit dem DOCTYPE für das Dokument. Als Nächstes legen Sie den Zeichensatz, den Inhaltstyp, die Meta-Tags und den Titel im fest Schild. Der wesentliche Teil beginnt mit dem markiere, wo du ein Elternteil platzierst und füge mehrere Tabellenzeilen hinzu im Inneren. Nachdem Sie den Inhalt in eine angemessene Anzahl von Zeilen unterteilt haben, ist es an der Zeit, die Tabellendaten einzugeben In ihnen.

Wie gesagt, Sie müssen nur mit Tabellen arbeiten. Für die Eingabe verschiedener Daten innerhalb der Tag müssen Sie einer definierten Route folgen. Erstellen wir zum Beispiel eine E-Mail-Vorlage mit einem Logo und einem Datum in a Schild.

 Logo und Datum im 
-Tag 

















05. Dez. 2021

Jetzt wissen Sie, wie Sie HTML-Tags platzieren und eine gute Struktur für Ihre E-Mail-Vorlage erstellen. Gehen wir weiter, um das E-Mail-Styling besser zu verstehen.

Gestalten Sie Ihre HTML-E-Mail

Das Gestalten einer HTML-E-Mail ist eine mühsame Aufgabe, da Sie nur Inline-CSS verwenden können. Außerdem müssen Sie das Styling für jedes Element wiederholen, wenn es ein ähnliches Styling besitzt. Wenn Sie mit Cascading Style Sheets nicht vertraut sind, erkunden Sie Erste Schritte mit CSS.

Vorschau:

 05. Dez. 2021 






































Hallo John Doe



Vielen Dank für Ihren Besuch auf unserer Seite. Wir hoffen, Sie haben heute etwas Neues gelernt.





 Ihre Meinung ist uns wichtig! 

 Bewerten Sie hier unsere Artikel. 


012345678910

Ausgabe:

Wenn du möchtest, kannst du greifen Sie auf den vollständigen Code auf GitHub zu und klonen Sie das Repository, um es zu verwenden.

Senden der Mail

Kopieren Sie nun den gesamten Code von GitHub und fügen Sie ihn ein. Wenn Sie VS Code verwenden, öffnen Sie die HTML-Datei mit der Live-Server-Erweiterung und kopieren Sie den Inhalt, indem Sie auf klicken Strg + A>Strg + C. Öffnen Sie Gmail und verfassen Sie eine neue E-Mail. Fügen Sie den Inhalt ein und geben Sie die E-Mail-ID des Empfängers ein. Senden Sie die E-Mail und Sie erhalten die Ergebnisse wie unten gezeigt:

Testen Sie den Code auf verschiedenen Geräten, um zu sehen, wie er aussieht und sich verhält. Passen Sie Ihre HTML-E-Mail an und machen Sie sie sauber, einfach und reaktionsschnell.

Bestehende E-Mail-Vorlagen ändern

Das Erstellen einer HTML-E-Mail von Grund auf erfordert einen soliden Umgang mit HTML und Inline-CSS. Sie können auch eine vorhandene E-Mail-Vorlage ändern und an Ihre Bedürfnisse anpassen. Beachten Sie, dass das Laden von HTML-E-Mails in der Regel einige Sekunden dauert. Planen, entwerfen, codieren und führen Sie gründliche Tests durch, um Inkonsistenzen beim Endbenutzer zu vermeiden. Sie können mehr über semantisches HTML und CSS erfahren, um besseren und zugänglicheren Code zu schreiben.

Naincy Moury (17 Artikel veröffentlicht)

Naincy ist spezialisiert auf die Erstellung von Websites mit hoher Reaktionsfähigkeit und einer effizienten Inhaltsstrategie sowie auf Webkopien. Sie ist freiberufliche Tech-Autorin, die Trendtechnologien genau im Auge behält.

Mehr von Naincy Mourya