HTML-Editor im Mailing und Mitteilungen

Updated on 23. Januar 2025

Der HTML-Editor im Mailing von zummit bietet Ihnen eine leistungsstarke und flexible Möglichkeit, um Ihre E-Mail-Kommunikation professionell und ansprechend zu gestalten. Mit diesem Editor können Sie nicht nur einfache Texte verfassen, sondern auch komplexe Layouts erstellen, multimediale Inhalte integrieren und Ihre Nachrichten individuell personalisieren. In diesem Leitfaden erfahren Sie Schritt für Schritt, wie Sie die vielfältigen Funktionen des HTML-Editors optimal nutzen, um Ihre Mailings noch wirkungsvoller zu gestalten.

Grundlegende Funktionalitäten des HTML-Editors #

Neue Inhalte einfügen

Das Plus-Symbol oben links öffnet eine Palette von Inhaltselementen, die Sie Ihrem Mailing hinzufügen können. Diese Elemente umfassen Textblöcke, Bilder, Buttons und vieles mehr. Wählen Sie das gewünschte Element aus der Liste aus und es wird sofort an der Cursorposition in Ihrem Mailing eingefügt.

Mobile Ansicht prüfen

Der Wechsel zur mobilen Ansicht über das Smartphone-Icon ist ein wichtiger Schritt, um die Kompatibilität Ihres Mailings über verschiedene Geräte hinweg sicherzustellen. Dies gibt Ihnen eine Vorschau darauf, wie Empfänger Ihr Mailing auf ihren Handys sehen würden, und ermöglicht es Ihnen, Anpassungen vorzunehmen, um eine optimale Darstellung sicherzustellen.

E-Mail Design anpassen

Durch das Pinsel-Icon öffnen Sie das Design-Menü, wo Sie grundlegende visuelle Einstellungen wie Hintergrundfarbe, Randabstände und die Eckenrundung Ihres Mailings anpassen können. Diese Einstellungen sind besonders nützlich, um Ihr Mailing an das visuelle Branding Ihrer Organisation anzupassen.

Bearbeitungsstruktur verstehen

Der Abschnitt „Ausgewählter Inhalt: …“ zeigt Ihnen genau an, welches Element Sie gerade bearbeiten. Diese Anzeige ist nützlich, um sicherzustellen, dass Sie Änderungen am richtigen Teil des Mailings vornehmen, ohne versehentlich andere Elemente zu modifizieren. Egal ob Sie den Text, den Wrapper oder den gesamten Body anpassen möchten, das aktuell ausgewählte Element wird deutlich durch eine schwarze Markierung hervorgehoben. Diese Funktion erleichtert eine präzise und gezielte Bearbeitung Ihres Mailings.

Fokusmodus nutzen

Um eine konzentrierte und effektive Bearbeitung Ihrer Mailings zu ermöglichen, bietet der zummit HTML-Editor einen speziellen Fokusmodus. Dieser Modus kann durch Klicken auf das Icon, das wie ein Auge mit vier darauf zeigenden Pfeilen aussieht, aktiviert werden. Der Fokusmodus erweitert den Editor auf die volle Bildschirmbreite und minimiert externe visuelle Ablenkungen, sodass Sie sich vollständig auf die Gestaltung Ihrer Inhalte konzentrieren können.

Schritt-für-Schritt Anleitung #

1. Inhalte vorbereiten und strukturieren: #

Starten Sie direkt im zummit Editor mit der Erstellung Ihres Mailings. Sie können entweder einen bereits vorbereiteten Text per Copy-and-Paste einfügen oder direkt im Editor Ihren Text schreiben.

Um Ihren Text zu strukturieren, nutzen Sie die Enter-Taste, um neue Absätze zu beginnen.
Möchten Sie innerhalb eines Absatzes in eine neue Zeile wechseln, ohne einen neuen Absatz zu erstellen, verwenden Sie die Kombination aus Enter- und Umschalttaste (Shift).

Dies ermöglicht es Ihnen, den Text visuell und logisch in übersichtliche Überschriften und Absätze zu gliedern, was die spätere Bearbeitung und Anpassung erheblich erleichtert und zu einer klaren und nachvollziehbaren Inhaltsdarstellung führt.

