HiveGrid-Marketing/E-Mails

E-Mails: Mediakit und fertige Mails zum Webinar am 8. Dezember

Stand: 12.11.2026. Für Philipp, zum Bauen in Mailjet. Die Texte kommen aus Noahs PDF (../webinar/mail-strecke/Texte-Noah-Stand-2026-11-04.pdf), die Bilder von hier. Der Look stammt aus dem Heft „Jede Frage lief über meinen Tisch“ und den Brand Guidelines. Den Aufbau haben wir uns bei Webinar- und Gründer-Mails auf reallygoodemails.com abgeschaut.

Am schnellsten anschauen: Mediakit.pdf öffnen. Dort stehen alle Farben, Bausteine, Bilder und jede fertige Mail auf einen Blick.

---

Was hier liegt

Ordner oder Datei	Was	Wofür
Mediakit.pdf	Übersicht zum Durchblättern	zuerst lesen
mails/*.html	jede Mail fertig gebaut, mit Text, Bildern, Buttons	als Vorlage zum Nachbauen und zum Öffnen im Browser
mails/vorschau/*.png	jede Mail als Bild	schneller Blick, wie es aussehen soll
bilder/banner/	14 Banner für die Mails in Mailjet	in Mailjet hochladen
bilder/webinargeek/	4 Banner für B0 bis B3	für Dejan in WebinarGeek
bilder/logo-hivegrid.png, signatur-noah.png, heft-klein.png	Logo, Signatur mit Foto, Heft-Bild	in jede Mail
bilder/logo-hivegrid-transparent.png	Logo ohne Hintergrund	für Kopfbereiche in anderer Farbe
mailjet-import/*.zip	jede Mailjet-Mail als ZIP mit HTML und Bildern	schnellster Weg, direkt in Mailjet importieren
quelle/	Werkzeug, aus dem die Bilder und Vorschauen entstehen	nur zum neu Erzeugen, siehe unten

---

So gehst du in Mailjet vor

Am schnellsten: als ZIP importieren

Jede Mail ist fertig gepackt, mit Text, Bildern und Buttons. Mailjet lädt die Bilder beim Import selbst hoch.

1. In Mailjet unter Meine Marketing-Vorlagen auf Neue Vorlage erstellen, dann Mit HTML programmieren und die ZIP-Datei hochladen. Die Vorlage bekommt denselben Namen wie die Datei, z. B. „Webinar 8.12. · 03 Jedes Programm war eine Insel“.
2. In der Vorlage „[Vorname]“ durch die Personalisierung ersetzen (Eigenschaft anrede, siehe Platzhalter).
3. {{HARIS_LINK}} in B4 bis B6 durch den Buchungslink ersetzen. Heft-Link (hivegrid.de/ebook), Anmelde-Link (webinar.hivegrid.de) und Abmelde-Link ([[UNSUB_LINK_EN_US]]) sind schon drin.
4. Vorlage speichern und daraus die Kampagne anlegen. Betreff und Vorschautext stehen oben in der Datei und im PDF.
5. Testmail schicken und prüfen, dass Mailjet nichts verschoben hat.

Die 14 Vorlagen, nummeriert in der Reihenfolge des Versands:

ZIP und Vorlage „Webinar 8.12. · …“	Mail	An	Versand
01 Ich war nicht der Chef	K1	Verteiler	Di 17.11., 7:00
02 Jede Frage lief über meinen Tisch	K2	Verteiler	Do 19.11., 7:00
03 Jedes Programm war eine Insel	K3	Verteiler	Di 24.11., 7:00
04 Eine Anfrage, dreimal getippt	K4	Verteiler	Do 26.11., 7:00
05 In zehn Tagen	K7	Verteiler	Sa 28.11., 8:00
06 Lebenslauf einer Wärmepumpe	K8	Verteiler	Di 01.12., 7:00
07 Klingt gut, oder	K9	Verteiler	Do 03.12., 7:00
08 Trotzdem lief alles über meinen Tisch	K10	Verteiler	Sa 05.12., 8:00
09 Morgen Abend, 18 Uhr	K11	Segment „noch nicht angemeldet“	Mo 07.12., 7:00
10 Danke für gestern Abend (teilgenommen)	B4a	Segment „teilgenommen“	Mi 09.12., 9:00
11 Wir haben ohne dich angefangen (nicht erschienen)	B4b	Segment „nicht erschienen“	Mi 09.12., 9:00
12 Deine drei Zahlen (Reserve)	B4c	nur wenn Teilnahmedaten fehlen	–
13 Du hast zwei Wege	B5	Angemeldet	Fr 11.12., 9:00
14 Letzte Mail vor Weihnachten	B6	Angemeldet	Di 15.12., 9:00

Mailjet sagt dazu selbst, dass es eigenes HTML nicht prüft. Deshalb ist die Testmail Pflicht. Ändert sich eine Mail in mails/, die ZIPs neu packen mit python3 quelle/pakete.py.

Oder im Drag-and-drop-Editor nachbauen

1. Bilder hochladen: alles aus bilder/banner/, dazu Logo, Signatur und Heft-Bild.
2. Einmal die Vorlage bauen, nach mails/k03.html (das ist die Muster-Mail). Die Werte stehen unten unter „Gestaltung“. Als Vorlage speichern.
3. Für jede Mail die Vorlage kopieren:
   1. das Banner tauschen und den Alt-Text eintragen
   2. die Texte aus dem PDF einsetzen
   3. die Buttons an die Stellen der Platzhalter setzen
   4. Bausteine weglassen, die die Mail nicht hat (Tabelle „Welche Mail hat was“)
   5. Die fertige Fassung in mails/ zeigt immer, wie es aussehen soll.
4. Platzhalter ersetzen, siehe unten.
5. Testen und einplanen, wie in der Planung (../webinar/mail-strecke/README.md, Schritt 5).

Eigene Bilder in den Editor: Den Baustein Bild in die Spalte ziehen, dann Bild aus Galerie einfügen und über Hochladen die Datei von hier wählen. Danach unter Bearbeiten Breite und Alt-Text setzen. Mailjet nimmt Bilder bis 2 MB, empfiehlt unter 200 KB. Alle Bilder hier liegen darunter.

---

Gestaltung: Werte zum Eintragen

Schriften: In den Mails selbst stehen nur Georgia (Text) und Arial (Buttons, kleine Beschriftungen). Die Heft-Schriften Manrope, Literata und Caveat zeigen viele Mailprogramme nicht an, deshalb stecken sie nur in den Bildern. Georgia kommt Literata aus dem Heft am nächsten.

Element	Einstellung
Grund außen	#F4F3EF
Karte (Inhalt)	#FFFFFF, 600 px breit, Rand 1 px #E4E1D8, Ecken 14 px (wenn Mailjet Ecken anbietet)
Logo	logo-hivegrid.png, über der Karte, mittig, 152 px breit
Banner	600 px breit, ganz oben in der Karte ohne Rand. Datei 1200 px für scharfe Bildschirme. Verlinkt auf dasselbe Ziel wie der Button (außer K1)
Innenabstand Karte	links und rechts 40 px
Fließtext	Georgia 17 px, Zeilenhöhe 1,65, #1A1A1A, 18 px Abstand nach jedem Absatz
Links im Text	#8A6800, unterstrichen
Button	Fläche #F1B729, Schrift #1A1A1A, Arial fett 16 px, Innenabstand 16 px oben/unten und 34 px links/rechts, Ecken 6 px, mittig. Text endet mit „→“. Auf dem Handy über die volle Breite
Terminleiste	drei Spalten, direkt unter dem Banner, unten Linie 1 px #ECEAE3. Beschriftung Arial 11 px fett in Großbuchstaben, Sperrung 1,5 px, #8A6800. Wert Georgia 16 px fett
Zitat	Georgia kursiv 20 px, ohne Balken oder Rahmen
Liste	Kreis 26 px #F1B729 mit Zahl (Arial fett 14 px), Text Georgia 17 px
Heft-Kasten	Fläche #FFF6DA, Ecken 10 px, links heft-klein.png 78 px breit, rechts Georgia 16 px und Link in Arial fett 15 px
Signatur	„Gruß Noah“ als Text, darunter signatur-noah.png 360 px breit
PS	Linie 1 px #ECEAE3 darüber, Georgia 16 px #3A3A37, „PS:“ fett. Wo es passt, ist ein Satzteil auf das Ziel der Mail verlinkt (nicht in K1, K2, B6)
Vorschautext	unsichtbar ganz oben, danach Füllzeichen, damit das Postfach nichts anderes dahinter anzeigt. Beim Import ist das schon drin
Fuß	außerhalb der Karte, Arial 12 px #6B6B66, mittig

Farben

Farbe	Wert	Wofür
Gold	#F1B729	Buttons, Linien, Flächen. Nie als Textfarbe auf Weiß, zu wenig Kontrast
Tinte	#1A1A1A	Text, Schrift auf Buttons
Gold dunkel	#8A6800	Links und kleine Beschriftungen im Goldton
Gold hell	#FFF6DA	Heft-Kasten
Grund	#F4F3EF	außen um die Karte
Linie	#ECEAE3	Trennlinien
Grau	#6B6B66	Fuß

---

Welche Mail hat was

Baustein	K1	K2	K3 bis K11	B4 bis B6	B0 bis B3 (WebinarGeek)
Logo, Banner, Text, Gruß, Signatur, Fuß	ja	ja	ja	ja	ja
Terminleiste	–	ja	ja	–	ja
Button	–	„Heft lesen →“	„Platz sichern →“	„Termin mit Haris aussuchen →“	„Zum Webinar →“
Heft-Kasten	–	–	ja	–	B0
Zitat oder Liste	wo es passt, siehe Datei
PS	ja	ja	ja	ja	B0 bis B2

K1 hat keinen Button. Noah bittet dort nur um eine Antwort.

---

Platzhalter

In den Dateien	Was hinein muss	Woher
Moin [Vorname],	die Eigenschaft anrede aus Mailjet, danach ein Komma. In anrede steht „Moin Max“ oder nur „Moin“	Mailjet-Personalisierung
Heft-Link	steht schon drin: hivegrid.de/ebook, mit Zusatz für Mailjet (utm_content zeigt Mail und Stelle, z. B. k03-heft)	–
{{HARIS_LINK}}	Buchungslink für das Gespräch mit Haris	stellt Dejan bereit (Aufgabe 6.1)
[[UNSUB_LINK_EN_US]]	Abmelde-Link, steht schon drin. Ohne ihn lehnt Mailjet die Vorlage ab	Mailjet
{{ZUGANGSLINK}}	eigener Zugangslink jedes Angemeldeten	WebinarGeek, nur B0 bis B3 (Dejan)
Link „Platz sichern“	steht schon fertig drin: webinar.hivegrid.de mit Zusatz, an dem man sieht, welche Mail die Anmeldung gebracht hat	–

---

Mail für Mail

Mail	Datei	Banner	An	Versand
K1 Ich war nicht der Chef	k01.html	k01-ich-war-nicht-der-chef.jpg	Verteiler	Di 17.11., 7:00
K2 Jede Frage lief über meinen Tisch	k02.html	k02-jede-frage-lief-ueber-meinen-tisch.jpg	Verteiler	Do 19.11., 7:00
K3 Jedes Programm war eine Insel	k03.html	k03-jedes-programm-war-eine-insel.jpg	Verteiler	Di 24.11., 7:00
K4 Eine Anfrage, dreimal getippt	k04.html	k04-eine-anfrage-dreimal-getippt.jpg	Verteiler	Do 26.11., 7:00
K7 In zehn Tagen	k07.html	k07-in-zehn-tagen.jpg	Verteiler	Sa 28.11., 8:00
K8 Lebenslauf einer Wärmepumpe	k08.html	k08-lebenslauf-einer-waermepumpe.jpg	Verteiler	Di 01.12., 7:00
K9 Klingt gut, oder?	k09.html	k09-klingt-gut-oder.jpg	Verteiler	Do 03.12., 7:00
K10 Trotzdem lief alles über meinen Tisch	k10.html	k10-trotzdem-lief-alles-ueber-meinen-tisch.jpg	Verteiler	Sa 05.12., 8:00
K11 Morgen Abend, 18 Uhr	k11.html	k11-morgen-abend-18-uhr.jpg	Segment „noch nicht angemeldet“	Mo 07.12., 7:00
B4a Danke für gestern Abend	b4a.html	b4a-danke-fuer-gestern-abend.jpg	Segment „teilgenommen“	Mi 09.12., 9:00
B4b Wir haben ohne dich angefangen	b4b.html	b4b-wir-haben-ohne-dich-angefangen.jpg	Segment „nicht erschienen“	Mi 09.12., 9:00
B4c Deine drei Zahlen	b4c.html	b4c-deine-drei-zahlen.jpg	Reserve, nur wenn Teilnahmedaten fehlen	–
B5 Du hast zwei Wege	b5.html	b5-du-hast-zwei-wege.jpg	Angemeldet	Fr 11.12., 9:00
B6 Letzte Mail vor Weihnachten	b6.html	b6-letzte-mail-vor-weihnachten.jpg	Angemeldet	Di 15.12., 9:00
B0 bis B3	b0.html bis b3.html	webinargeek/…	WebinarGeek, macht Dejan	Bestätigung, 24 Std., 9 Std., 1 Std. vorher

Betreff und Vorschautext stehen oben in jeder Datei im Kommentar und im PDF. K5 und K6 entfallen.

---

Was gegenüber dem PDF anders ist

• „Google Meet“ heißt in den Mails „live im Browser“, weil das Webinar über WebinarGeek läuft. Den Zugangslink setzt WebinarGeek ein. Noah gibt das noch frei (Aufgabe 1.6).
• Zitate und Listen: Einzelne Sätze stehen als Zitat (kursiv, etwas größer), Aufzählungen als Liste. Der Wortlaut ist derselbe. Welche Stellen das sind, steht oben in jeder Datei unter „Geändert ggü. PDF“.
• Platzhalter sind Buttons oder der Heft-Kasten geworden.

Ändert Noah noch Texte, gilt sein PDF. Die Dateien hier zeigen dann nur noch die Gestaltung.

---

Bilder oder Vorschauen neu erzeugen

Nur nötig, wenn sich ein Text in einem Bild ändert, zum Beispiel ein Termin.

• Bilder: Text in quelle/bilder.html ändern (Liste BILDER), dann ./quelle/erzeugen.sh k07 für ein Bild oder ./quelle/erzeugen.sh für alle.
• Vorschauen der Mails: ./quelle/vorschau.sh
• Mediakit-PDF: ./quelle/mediakit.sh

Die Skripte brauchen Google Chrome auf dem Mac.