August 16, 2022

E-Mail Layout: So erstellst du die perfekte E-Mail-Vorlage

Reading time about 12 min
email layout

Eine E-Mail zu schreiben ist nicht schwer. Damit sie im wahrsten Sinne des Wortes gut bei deinen Empfänger:innen ankommt, solltest du jedoch einige Dinge beachten – zum Beispiel auf ein durchdachtes E-Mail Layout.

In diesem Artikel zeigen wir dir, welche Bausteine dein E-Mail Layout unbedingt aufweisen sollte und wie du dieses kinderleicht in deine eigene E-Mail-Vorlage integrierst.


E-Mail Layout erstellen: Diese Möglichkeiten gibt es

Wenn du E-Mail Newsletter, Transaktions-Mails und Co. versenden möchtest, führt kein Weg an einer professionellen E-Mail Marketing Software vorbei. Zwar ist es theoretisch möglich, Massen-Mails mit kostenlosen E-Mail Clients wie Mozilla Thunderbird oder Microsoft Outlook zu verschicken. Praktisch gesehen solltest du jedoch lieber darauf verzichten, denn Serien-Mails, die über solche Programme verschickt werden, landen oft im Spam-Ordner der Empfänger:innen und bieten dir außerdem nur sehr eingeschränkte Gestaltungsmöglichkeiten.

Wenn du dich für eine Newsletter Software entscheidest, hast du bei der Gestaltung deines E-Mail Layouts folgende Möglichkeiten:

Mailchimp, HubSpot und Co.: Welches E-Mail Marketing Tool passt zu dir? In unserem Software-Vergleich findest du es heraus.

HTML

Das HTML-Format ist die Grundlage für ansprechende Newsletter. Wenn du Programmierkenntnisse hast und deine eigene HTML E-Mail programmieren möchtest, kannst du das mit den meisten Newsletter Tools tun. Doch selbst, wenn du mit Technik nichts am Hut hast, musst du nicht auf ansprechende E-Mails verzichten.

Viele Softwares bieten dir Drag&Drop Editors, mit denen du einzelne Elemente wie Textbausteine, Bilder und Buttons einfach in deiner E-Mail platzieren und nach deinen Wünschen anpassen kannst.

Erfahre, wie du deine eigene HTML-E-Mail-Vorlage erstellst.

Templates

Du willst es noch einfacher haben? Kein Problem! Mit E-Mail-Vorlagen, auch E-Mail Templates genannt, kannst du einfach vorgefertigte E-Mails auswählen, deren Design dir zusagt, und diese dann nach deinem Geschmack individualisieren. Bei Brevo findest du über 40 solcher Vorlagen für Marketing, E-Commerce und Co.

Auch im Internet findest du viele kostenlose E-Mail Templates, die du herunterladen und – sofern es ein passendes Plugin für deine E-Mail Marketing Software gibt – deinem Newsletter Tool hinzufügen kannst.

Du kannst natürlich auch zuerst deine eigene E-Mail-Vorlage erstellen und diese dann in deiner Vorlagengalerie speichern, um sie für zukünftige Kampagnen zu nutzen. Wie das mit Brevo geht, erklären wir dir gleich.

Die 5 Hauptbestandteile eines gelungenen E-Mail Layouts

Egal, ob du dich für eine eigens designte Mail oder ein vorgefertigtes E-Mail Template entscheidest – im Kern sind alle E-Mails gleich, oder sollten es zumindest sein. Denn nur, wenn deine E-Mail gut strukturiert ist und alle wichtigen Bausteine enthält, werden deine Empfänger:innen sie auch öffnen und lesen. Folgende 5 Hauptbestandteile sollte jede Mail enthalten:

Betreff

Die Betreffzeile deiner E-Mail kann darüber entscheiden, ob deine Empfänger:innen diese öffnen oder direkt in den Papierkorb verschieben. Dementsprechend sollte schon der Newsletter-Betreff dazu animieren, auf die Mail zu klicken. Dabei lautet die Devise: Mach bereits im Betreff deutlich, worum es in der Mail geht und warum es sich für deine Empfänger:innen lohnt, diese zu öffnen. Enthält dein Newsletter beispielsweise einen Rabattcode, solltest du das bereits in der Betreffzeile erwähnen.

Auch Emojis und eine persönliche Ansprache können deine Öffnungsraten erhöhen.

Preheader