2. Personalisierung durch Variablen: #

Personalisierung trägt erheblich zur Engagement-Rate Ihrer Mailings bei. Fügen Sie personalisierte Anreden oder Inhalte ein, indem Sie Variablen wie [[receiver.firstName]] nutzen. Wählen Sie eine Variable aus und platzieren Sie die Variable anhand der Cursorposition an der Stelle im Text, wo der personalisierte Text erscheinen soll. Dies macht Ihre Nachrichten relevanter und ansprechender für den Empfänger.

3. Texte formatieren und gestalten: #

Nutzen Sie die Formatierungsfunktionen, um Überschriften zu erstellen und wichtige Informationen hervorzuheben. Sie können Überschriften, Schriftgrößen und -farben anpassen, um unterschiedliche Informationshierarchien zu schaffen. Nutzen Sie das Menü für Textformatierung, um Textblöcke optisch zu strukturieren und die Lesbarkeit zu verbessern.

4. Medien und Links einfügen #

Bilder einfügen

Um Bilder in Ihr Mailing einzufügen, klicken Sie auf das Bild Icon in der Werkzeugleiste oder nutzen Sie das Zwei-Strich-Menü neben einem bestehenden Absatz und wählen „Bild“. Laden Sie dann ein Bild hoch oder verwenden Sie eine Bild-URL.

Bildgröße optimieren: Achten Sie darauf, dass die Bilddateien nicht zu groß sind, um die Ladegeschwindigkeit Ihres Mailings nicht zu beeinträchtigen. Komprimieren Sie die Dateien vor dem Hochladen.

Responsives Design: Wenn Sie die Größe des Bildes im Editor nicht anpassen, bleibt es responsiv und passt sich automatisch an verschiedene Bildschirmgrößen an. Manuelle Anpassungen fixieren die Bildgröße und machen sie nicht mehr responsiv.

Platzierung und Ausrichtung: Platzieren und richten Sie das Bild an der gewünschten Stelle aus. Nutzen Sie die Optionen im Zwei-Strich-Menü, um die Ausrichtung des Bildes (links, zentriert, rechts) festzulegen.

Links einfügen

Um einen Link zu setzen, gehen Sie folgendermaßen vor:

  1. Text markieren: Markieren Sie den Text, den Sie verlinken möchten.
  2. Link-Symbol klicken: Klicken Sie auf das Link-Symbol in der Werkzeugleiste oder nutzen Sie das Zwei-Strich-Menü neben dem markierten Text.
  3. URL eingeben: Geben Sie die gewünschte URL ein.
  4. Link-Einstellungen: Wählen Sie aus, ob der Link in einem neuen Fenster oder im selben Fenster geöffnet werden soll. Diese Option finden Sie im selben Dialogfeld, in dem Sie die URL eingeben.

Call-to-Action-Buttons

Erstellen Sie auffällige Call-to-Action-Buttons, um wichtige Aktionen hervorzuheben:

  1. Plus-Symbol oder Zwei-Strich-Menü: Klicken Sie auf das Plus-Symbol oben links im Editor oder nutzen Sie das Zwei-Strich-Menü neben einem bestehenden Absatz und wählen Sie „Button“.
  2. Button-Text eingeben: Geben Sie den Text ein, der auf dem Button angezeigt werden soll, z.B. „Jetzt registrieren“.
  3. URL hinzufügen: Fügen Sie über das Link Symbol bei markiertem Text die URL hinzu, zu der der Button verlinken soll.
  4. Einstellungen anpassen: Passen Sie das Design des Buttons an, indem Sie über das Zwei-Strich-Menü die Farbe, Hintergrundfarbe und Ausrichtung festlegen.
  5. Speichern: Speichern Sie Ihre Änderungen und überprüfen Sie den Button in der Vorschau, um sicherzustellen, dass er korrekt funktioniert und ansprechend aussieht.

5. Absätze hervorheben und gestalten #

