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.
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.
- Benenne die E-Mail.
- Wähle → Drag & Drop Editor und klicke auf → Kampagnen-E-Mail erstellen bzw.→ Newsletter erstellen.
- Nimm die benötigten Einstellungen für E-Mail-Adressen vor. Wähle eine Signatur und schreibe einen Preheader. Bei Bedarf kannst Du weitere Einstellungen vornehmen.
- Du kannst diese Einstellungen auch automatisch aus einer zuvor bereits erstellten E-Mail kopieren. Gib im Feld → Einstellungen aus einer anderen E-Mail kopieren den Namen der E-Mail ein und wähle sie aus.
- Klicke auf → Speichern und weiter.
- 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, 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 – kopiere Inhalte, die Du mit dem Drag & Drop Editor erstellt hast. Du kannst auch komplette Templates 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 die E-Mail freigeben und mit KlickTipp versenden. Hinweis: Wenn Du auf den Button klickst, wird noch keine E-Mail versendet.
Wichtig zu wissen:
Wenn Du Änderungen an einer E-Mail vorgenommen hast, klicke erneut den Button → Freigeben. Ansonsten wird der aktuelle Stand lediglich im Editor gespeichert.
Der Gestaltungsbereich
Bis auf den Befehl → Alles löschen kannst Du jeden Deiner Schritte rückgängig machen. 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 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.
Menüpunkt → Inhalt
Hier kannst Du in Deiner E-Mail verschiedene Bausteine hinzufügen. Ziehe den benötigten Baustein 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 nach dem Klick auf das Element.
- Zusätzlich siehst Du auf der rechten Seite erweiterte Eigenschaften und Optionen.
- Bei Inhalten wie Text, Bildern, Icons etc. siehst Du rechts die Bearbeitungsmöglichkeiten. Hier kannst Du Dinge wie Textfarbe und Zeilenabstand verändern, aber auch z.B. den Innenabstand für Bilder.
Menüpunkt → Zeile
Dort werden Dir unterschiedliche Zeilenlayouts angezeigt, die Du im Layout nutzen kannst.
- Wenn Du links im Layout auf einen Bereich außerhalb des E-Mail-Inhalts klickst, wird die komplette Zeile ausgewählt. Du kannst sie beliebig im Inhalt verschieben. Klicke und ziehe dazu das Kreuz auf der linken Seite.
- Ebenso kannst Du eine Zeile löschen oder kopieren. Klicke dazu am rechten Rand entweder auf den Papierkorb oder auf das Kopier-Symbol.
- Wenn eine Zeile angewählt ist, erscheinen auf der rechten Seite die Zeilen- und Spalteneigenschaften.
Menüpunkt → Allgemein
Hier kannst Du allgemeine Einstellungen vornehmen. Wähle die Breite des Layouts, Standardschrift und sämtliche Farben etc.
Wenn Du mit der Gestaltung Deiner E-Mail fertig bist, kannst Du die E-Mail über den Button → Freigeben. Danach kannst Du Sie mit KlickTipp versenden.
Platzhalter nutzen
Über → Platzhalter kannst Du bestimmte Informationen eines Kontakts in einer E-Mail verwenden. Diese Informationen werden aus dem Stammsatz gezogen. Individuell für jeden Kontakt werden sie über die Platzhalter in die E-Mail eingefügt.
Der Platzhalter → %Subscriber:CustomFieldFirstName% fügt z. B. den Vornamen ein. Ist dieser nicht im Stammsatz angegeben, bleibt der Platzhalter leer. Ü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. Es gibt → Vordefinierte Felder und → Zusätzliche Felder. Dieser Abschnitt erscheint nur, wenn Du zusätzliche Felder angelegt hast.
- 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 nutzen. Diese kannst Du aus mehreren Links zusammensetzen.
- Klicke auf → System-Links und Du erhältst eine Ansicht aller verfügbaren System-Links. Diese kannst Du durch Klick auf die Schaltflächen in Deinen Text einfügen. Die übrigen relevanten Infos für Deine Signatur kannst Du 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.
Persönliche E-Mails im Drag & Drop Editor schreiben
Anhang – Datei an eine E-Mail anhängen
Einen Dateianhang kannst Du über einen Textlink oder einen Button versenden. Dies hat den selben Effekt wie ein E-Mail-Anhang in Deinem E-Mail-Programm.
- Definiere dazu einen Textbereich oder einen Button, den Du verlinken möchtest.
- Im Bereich → Inhalt kannst Du über → Datei verlinken Deine 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 geladen
Anker-Links in E-Mails verwenden
Mit Anker-Links kannst Du direkt an eine bestimmte Stelle einer E-Mail springen. Diesen fügst Du im Drag & Drop Editor über einen HTML-Inhaltsbaustein ein. Nach Klick auf den Link wird direkt dort hin gesprungen.
Wichtig zu wissen:
Nicht alle E-Mail-Clients unterstützen Ankerlinks. Stelle daher sicher, dass die 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. Diesen verwendest Du später bei der Verlinkung.
- Markiere den Textbereich, von dem Du zum gesetzten Anker verlinken willst. Klicke auf das Link-Symbol in der Werkzeugleiste.
- Füge im Pop-Up unter → Link-Typ URL den individuellen Anker-Namen ein. Verwende davor das #-Zeichen.
- Der Textbereich ist nun verlinkt. 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. Du kannst es nach Deinen Wünschen entsprechend anpassen. Klicke danach oben rechts auf → Freigeben.
- Klicke auf → Meine Templates. 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 Info-Symbol kannst Du Dir eine Vorschau des Templates anzeigen lassen. Über das andere Icon mit dem Stift-Symbol gelangst Du in den Bearbeitungsdialog.
- Um Dein Template mit einer bereits angelegten E-Mail zu verwenden, klicke auf → 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