Der Preheader ist ein kurzer Text, der von vielen E-Mail Clients neben dem Betreff angezeigt wird. Oft wird er automatisch aus den ersten Zeilen deines Newsletter generiert. Die meisten E-Mail Softwares erlauben es dir jedoch, einen individuellen Preheader zu formulieren. Nutze diese Funktion, um deine Betreffzeile zu ergänzen und einmal mehr das Interesse deiner Empfänger:inn zu wecken. 

Kopfzeile

Jedes gute E-Mail Layout hat eine Kopfzeile, in der du Firmenlogo, Titelbild, Überschrift und einen Link zur Browser-Ansicht einbettest. Dies ist das erste, was Empfänger:innen zu Gesicht bekommen, wenn sie deine E-Mail öffnen. Deine Kernbotschaft sollte deshalb hier bereits klar werden. Folgende Elemente sollte die Kopfzeile deiner E-Mail enthalten:

  • Firmenlogo: Das Einbetten deines Logos schafft Vertrauen. Am besten hinterlegst du hier auch einen Link zu deiner Website, damit deine Leser:innen nicht erst bis ins Impressum scrollen müssen.
  • Bild: Das Titelbild sollte den Leser:innen ins Auge springen und das Thema der E-Mail unterstreichen. Es eignet sich außerdem sehr gut dafür, die wichtigsten Infos aus dem Newsletter aufzugreifen. Kündigst du in deiner Mail einen Sale an? Dann könntest du beispielsweise den Schriftzug „Sale – bis zu 50% Rabatt” in deinem Titelbild platzieren.  

Tipp: Anstelle eines Titelbilds kannst du auch ein animiertes GIF verwenden.

  • Überschrift: Die Überschrift sollte Lust darauf machen, weiter zu scrollen und den Rest deiner Mail zu lesen. Auch daraus sollte die Kernbotschaft deines Newsletters deutlich hervorgehen.
  • Link zur Browser-Ansicht: Gelegentlich kann es vorkommen, dass HTML Newsletter von bestimmten E-Mail Clients nicht richtig angezeigt werden. Dann kann ein Link zur Web-Ansicht sinnvoll sein. Diesen integrierst du am besten in die Kopfzeile deines Newsletters.

Im E-Mail Marketing gilt: Wichtige Informationen gehören „above the fold”. Sie sollten also auf den ersten Blick und ohne weiteres Scrollen sichtbar sein.

Hauptteil

Auch der Hauptteil ist für das perfekte E-Mail Layout unverzichtbar. Er beginnt mit einer Begrüßung – diese sollte unbedingt personalisiert sein. Schreib also „Liebe Frau X” oder „Hallo Max” und verzichte auf anonyme Ansprachen wie „Liebe Leser:innen”. 

Anschließend solltest du erwähnen, warum du die Mail verschickt hast. Komm dabei schnell auf den Punkt, um deine Leser:innen nicht direkt nach dem Öffnen wieder zu verlieren.

Ansonsten sind deiner Kreativität im Hauptteil keine Grenzen gesetzt. Wie viele Textbausteine, Bilder, GIFs und Spalten du hier verwendest, bleibt ganz dir überlassen. Achte jedoch darauf, dass du deine Empfänger:innen visuell wie inhaltlich nicht überforderst. Wenn du viele gute Content-Ideen hast, heb dir einige davon lieber für dein nächstes Mailing auf, anstatt zu versuchen, alle auf einmal unterzubringen!

Tipp: Mit einer E-Mail Marketing Software mit integrierten Automatisierungsfunktionen ist die Newsletter-Personalisierung kinderleicht.

Fußzeile

Die Fußzeile ist nicht so wichtig, weil sie sowieso von kaum jemandem gelesen wird? Falsch! Auch ein Footer darf in deinem E-Mail Layout nicht fehlen. Dort hinein gehören unter anderem folgende Angaben:

  • Impressum: Beim Versand von geschäftlichen E-Mails bist du gesetzlich dazu verpflichtet, ein Impressum anzugeben. In das Impressum gehören Angaben wie der Name des Unternehmens, Post- und E-Mail-Adresse, Umsatzsteuer-ID und mehr. Eine komplette Liste aller Pflichtangaben findest du hier.
  • Abmeldelink: Auch diese Angabe ist rechtlich gesehen ein Muss. Laut DSGVO muss es Newsletter-Abonnent:innen jederzeit möglich sein, sich von einem Mailing abzumelden. Das sogenannte Simplizitätsgebot schreibt außerdem vor, dass dies genauso einfach gehen muss wie die Newsletter-Anmeldung. Mit einem Abmeldelink im Footer bist du rechtlich auf der sicheren Seite.

