E-Mails & SMS
Drag & Drop E-Mail-Editor nutzen
In diesem Beitrag zeigen wir Dir, wie Du den Drag & Drop Editor in KlickTipp optimal nutzt, um professionelle E-Mails zu erstellen und zu versenden.
Wichtig zu wissen:
Um den Drag & Drop Editor nutzen zu können, musst Du zunächst eine neue E-Mail oder einen neuen Newsletter anlegen.
E-Mails, die bereits mit dem Rich Text Editor angelegt wurden, können nicht mit dem Drag & Drop Editor geöffnet werden. Wenn Du Inhalte aus zuvor mit dem Rich Text Editor angelegten E-Mails in den Drag & Drop Editor kopieren möchtest, kannst Du dies einfach per Copy & Paste tun.
Schritt-für-Schritt-Anleitung
- Klicke im Menü auf Kampagnen → E-Mails / SMS → Neue Kampagnen-E-Mail oder Kampagnen → Newsletter → Neuer E-Mail-Newsletter.
- Wähle → Drag & Drop Editor und klicke auf → Fortfahren.
- Benenne die E-Mail, vergebe ggf. ein Label und klicke auf → Kampagnen E-Mail anlegen.
- Nehme die benötigten Einstellungen für Absender, Versand- und Antwort-E-Mail-Adresse und ggf. eine CC- bzw. BCC-E-Mail-Adresse vor und schreibe einen Betreff in das entsprechende Feld. Wähle eine Signatur und treffe bei Bedarf eine Auswahl in den erweiterten Einstellungen.
- Du kannst diese Einstellungen auch automatisch aus einer zuvor bereits erstellten E-Mail kopieren, indem Du im Feld → Einstellungen aus einer anderen E-Mail kopieren einige Buchstaben aus dem Namen einer bestimmten E-Mail eingibst und dann auf die betreffende E-Mail klickst.
- Klicke abschließend auf Speichern und E-Mail gestalten.
- Wähle ein Template aus.
Drag & Drop Editor – Überblick
In dem sich nun öffnenden Drag & Drop Editor kannst Du die Vorlage nach Deinen Wünschen anpassen. Im Menü des Editors stehen Dir folgende Möglichkeiten zur Verfügung:
- Einstellungen – mit diesem Button kommst Du zu den Einstellungen der E-Mail zurück.
- Vorschau – dieser Button zeigt Dir eine Vorschau, also einen Entwurf Deiner Arbeit an, wie sie für den Empfänger aussehen wird.
- Raster – Klicke auf diesen Button, um eine optische Hilfe für das Layout Deiner E-Mail zu erhalten.
- Templates – Diese Option ermöglicht es Dir, Inhalte aus anderen E-Mails, die Du mit dem Drag & Drop Editor erstellt hast oder auch komplette Templates zu importieren.
- Alles löschen – Mit diesem Button kannst Du den gesamten Inhalt der E-Mail löschen.
Hinweis: Bitte wähle diese Option mit Bedacht, da dieser Schritt nicht rückgängig gemacht werden kann. - Freigeben – über diesen Button kannst Du Deine E-Mail freigeben und in KlickTipp zum Versand nutzen.
Hinweis: Wenn Du auf den Button klickst, wird noch keine E-Mail versendet. Es wird lediglich der Entwurf zu einer fertigen und zum Versand nutzbaren E-Mail umgewandelt.
Wichtig zu wissen:
Wenn Du Änderungen an einer E-Mail (die bereits freigegeben und versendet wurde) vorgenommen hast, muss danach erneut der Button → Freigeben geklickt werden. Ansonsten wird der aktuelle Stand lediglich im Editor gespeichert, die aktuelle Revision der E-Mail jedoch nicht für den Versand freigegeben!
Der Gestaltungsbereich
Bevor Du mit der Gestaltung Deiner E-Mail beginnst ist es wichtig zu wissen, dass Du bis auf den Befehl → Alles löschen jeden Deiner Schritte rückgängig, aber auch wieder geltend machen kannst. Dazu stehen Dir die Werkzeuge am unteren linken Bildschirmrand zur Verfügung.
Wähle hier z. B. ganz bestimmte zeitliche Punkte in Deiner Bearbeitung über das Uhrsymbol aus. Jeder einzelne Schritt wird in der Liste nach dem Klick auf das Symbol dokumentiert und kann durch erneutes klicken ausgewählt werden. Das Layout wird dann genau so wieder hergestellt, wie es zum gewählten Zeitpunkt aussah.
Alternativ kannst Du die Vor- und Zurück-Buttons mit dem Pfeil-Symbol anklicken, um jeweils einen Schritt in der Bearbeitungshistorie vor bzw. zurück zu springen.
Menüpunkt → Inhalt
Hier kannst Du in Deiner E-Mail verschiedene Bausteine hinzufügen. Fahre mit der Maus über die einzelnen Icons und ziehe den benötigten Inhalts-Typ mit gedrückter Maustaste an die gewünschte Stelle im E-Mail-Inhalt. Die Position kann im Nachhinein beliebig verändert werden.
Für den jeweiligen Inhaltstyp stehen verschiedene Bearbeitungsmöglichkeiten zur Verfügung.
Wichtig zu wissen:
Die Bilder in der Free Stock Photo Gallery unseres neuen E-Mail-Editors stehen unter der Creative Commons Zero Lizenz (CC0). Das bedeutet, sie können auch außerhalb von E-Mails frei verwendet werden.
- Für textbasierte Inhalte öffnet sich ein Editor mit Werkzeugleiste nach dem Klick auf das Element.
- Zusätzlich siehst Du auf der rechten Seite erweiterte Eigenschaften und Optionen.
- Bei Inhalten wie Text, Bildern, Social Icons, HTML und Icons etc. stehen Dir die Bearbeitungsmöglichkeiten auf der rechten Seite zur Verfügung. Hier kannst Du Dinge wie Textfarbe und Zeilenabstand verändern, aber auch z.B. den Innenabstand für Bilder.
Menüpunkt → Zeile
Wenn Du auf den Menüpunkt → Zeile klickst, werden Dir unterschiedliche Zeilenlayouts angezeigt, die Du nach Belieben per Drag & Drop in Dein Layout ziehen kannst.
- Wenn Du links im Layout auf einen Bereich ausserhalb des E-Mail-Inhalts klickst, wählst Du eine ganze Zeile aus. Du kannst sie beliebig im Inhalt verschieben, indem Du mit der Maus auf das Kreuz auf der linken Seite klickst, die Maustaste gedrückt hältst und das Element dann verschiebst.
- Ebenso kannst Du eine Zeile löschen oder kopieren, indem Du am rechten Rand entweder auf den Papierkorb oder das Kopier-Symbol klickst.
- Ist eine Zeile angewählt, erscheint auf der rechten Seite unter dem Menüpunkt → Zeile ein Bereich, in dem Du die Zeilen- und Spalteneigenschaften einstellen kannst.
Menüpunkt → Allgemein
Hier kannst Du allgemeine Einstellungen wie die Breite des Layouts, die Standardschrift und sämtliche Hintergrundfarben sowie die Farbe von Links festlegen.
Wenn Du mit der Gestaltung Deiner E-Mail zufrieden bist, kannst Du die E-Mail über den Button → Freigeben in KlickTipp zum Versand nutzen.
Platzhalter nutzen
Platzhalter dienen dazu, bestimmte Informationen aus dem Stammsatz eines Kontakts dynamisch in einer E-Mail zu verwenden. Diese Informationen werden dann individuell für jeden Kontakt über die Platzhalter in die E-Mail eingefügt.
Der Platzhalter %Subscriber:CustomFieldFirstName% für den Vornamen in einer E-Mail wird dann mit dem Namen des Kontakts, sofern im Stammsatz vorhanden ersetzt, ansonsten leer gelassen. Wo immer Du Textbausteine im Drag & Drop Editor verwenden möchtest, kannst Du diese mit Hilfe von Textbausteinen tun. Über den Editor im Textbereich erhältst Du Zugriff auf alle verwendbaren Platzhalter.
Wichtig zu wissen:
Bitte beachte, dass der Platzhalter für die Signatur stets in der E-Mail enthalten sein muss, damit diese, wie vorher in den Einstellungen der E-Mail festgelegt, automatisch von KlickTipp ausgewählt werden kann.
- Die Platzhalter sind in unterschiedliche Kategorien und Abschnitte aufgeteilt.
Wähle in der Kategorie → Empfänger-Angaben in dem Abschnitt → Vordef. Felder z.B. den Vornamen, um eine Anrede in Verbindung mit dem jeweiligen Vornamen des Kontakts zu erstellen. - Unter → Empfänger-Angaben im Abschnitt → Zusätzliche Felder erscheinen die von Dir individuell angelegten Felder als Platzhalter. Sofern Du noch keine eigenen Felder angelegt hast, erscheint dieser Abschnitt nicht.
- Unter dem Menü → Absender-Angaben findest Du den Platzhalter → Signatur. Fügst Du diesen ein, greift er auf die in den Einstellungen der E-Mail definierte Signatur zu.
Signatur über Links einfügen
Du kannst statt dem Platzhalter auch eine individuelle Signatur in der E-Mail über unterschiedliche Links zusammensetzen.
- Klicke links auf → System-Links und Du erhältst rechts eine Ansicht aller verfügbaren System-Links. Diese kannst Du durch Klick auf die Schaltflächen in Deinen Text einfügen und die übrigen relevanten Infos für Deine Signatur durch normalen Text ergänzen.
- Eine Übersicht der meist genutzten Platzhalter findest Du im Beitrag → Platzhalter in E-Mails einfügen.
Bilder & Emojies nutzen
Lizenzfreie Bilder
Bilder direkt in Deinem E-Mail-Konto bearbeiten
Giphy Sticker einfügen
Giphy-GIFs einfügen
Emojis in E-Mails einfügen
E-Mails für Mobile & Desktop unterschiedlich gestalten
E-Mails für mobile Endgeräte anpassen
Kostenfreie E-Mail Designvorlagen
Drag & Drop Video-Modul
Spalten-Management
Freebie in Deine E-Mail einbinden
Manuelle Tags: Mit einer E-Mail unterschiedliche Inhalte senden
Smart Tags: Mit einer E-Mail unterschiedliche Inhalte senden (conditional rows)
Wichtig zu wissen:
Die Einstellung → Bedingung erscheint nicht im Editor, wenn Du Dich im Template-Modus befindest, den Du über → Kampagnen → E-Mail Templates erreichst.
Persönliche E-Mails im Drag & Drop Editor schreiben
Anhang – Datei an eine E-Mail anhängen
Einen Dateianhang, wie Du ihn von einer klassischen E-Mail in Deinem persönlichen E-Mail-Postfach kennst, gibt es bei KlickTipp in der Form nicht. Du kannst aber eine Datei mit einem Textbereich oder einem Button verlinken! Dies hat den selben Effekt wie ein E-Mail-Anhang.
- Definiere dazu einen Textbereich oder einen Button, den Du verlinken möchtest.
- Rechts im Bereich → Inhalt kannst Du über den Link → Datei verlinken unter dem URL-Feld eine Datei verlinken.
- Klicke auf → Hochladen, → Importieren oder auf → Suche nach lizenzfreien Fotos. Wahlweise kannst Du eine bereits vorhandene Datei einfügen.
- Automatisch wird dadurch die URL zur Datei in das entsprechende Feld eingetragen. Klickt der Kontakt in der E-Mail auf den Button, wird die verlinkte Datei sofort heruntergeladen.
Anker-Links in E-Mails verwenden
Damit der Empfänger Deiner E-Mail über einen Link direkt zu einer bestimmten Stelle in Deinem Newsletter springen kann, benötigst Du einen sog. Anker. Diesen fügst Du im Drag & Drop Editor über einen HTML-Inhaltsbaustein an der Stelle ein, zu dem nach Klick auf einen Link gesprungen werden soll.
Wichtig zu wissen:
Bitte beachte, dass nicht alle E-Mail-Clients Ankerlinks unterstützen und überlege Dir daher vorher, ob Deine Empfänger den Newsletter auch ohne diese Funktionalität gut lesen können.
In den Inhaltseigenschaften gibst Du folgenden Code ein:
<a name="Anker-Name"></a><br />
Kopieren
- Anstelle von → Anker-Name wählst Du einen individuellen Namen, den Du später bei der Verlinkung verwendest.
- Markiere den Textbereich, von dem Du zum gesetzten Anker verlinken willst und klicke auf das Link-Symbol in der Werkzeugleiste.
- Füge im Pop-Up unter → Link-Typ URL den individuellen Anker-Namen mit einem Raute-Zeichen davor ein
- Der Textbereich ist nun verlinkt und wenn ein Empfänger auf den Link klickt, wird er direkt an die gewünschte Stelle geführt.
E-Mail Template im Drag & Drop Editor erstellen
- Klicke im Menü → Kampagnen auf → E-Mail Templates.
- Klicke auf → Neues Template erstellen.
- Vergebe einen Namen für die Vorlage und klicke auf → Absenden.
- Wähle aus den KlickTipp Templates oder aus → Meine E-Mails eine Vorlage aus und klicke auf → Anwenden.
- Du befindest Dich jetzt im Bearbeitungsdialog des Drag & Drop Editor für das Template und kannst es Deinen Wünschen entsprechend anpassen. Klicke danach oben rechts auf → Freigeben.
- Danach erscheint ein Overlay mit der Meldung, dass das Template erfolgreich veröffentlicht wurde und verwendet werden kann.
- Schließe das Overlay über das kleine Kreuz darin oben rechts und klicke im Hauptfenster rechts oben auf → Templates.
- Klicke dann auf → Meine Templates und es Dein gerade erstelltes Template erscheint in der Übersicht darunter.
- Wenn Du mit dem Maus-Cursor über die Kachel des Templates fährst, erscheinen zwei Icons. Über das blaue Icon mit dem Info-Symbol kannst Du Dir eine Vorschau des Templates anzeigen lassen. Über das andere blaue Icon mit dem Stift-Symbol gelangst Du in den Bearbeitungsdialog.
- Um Dein Template mit einer bereits angelegten E-Mail zu verwenden, klickst Du auf den Button anwenden
Erlaubte HTML-Tags und Attribute
Diese HTML-Tags und Attribute kannst Du mit dem HTML-Baustein im Drag & Drop Editor verwenden.
HTML-Tags
a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var
HTML-Attribute
general attributes: style, id, class, data-*, title
a: href, name, target
img: align, alt, border height, hspace, src, vspace, width, usemap
table: align, bgcolor, border, cellpadding, cellspacing, width
tbody: align, valign
td: align, bgcolor, colspan, height, rowspan, valign, width
tr: align, bgcolor, valign
tfoot: align, valign
th: align, bicolor, colspan, height, rowspan, valign, width
thead: align, valign
li: type
map: name
area: alt, coords, href, shape, target
