> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/kommunikation/e-mail/e-mails-mit-dem-visuellen-editor-erstellen.md). # E-Mails mit dem visuellen Editor erstellen Mit dem visuellen E-Mail-Editor baust du wiederverwendbare Vorlagen direkt in der Ansicht, in der Empfänger:innen sie später sehen. Du ergänzt Inhalte, gestaltest sie, prüfst die Darstellung und speicherst erst die getestete Version. Diese Anleitung eignet sich, wenn du zum ersten Mal eine E-Mail-Vorlage erstellen oder eine bestehende Vorlage sicher überarbeiten möchtest. ## Das Ergebnis und was du vorher brauchst Am Ende hast du eine Vorlage mit einem klaren Aufbau, funktionierenden Links und einer geprüften Ansicht für große und kleine Bildschirme. Eine Vorlage ist sinnvoll für Nachrichten, die du regelmäßig in ähnlicher Form versendest, etwa Einladungen, Erinnerungen oder kurze Neuigkeiten. Bereite vor: * einen klaren Zweck der Nachricht und eine einzige wichtigste Handlung; * Text, Bilder und Ziel-Links, die bereits geprüft sind; * ein eigenes Testpostfach auf dem Smartphone und am Computer; * bei personalisierten Texten mindestens einen Testkontakt, bei dem die benötigten Daten wirklich vorhanden sind. > **Wichtig:** Die Vorschau im Editor ist nur der erste Check. Entscheidend ist zusätzlich eine Test-E-Mail in einem echten Postfach. ## Vorlage öffnen oder neu beginnen 1. Öffne **Marketing > E-Mails > Vorlagen**. 2. Wähle eine bestehende Vorlage aus, wenn Aufbau und Pflichtangaben schon passen. Andernfalls wähle **Neu**. 3. Vergib einen eindeutigen internen Namen, zum Beispiel „September – Einladung zum Kennenlerntermin“. So findest du den Entwurf später wieder. 4. Öffne den visuellen Editor. In der Vorlagenübersicht helfen Suche, Ordner und Filter dabei, ältere Entwürfe wiederzufinden. Verwende eine bestehende Vorlage nur als Ausgangspunkt, wenn du alle enthaltenen Bilder, Links und die Fußzeile neu prüfst. ## Die drei Arbeitsbereiche verstehen Im Editor siehst du den Entwurf in der Mitte. Darüber oder daneben stehen drei Bereiche bereit: | Bereich | Wofür du ihn verwendest | Woran du erkennst, dass er richtig eingesetzt ist | | ----------------------- | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | | **Elemente hinzufügen** | Text, Bilder, Schaltflächen und andere Bausteine in die E-Mail legen | Jeder Baustein hat eine klare Aufgabe für die Empfänger:innen | | **Elemente verwalten** | Aufbau aus Bereichen, Spalten und einzelnen Elementen überblicken | Du findest auch in langen E-Mails schnell das richtige Element | | **Erscheinungsbild** | Grundgestaltung der ganzen Vorlage sowie Regeln für Schaltflächen, Trennlinien und Mobilansicht festlegen | Farben, Abstände und Schrift wirken über die ganze E-Mail einheitlich | Klicke einen Baustein in der Entwurfsfläche an, um seine Einstellungen zu öffnen. Im Verwaltungsbereich kannst du Bereiche aufklappen und ein bestimmtes Element auswählen; die Editoransicht springt dann zu dieser Stelle. Das ist besonders hilfreich, wenn sich ähnliche Bilder oder Textblöcke wiederholen. ## Eine E-Mail in einem sicheren Ablauf aufbauen Für die meisten E-Mails funktioniert diese Reihenfolge zuverlässig: 1. Lege oben Logo oder Absenderkennung, Überschrift und einen kurzen Einstieg an. 2. Ergänze ein Bild nur, wenn es die Aussage unterstützt. 3. Formuliere die wichtigste Handlung als eine eindeutige Schaltfläche. 4. Füge bei Bedarf weitere Abschnitte, eine Trennlinie oder häufige Fragen hinzu. 5. Schließe mit einer vollständigen Fußzeile ab. 6. Prüfe anschließend Desktop-, Mobil- und Browseransicht sowie eine Test-E-Mail. Beginne lieber schlicht. Ein gut lesbarer einspaltiger Aufbau mit einer klaren Schaltfläche ist auf kleinen Bildschirmen meist robuster als viele nebeneinander liegende Elemente. ## Text verständlich formatieren Füge einen **Text**-Baustein ein oder klicke einen vorhandenen Text an. Direkt über dem Text erscheint die Bearbeitungsleiste. Dort kannst du: * eine Überschrift oder einen Absatz wählen; * Schriftart, Schriftgröße und Textfarbe anpassen; * Text fett, kursiv, unterstrichen oder durchgestrichen darstellen; * Ausrichtung, Zeilenhöhe und Aufzählungen festlegen; * Links, Platzhalter und bei Bedarf eine zuvor gespeicherte Verknüpfung einsetzen; * fremde Formatierungen über **Formatierung löschen** entfernen. ### Links in Fließtext richtig einfügen Markiere zuerst die Worte, die anklickbar sein sollen. Öffne danach das Link-Symbol und fülle die sichtbaren Felder aus: * **Link-URL:** die vollständige Zieladresse; * **Anzeigetext:** die verständliche, anklickbare Formulierung; * **Titel:** optionaler Zusatzhinweis; * **In neuem Fenster öffnen:** sinnvoll, wenn der Link zu einer anderen Seite führt. Speichere den Link und teste ihn später in der Test-E-Mail. Verwende als Anzeigetext nicht „hier klicken“, sondern zum Beispiel „Termin auswählen“ oder „Anleitung öffnen“. ### Platzhalter erst mit echten Daten prüfen Über das Platzhalter-Symbol lassen sich Werte aus einem Kontakt oder Vorgang einfügen, beispielsweise eine Anrede oder ein Terminwert. Wähle nur einen Wert, dessen Datenquelle du kennst. Prüfe danach mit einem Testkontakt: 1. Ist das Feld tatsächlich gefüllt? 2. Ist der Text mit dem eingesetzten Wert noch grammatisch richtig? 3. Was sieht eine Person, bei der der Wert fehlt? Wenn ein Platzhalter leer bleibt, formuliere den Satz um oder verwende eine allgemeine Variante. Verlasse dich nicht nur auf die Bearbeitungsansicht. ### Gute Lesbarkeit auf dem Smartphone Verwende kurze Absätze, klare Zwischenüberschriften und ausreichend Abstand. Die originalen Editoransichten zeigen, dass Innenabstände eines Textbereichs getrennt für oben, unten, links und rechts steuerbar sind. Als Ausgangspunkt verwendet der Editor bei Text häufig 12 oben, 12 unten sowie 24 links und rechts. Ändere solche Werte nur bewusst und kontrolliere danach die Mobilansicht. ## Bilder und Logos einsetzen Wähle **Bild** oder **Logo** und öffne die Einstellungen. Dort kannst du ein Bild hochladen oder eine öffentlich erreichbare Bildadresse einsetzen. Für einen Bildbaustein sind besonders wichtig: | Feld oder Einstellung | Bedeutung | Was du prüfen solltest | | -------------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------- | | **Bild** | hochgeladene Datei oder erreichbare Bildadresse | Das Motiv lädt im Testpostfach ohne Anmeldung | | **Alternativtext** | kurze Beschreibung für nicht geladene Bilder und unterstützende Hilfsmittel | Er beschreibt die Information des Bildes, nicht nur „Bild“ | | **Link** | optionales Ziel beim Antippen oder Anklicken | Die Zieladresse öffnet sich richtig | | **Breite und Höhe** | feste Maße oder automatische Anpassung | Das Bild ist nicht abgeschnitten oder verzerrt | | **Ausrichtung und Innenabstand** | linke, mittige oder rechte Platzierung sowie Freiraum | Das Bild wirkt auf Desktop und Mobil nicht gequetscht | Für Bild- und Hintergrund-Uploads ist in der Quelle eine Obergrenze von 10 MB sichtbar. Nutze dennoch möglichst kompakte Dateien, damit die E-Mail schnell lädt. Ein Bild ohne Alternativtext oder mit einer nicht erreichbaren Bildadresse schwächt die Verständlichkeit erheblich. ## Schaltflächen so gestalten, dass sie funktionieren Eine Schaltfläche soll eine konkrete Handlung auslösen. Wähle den Baustein **Schaltfläche** und richte ihn in dieser Reihenfolge ein: 1. Schreibe eine aktive Beschriftung, etwa „Termin auswählen“. 2. Wähle die Aktion und hinterlege die zugehörige Zieladresse oder den passenden Wert. 3. Prüfe Schrift, Textfarbe und Hintergrundfarbe auf ausreichenden Kontrast. 4. Lege Ausrichtung, Breite, Rundung, Rahmen und Innenabstand fest. 5. Öffne Desktop- und Mobilansicht. Bei wichtigen mobilen Handlungen kann die volle Breite leichter antippbar sein. 6. Klicke die Schaltfläche in einer Test-E-Mail selbst an. Je nach Aktion stehen neben einer Webadresse weitere Zielarten zur Auswahl, etwa eine E-Mail, ein Dateidownload oder eine Telefonnummer. Verwende nur eine Aktion, deren Ergebnis du im Test nachvollziehen kannst. Mehrere gleichwertige Schaltflächen machen die Entscheidung schwerer; konzentriere dich auf die wichtigste Handlung. ## Weitere Bausteine sinnvoll auswählen Über **Elemente hinzufügen** sind je nach Vorlage zusätzliche Bausteine sichtbar. Diese Übersicht hilft bei der Auswahl: | Baustein | Geeignet, wenn … | Zusätzlicher Check | | ---------------------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | **Trennlinie** | zwei inhaltliche Abschnitte klar voneinander getrennt werden sollen | Höhe, Breite, Linienart, Farbe und Ausrichtung wirken nicht zu dominant | | **Soziale Netzwerke** | du auf gepflegte öffentliche Profile verweisen möchtest | Jedes Symbol hat die vollständige richtige Profiladresse | | **Fußzeile** | Kontaktangaben, Hinweise und der Abmeldelink ans Ende gehören | Kontakt-, Datenschutz- und Abmeldelinks funktionieren | | **Video** | eine kurze Erklärung besser per Video erreichbar ist | Videotyp, Video-URL, Vorschaubild und Klickziel im Test prüfen | | **RSS-Kopf und RSS-Inhalte** | aktuelle Beiträge aus einem vorbereiteten Feed in die Nachricht übernommen werden sollen | Vorschau zeigt die erwarteten Titel, Texte, Bilder und Ziel-Links | | **Layout** | Inhalte in eine oder mehrere Spalten gegliedert werden sollen | Die Anordnung bleibt auf kleinen Bildschirmen gut lesbar | | **HTML/Code** | bereits geprüfter E-Mail-Code unvermeidbar ist | In mehreren E-Mail-Programmen testen; ansonsten Standardbaustein bevorzugen | ### Weitere Elemente ohne Warenbezug | Baustein | Geeignet, wenn … | Zusätzlicher Check | | ------------------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | **FAQ** | mehrere kurze Fragen direkt in der E-Mail beantwortet werden sollen | Jede Frage in Vorschau und Test-E-Mail aufklappen; lange Erklärungen besser auf eine verlinkte Seite auslagern | | **Bildfolge** | mehrere Bilder nacheinander eine Geschichte oder mehrere Schritte erklären | Reihenfolge, Bildausschnitt und Darstellung im tatsächlich genutzten Postfach prüfen | | **Link-Vorschau** | ein Artikel, eine Anleitung oder eine andere Website mit einem kompakten Vorschaublock vorgestellt werden soll | Titel, Bild, Beschreibung und Zieladresse müssen zum verlinkten Inhalt passen | | **Countdown** | ein echtes, klar kommuniziertes Enddatum oder ein Beginn sichtbar werden soll | Zeitpunkt, Zeitzone und die Darstellung nach Ablauf zuerst mit einem Test prüfen | | **Abstand** | zwischen zwei Bausteinen nur Luft, keine sichtbare Linie, nötig ist | Ausreichenden Platz auf Mobilgeräten prüfen; für eine sichtbare Trennung die Trennlinie verwenden | | **Bewertungslink** | Empfänger:innen unkompliziert Feedback geben können | Beschriftung und Zielseite entsprechen der tatsächlichen Feedback-Möglichkeit | | **Formular** | eine kurze Rückmeldung direkt in der E-Mail möglich sein soll | Es funktioniert nur in unterstützten E-Mail-Programmen; immer einen normalen Link als Alternative ergänzen | > **Für alle Bausteine:** Die Elemente passen sich grundsätzlich an die Bildschirmgröße an. Kontrolliere trotzdem Reihenfolge, Abstände, Ausrichtung und Antippbarkeit in der Mobilansicht und einer echten Test-E-Mail. ### Trennlinie, Profile und Fußzeile Bei einer Trennlinie stellst du Höhe, Breite, Linienart, Ausrichtung, Farbe und Innenabstand ein. Die sichtbaren Optionen umfassen durchgezogen, gestrichelt und gepunktet. Verwende sie sparsam: Sie sollen den Lesefluss gliedern, nicht Aufmerksamkeit von der Nachricht abziehen. Beim Baustein **Soziale Netzwerke** fügst du nur Profile ein, die tatsächlich gepflegt werden. Du kannst Reihenfolge, Symbolstil, Anzeige, Größe, Ausrichtung und Abstand beeinflussen. Nach dem Speichern muss jedes Symbol in einer Test-E-Mail zur richtigen Profilseite führen. Die **Fußzeile** bearbeitest du direkt wie Text. Sie braucht verständliche Kontaktangaben und einen überprüften Abmeldelink. Passe Text, Schrift, Farbe und Abstand so an, dass sie lesbar bleibt, statt sie durch zu kleine Schrift zu verstecken. ### Video und RSS-Inhalte prüfen Beim Video-Baustein wählst du zuerst den Typ, fügst die Video-URL ein und bestimmst bei Bedarf Vorschaubild, Größe, Abspiel-Schaltfläche und Abstand. Ein Vorschaubild kann ebenfalls hochgeladen oder über eine Bildadresse hinterlegt werden; auch dafür ist in der Quelle eine 10-MB-Grenze sichtbar. Sende immer eine Test-E-Mail, weil die Wiedergabe und die Weiterleitung zum Video im Postfach geprüft werden müssen. Für RSS stehen ein Kopfbereich und wiederholte Einträge bereit. Der Kopf kann Werte wie Titel, Beschreibung, Link und Datum des Feeds verwenden. Für Einträge wählst du unter anderem eine Kurzfassung, eine Kurzfassung mit Bild, nur Titel, vollständigen Inhalt oder eine eigene Zusammenstellung. Kontrolliere im Test besonders lange Feed-Texte und fehlende Bilder, damit die Nachricht nicht unübersichtlich wird. ### Eigener HTML-Code nur mit technischem Wissen Der **HTML/Code**-Baustein ist für geprüften HTML- und E-Mail-CSS-Inhalt gedacht. Viele E-Mail-Programme behandeln Code unterschiedlich und blockieren bestimmte Techniken. Verwende diesen Baustein nur, wenn ihr den Inhalt in den tatsächlich genutzten Postfächern testen könnt. Für normale Texte, Bilder und Handlungsaufrufe sind die Standardbausteine stabiler und leichter zu pflegen. ## Layout und Aufbau steuern Mit **Layouts** erzeugst du einen einspaltigen, zweispaltigen oder mehrspaltigen Bereich. Die sichtbaren Varianten reichen von einer Spalte über gleich breite und unterschiedlich breite Zweierspalten bis zu mehreren gleich breiten Spalten. Wähle die Spaltenzahl nach der Aussage, nicht nach dem verfügbaren Platz: * **Eine Spalte:** für Überschrift, kurze Erklärung und eine Handlung; besonders robust auf Mobilgeräten. * **Zwei Spalten:** für Bild und kurzen Text nebeneinander; nach dem Mobiltest verwenden. * **Mehrere Spalten:** nur für sehr kurze, gleichartige Inhalte wie mehrere Hinweise; auf dem Smartphone besonders kritisch prüfen. Im Bereich **Elemente verwalten** siehst du den Aufbau als **Bereich > Spalte > Element**. Klappe ihn auf, um das richtige Element auszuwählen. Dort kannst du einzelne Elemente bearbeiten oder entfernen und für Desktop sowie Mobilgeräte sichtbar oder verborgen schalten. > **Folge beachten:** Wenn du einen ganzen Bereich ausblendest, erscheinen seine enthaltenen Elemente in dieser Ansicht ebenfalls nicht. Prüfe daher beide Ansichten nach jeder Sichtbarkeitsänderung. ## Erscheinungsbild und mobile Darstellung festlegen Öffne **Erscheinungsbild**, wenn die Regel für die gesamte Vorlage gilt. Dort findest du unter anderem: * Hintergrundfarbe um die E-Mail und Farbe des eigentlichen Inhaltsbereichs; * Breite des Inhaltsbereichs; * ein optionales Hintergrundbild; * allgemeine Einstellungen für Schaltflächen und Trennlinien; * die mobile Formatierung. In der Quellansicht ist eine Inhaltsbreite von 600 als Ausgangswert sichtbar. Sehr breite Inhalte können auf kleinen Bildschirmen schlecht lesbar werden. Hintergrundbilder sind nicht in jedem E-Mail-Programm gleich zuverlässig; wähle daher immer zusätzlich eine passende Hintergrundfarbe. ### Mobilformatierung nicht überspringen In der mobilen Formatierung kannst du für Überschriften, Absätze und Schaltflächen getrennt festlegen, ob sie angepasst werden. Sichtbar sind je Bereich mindestens: * Aktivierung für die mobile Formatierung; * Schriftgröße; * Textausrichtung; * Zeilenhöhe. Diese Einstellungen wirken nur in E-Mail-Programmen, die die entsprechende mobile Darstellung unterstützen. Deshalb gilt: Mobilvorschau öffnen und zusätzlich eine Test-E-Mail auf einem echten Smartphone lesen. ## Browseransicht ergänzen und testen Bei neuen leeren Vorlagen kann oben bereits ein Link zur Browseransicht vorhanden sein. Für ältere Vorlagen fügst du den Baustein **Browseransicht** über **Elemente hinzufügen** ein. 1. Platziere den Baustein sinnvoll am oberen Rand der E-Mail. 2. Bearbeite bei Bedarf seinen sichtbaren Text. 3. Lass die dafür vorgesehene dynamische Link-Adresse unverändert, damit jede versendete E-Mail zu ihrer passenden Ansicht führt. 4. Öffne die Vorschau und klicke den Link. 5. Sende eine Test-E-Mail und wiederhole den Klick im Postfach. So prüfst du nicht nur die Bearbeitungsansicht, sondern auch die Darstellung, die Empfänger:innen außerhalb ihres Postfachs sehen. ## Praxisbeispiel: Einladung zu einem Kennenlerntermin Ein Studio möchte neue Kontakte zu einem Kennenlerntermin einladen. 1. Das Team öffnet **Marketing > E-Mails > Vorlagen** und erstellt eine neue einspaltige Vorlage. 2. Es ergänzt Logo, H1-Überschrift, drei kurze Absätze und ein kompaktes Bild mit Alternativtext. 3. Die Schaltfläche erhält die Beschriftung „Termin auswählen“ und die geprüfte Zieladresse. 4. In der Fußzeile stehen Kontaktangaben und der funktionierende Abmeldelink. 5. Das Team prüft Mobilansicht, Browseransicht und Test-E-Mail auf Smartphone sowie Computer. 6. Erst wenn Bild, Link, Schrift und Umbrüche stimmen, wird die Vorlage gespeichert und für den Versand genutzt. Das Ergebnis ist eine Vorlage, die leicht angepasst werden kann, ohne dass bei jeder neuen Nachricht Aufbau oder Pflichtangaben vergessen werden. ## Häufige Probleme sicher lösen | Beobachtung | Wahrscheinliche Ursache | Nächster Schritt | | ---------------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------- | | Bild fehlt im Testpostfach | Bildadresse ist nicht öffentlich erreichbar oder Datei ist ungeeignet | Bild neu hochladen, Alternativtext ergänzen und erneut testen | | Schaltfläche führt nicht zum Ziel | Aktion oder Zieladresse ist falsch oder unvollständig | Aktion und vollständige Zieladresse öffnen, speichern und im Test anklicken | | Text sieht nach dem Einfügen uneinheitlich aus | Fremde Formatierung wurde übernommen | Text markieren, **Formatierung löschen**, danach bewusst neu formatieren | | Wichtiger Inhalt fehlt auf dem Smartphone | Element oder übergeordneter Bereich ist für Mobilgeräte verborgen | Sichtbarkeit im Element und im ganzen Bereich prüfen | | E-Mail wirkt auf dem Smartphone zu dicht | Mehrspaltiger oder überladener Aufbau | Kürzen, Abstände verbessern und auf eine Spalte vereinfachen | | Platzhalter bleibt leer | Testkontakt hat die benötigte Information nicht | Feld füllen oder Text so formulieren, dass er auch ohne Wert verständlich bleibt | | Darstellung eines Code-Bausteins weicht ab | E-Mail-Programm unterstützt den Code anders | Standardbaustein verwenden oder in den relevanten Postfächern erneut prüfen | ## Abschluss-Check vor dem Speichern * [ ] Überschrift, Text und wichtigste Schaltfläche sind auf den ersten Blick verständlich. * [ ] Alle Bilder haben einen passenden Alternativtext und laden im Test. * [ ] Jede Schaltfläche und jeder Textlink führt zum richtigen Ziel. * [ ] Platzhalter sind mit einem echten Testkontakt geprüft. * [ ] Fußzeile, Kontaktangaben und Abmeldelink sind vollständig und erreichbar. * [ ] Desktop-, Mobil- und Browseransicht wurden kontrolliert. * [ ] Eine Test-E-Mail wurde im eigenen Postfach geöffnet und vollständig angeklickt. Weiterführend: [Absender für E-Mails gezielt festlegen](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/kommunikation/e-mail/absender-fur-e-mails-gezielt-festlegen) und [E-Mails in der Inbox testen](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/kommunikation/e-mail/e-mails-in-der-inbox-testen). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/kommunikation/e-mail/e-mails-mit-dem-visuellen-editor-erstellen.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.