Vergiss nicht, auch dein Newsletter-Anmeldeformular DSGVO-konform zu gestalten.

Natürlich kannst du auch noch weitere Informationen in deinen E-Mail Footer aufnehmen, wenn du der Meinung bist, diese stellen einen Mehrwert für deine Leser:innen da. Viele Unternehmen verlinken in der Fußzeile beispielsweise auf ihre Social Media Kanäle oder eigene Apps.

E-Mail-Vorlagen erstellen mit Brevo: So geht’s

Du hast das perfekte E-Mail Layout erstellt und willst dieses als Grundlage für künftige E-Mail-Kampagnen verwenden? Nichts leichter als das! Mit Brevo erstellst du ganz leicht neue E-Mail-Vorlagen. Wir zeigen dir Schritt für Schritt, wie es geht. 

Schritt #1:

Logge dich in deinen Brevo Account ein und navigiere zur Kategorie „Vorlagen” in der linken Spalte. Klicke anschließend oben rechts auf „Neue Vorlage”, um ein neues E-Mail Template zu erstellen.

Schritt #2: 

Fülle alle erforderlichen Informationen aus, darunter den Namen der Vorlage und die Betreffzeile. Klicke anschließend auf „Nächster Schritt”.

Schritt #3:

Nun liegt es an dir: Gestalte deine eigene E-Mail Vorlage mit dem Drag&Drop Editor, programmiere eigene HTML E-Mail Templates oder wähle eine Vorlage aus unserer Vorlagengalerie aus. 

Schritt #4:

Wenn du mit dem Inhalt deiner E-Mail zufrieden bist, musst du nur noch auf „Speichern & Verlassen” und im nächsten Schritt auf „Speichern & Aktivieren“ klicken, und schon wird die E-Mail-Vorlage deiner Bibliothek hinzugefügt. Wenn du das nächste Mal einen Newsletter erstellst, kannst du deine Vorlage im Bereich „Meine Templates” ganz einfach auswählen.

Nützliche E-Mail-Vorlagen für verschiedene Szenarien findest du in diesem Artikel.

6 Tipps für das perfekte E-Mail Layout

Du hast alle Hauptbestandteile eingebaut, möchtest aber noch mehr aus deinem E-Mail Layout herausholen? Unsere 6 Tipps helfen dir dabei.

1. Bilder

Wie bereits erwähnt, sind Bilder in Marketing E-Mails prinzipiell immer eine gute Idee. Jedoch solltest du einige Dinge beachten, wenn du deiner E-Mail-Vorlage Bilddateien hinzufügen möchtest. Zum einen sollten deine Fotos kleiner als 1 MB sein und die Bildbreite sollte maximal 600px betragen. Ansonsten kann es passieren, dass deine Mail nur sehr langsam geladen oder von E-Mail Clients als Spam markiert wird.

Außerdem sollten die wichtigste Infos deiner Mail auch ohne Bild zu erfassen sein, denn manche E-Mail-Programme stellen Bilder nicht richtig dar oder laden diese gar nicht erst. Wenn du also Schriftzüge in deinem Titelbild platziert hast, solltest du dafür sorgen, dass sich die dort enthaltenen Informationen auch im Fließtext wiederfinden. Zusätzlich kannst du dem Alt-Text deines Bildes eine Beschreibung hinzufügen.

Zu guter Letzt solltest du darauf achten, dass deine Bilder auch auf Smartphones richtig angezeigt werden – Stichwort: Responsives Design. Was es damit auf sich hat, erklären wir im nächsten Abschnitt. Dass deine Bilder eine hohe Auflösung haben sollten, versteht sich von selbst.

2. Responsive Design

Ein responsiver Newsletter ist so programmiert, dass er auf jedem Endgerät richtig dargestellt wird – auf dem Desktop genauso wie auf mobilen Geräten, z.B. Smartphones und Tablets. Warum das wichtig ist? Weil verschiedene Endgeräte verschiedene Bildschirmgrößen haben.

Verwendest du keine responsiven E-Mail Templates, kann es passieren, dass dein Newsletter-Inhalt auf manchen Geräten schlecht lesbar ist und ein Teil deines E-Mail Layouts abgeschnitten wird.

Doch keine Sorge: Die meisten Newsletter Templates professioneller E-Mail Marketing Softwares, darunter auch Brevo, sind standardmäßig responsiv.