Nutzen Sie Wrapper, um bestimmte Absätze visuell hervorzuheben. Ein Wrapper ist ein Container, der es Ihnen ermöglicht, einen Textabschnitt spezifisch zu formatieren und ihn optisch abzuheben.

  1. Wrapper hinzufügen: Klicken Sie auf das Plus-Symbol oben links im Editor oder nutzen Sie das Zwei-Strich-Menü neben einem bestehenden Absatz und wählen Sie „Wrapper“.
  2. Textabschnitt platzieren: Ziehen Sie den gewünschten Textabschnitt in den hinzugefügten Wrapper.
  3. Formatierung anpassen:
    • Hintergrundfarbe: Wählen Sie eine Hintergrundfarbe aus, um den Wrapper deutlich vom restlichen Text abzuheben.
    • Rahmen: Fügen Sie bei Bedarf einen Rahmen hinzu, um den Wrapper weiter zu betonen.
    • Abstände: Passen Sie die Abstände innerhalb und außerhalb des Wrappers an, um den Text angenehm lesbar zu gestalten.

Tipps zur Nutzung von Wrappern

  • Konsistenz: Achten Sie darauf, dass die Hervorhebungen in Ihrem Mailing einheitlich und nicht übermäßig verwendet werden, um die Lesbarkeit zu erhalten.
  • Bedeutung: Verwenden Sie Wrapper für besonders wichtige Informationen, die sich vom restlichen Inhalt abheben sollen.
  • Design: Passen Sie die Farbgebung und den Stil des Wrappers an das Gesamtlayout Ihres Mailings an, um ein stimmiges Design zu gewährleisten.

6. Links einfügen #

Verlinken Sie Texte oder Bilder, um die Interaktivität Ihres Mailings zu erhöhen. Markieren Sie den Text oder wählen Sie das Bild aus, das verlinkt werden soll, und nutzen Sie das Link-Symbol in der Werkzeugleiste, um die URL einzufügen. Stellen Sie sicher, dass Links auf relevante Inhalte verweisen und korrekt funktionieren. Überprüfen Sie zudem, ob Links in einem neuen Fenster geöffnet werden sollen, um die Benutzerfreundlichkeit zu erhöhen.

7. Responsive Design prüfen und anpassen #

Überprüfen Sie nach allen Anpassungen, wie Ihr Mailing auf verschiedenen Geräten aussieht. Nutzen Sie die Vorschau-Funktion, um das Layout auf Desktops, Tablets und Smartphones zu testen. Machen Sie erforderliche Anpassungen, um sicherzustellen, dass Ihr Mailing auf allen Geräten gut lesbar und ansprechend ist.

8. Testversand durchführen #

Bevor Sie das Mailing an Ihre Zielgruppe senden, führen Sie einen Testversand durch. Senden Sie das Mailing an verschiedene E-Mail-Adressen und auf verschiedene Geräte, um die Darstellung und Funktionalität zu überprüfen. Achten Sie darauf, dass alle interaktiven Elemente wie Links und Buttons funktionieren und die Formatierung korrekt angezeigt wird.

Best Practices für effektive Mailings #

  1. Klarheit und Konzision: Priorisieren Sie klare und prägnante Nachrichten. Vermeiden Sie übermäßig lange Texte und verwenden Sie stattdessen Bullet Points oder kurze Absätze, um Informationen schnell und effektiv zu kommunizieren.
  2. Visuelle Anziehungskraft: Verwenden Sie qualitativ hochwertige Bilder und eine ansprechende visuelle Gestaltung, um die Aufmerksamkeit der Empfänger zu gewinnen. Achten Sie darauf, dass die visuellen Elemente das Branding Ihrer Organisation widerspiegeln und zur Gesamtbotschaft des Mailings beitragen.
  3. Personalisierung und Segmentierung: Segmentieren Sie Ihre Mailingliste und passen Sie die Inhalte an die Interessen und Bedürfnisse der jeweiligen Zielgruppe an. Dies erhöht die Relevanz der Nachrichten und verbessert die Engagement-Rate.

Durch die Anwendung dieser erweiterten Richtlinien können Sie den HTML-Editor von zummit optimal nutzen, um wirkungsvolle und ansprechende Mailings zu erstellen, die Ihre Veranstaltungsziele unterstützen und Ihre Teilnehmerbindung verstärken.