3. GIFs statt Videos

Wie bereits erwähnt, können GIFs eine Mail visuell bereichern und gelegentlich anstelle eines statischen Titelbilds eingesetzt werden. Die animierten Grafiken nehmen, was die Dateigröße angeht, weniger Platz ein als Videos und eignen sich gut als Eyecatcher. Achte jedoch darauf, dass sich das GIF nicht zu schnell bewegt und du nicht zu viele GIFs in eine Mail einbaust – ansonsten irritiert es deine Leser:innen womöglich.

4. CTA

Wenn du E-Mails verschickst, dann hast du wahrscheinlich immer ein konkretes Ziel vor Augen. Das könnte zum Beispiel darin bestehen, dass deine Empfänger:innen deinen Online Shop besuchen, sich für ein Event anmelden oder eine Datei downloaden sollen. Damit sie das auch tun, bettest du am besten eine Handlungsaufforderung in Form eines CTAs (Call to Action) ein. Denn das beste E-Mail Layout bringt dir nichts, wenn deine Abonnent:innen nicht mit deinen Mailings interagieren.

Ein CTA sticht besonders hervor, wenn du ihn relativ weit am Anfang und in Form eines Buttons in dein E-Mail Template einbaust. Dieser Button sollte sich farblich vom restlichen Text deiner Mail abheben. Außerdem kommen konkrete Aufforderungen wie zum Beispiel „Artikel lesen” oder „Jetzt Whitepaper herunterladen” in der Regel besser an als ein einfaches „Hier klicken”.

5. Text 

Wenn es um den Text in deiner E-Mail geht, sollte dieser vor allem eins sein: gut lesbar. Das gilt sowohl für den Inhalt, als auch für das Äußere. Wähle besser keine Schriftgröße unter 14px und sei mit fettgedruckten, kursiven oder anderweitig hervorgehoben Worten sparsam. 

Außerdem sollten sowohl dein Schreibstil als auch deine Schriftart „on brand” sein, also mit deinem restlichen Markenauftritt übereinstimmen.

6. E-Mail Design

Last but not least solltest du im Rahmen deines E-Mail Layouts auch das Design beachten. Generell empfehlen wir, deine Unternehmensfarben zu verwenden. Denn diese haben einen Wiedererkennungswert – und das schafft Vertrauen bei deinen Empfänger:innen.

Solltest du saisonale Mailings verschicken, kannst du deine Farbauswahl allerdings auch einmal ändern. Für Weihnachts-Newsletter sind beispielsweise Farben wie Rot, Grün und Gold beliebt, während sich im Frühling Pastelltöne und im Sommer knallige Farben anbieten.

Aber Achtung: Treib es nicht zu bunt! Die Farben, die du verwendest, sollten immer zueinander passen und deine Leser:innen visuell nicht überfordern. Manchmal ist weniger eben mehr – achte deshalb auch darauf, nicht zu viele verschiedene Farben miteinander zu kombinieren.

Tipp: Ein gutes Newsletter Design lädt zum Weiterscrollen ein und macht Lust auf mehr.

Fazit: E-Mail Layout erstellen leicht gemacht

Ein gutes E-Mail Layout besteht neben Betreff und Preheader aus einer Kopfzeile, einem Hauptteil und einer Fußzeile. Hast du diese Bausteine in eine E-Mail-Vorlage eingebaut, gilt es, sie mit Leben zu füllen. Dabei solltest du den Zweck deiner E-Mail-Marketing-Kampagne, deine Corporate Identity und deine Zielgruppe immer im Hinterkopf behalten.

Hast du einmal ein E-Mail Layout gefunden, mit dem du zufrieden bist, kannst du dieses immer wieder als Vorlage verwenden. Am einfachsten geht das, indem du ein E-Mail Template mit einer E-Mail Marketing Software deiner Wahl erstellst und dieses für zukünftige E-Mail-Kampagnen abspeicherst.

Mit Brevo geht das ganz einfach und völlig kostenlos. Probiere es direkt aus und gestalte noch heute das perfekte E-Mail Layout!

Der Newsletter für Marketing Fans
Jetzt anmelden und monatlich die besten Tipps und Tricks für erfolgreiches Online Marketing erhalten.
* Die Abmeldung vom Newsletter ist jederzeit möglich.

Ready to grow with Brevo?

Get the tools you need to reach your customers and grow your business.

Sign up free