HTML-E-Mail-Vorlagen-Builder — Drag-and-Drop mit GrapesJS

Entwerfen Sie responsive E-Mails mit Drag-and-Drop

Entwickelt für moderne E-Mail-Workflows

Erstellen Sie visuell responsive E-Mail-Vorlagen und exportieren Sie ESP-fähiges HTML

Diese Seite konzentriert sich auf praktische Ergebnisse, nicht nur auf Funktionen: schnellere Vorlagenproduktion, sauberere Übergabe an das Engineering und bessere clientsübergreifende Zuverlässigkeit mit MJML-gesteuertem Output.

22k+

GitHub-Sterne

100+

Ökosystem-Plugins

MJML

E-Mail-sicheres Markup

10+ Jahre

Produktionsreife

Funktionen des E-Mail-Builders

Standardmäßig reaktionsschnell

MJML generiert automatisch mobilreaktives HTML. Manuelle Medienanfragen sind nicht nötig.

MJML-Unterstützung

Das native MJML-Plugin kompiliert Ihr Design zu e-Mail-sicherem HTML mit Outlook- und Gmail-Kompatibilität.

Klientübergreifende Ausgabe

Testen Sie Ihre Vorlagen in Gmail, Outlook, Apple Mail und Yahoo, bevor Sie senden.

Sauberer HTML-Export

Exportiere HTML, das für jeden E-Mail-Versanddienst bereit ist: Mailgun, SendGrid, AWS SES usw.

Nützliche Ergebnisse in der ersten Woche

Starte schnell gebrandete Newsletter

Beginnen Sie mit wiederverwendbaren Abschnitten und halten Sie Typografie, Abstand und CTA-Stile über Kampagnen hinweg konsistent.

Reduzieren Sie Überraschungen beim Rendering

Verwenden Sie eine e-Mail-sichere Struktur und führen Sie vor dem Versand Kompatibilitätsprüfungen durch, um fehlerhafte Layouts zu vermeiden.

Übergeben Sie zuverlässiges HTML an ESP-Tools

Exportiere sauberes HTML, das mit Mailgun, SendGrid, SES und benutzerdefinierten SMTP-Pipelines funktioniert.

Aufbau von Flows für Teams und Nutzer

STEP 01

Wähle eine Vorlage für eine Foundation

Wählen Sie Willkommens-, Kassenbon-, Promo- oder Digest-Vorlagen und ordnen Sie diese Ihrem Markensystem zu.

STEP 02

Optisch mit Blöcken anpassen

Bearbeiten Sie Header, Body-Module, CTAs und Fußzeilen mit Drag-and-Drop-Steuerung und Inline-Style-Tools.

STEP 03

Vorschau und Export sicher

Überprüfen Sie das Rendering-Verhalten und exportieren Sie dann das eingelagerte HTML für Ihren sendenden Service.

E-Mail-Vorlagengalerie

Transaktional

Willkommens-E-Mail

Neue Nutzer mit einer klaren Begrüßungsbotschaft einbinden

Newsletter

Newsletter

Wöchentliche Zusammenfassung mit Bild-, Text- und CTA-Blöcken

Marketing

Promotion

Vorlage für Verkaufs- und Rabattankündigungen

Transaktional

Transaktionsbeleg

Bestellbestätigung mit Posten und Gesamtsummen

Tropf

Drip-Kampagne

Sequenz-E-Mail für SaaS-Onboarding-Flows

Newsletter

Wöchentliche Zusammenfassung

Kuratierte Inhaltsübersicht mit Abschnitten

Marketing

Produktankündigung

Feature-Launch-E-Mail mit Heldenbild

Erhalt

Wiedereinsatz

Inaktive Abonnenten zurückgewinnen

Email-Builder-Plugins auf GJS.Market

E-MailKostenlos

MJML-Newsletter-Preset

Vollständiges MJML-basiertes E-Mail-Builder-Preset

BlöckeKostenlos

E-Mail-Blockbibliothek

Kopf-, Fuß-, CTA- und Inhaltsblöcke

UIKostenlos

Responsive Vorschau

Test-E-Mails auf Mobil-, Tablet- oder Desktop-Größen

ExportKostenlos

HTML-Export

Exportiere eingegrenztes HTML bereit für jedes ESP

VermögenswerteKostenlos

Bildoptimierer

Automatische Komprimierung von Bildern zur E-Mail-Zustellung

StileKostenlos

Dunkelmodus-Stile

Fügen Sie Unterstützung für Medienabfragen im Dunkelmodus zu E-Mails hinzu

Wie man einen E-Mail-Builder mit GrapesJS baut

1

Installiere GrapesJS und das MJML-Plugin

Führe npm aus, installiere grapesjs, grapesjs-mjml und importiere beide in dein Projekt.

2

Initialisieren Sie den Editor mit dem voreingestellten Newsletter

Gib grapesjsMjml in dein Plugin-Array, um die MJML-Blockbibliothek und responsive Vorlagen zu aktivieren.

3

Passe Blöcke an deinen Anwendungsfall an

Fügen Sie Blöcke hinzu, entfernen oder verändern sie, damit sie Ihrem E-Mail-Designsystem und den Markenrichtlinien entsprechen.

4

Integrieren Sie sich in Ihren sendenden Dienst

Exportiere HTML von editor.getHtml() und sende es über Mailgun, SendGrid, AWS SES oder einen beliebigen SMTP-Anbieter.

5

Füge GJS.Market-Plugins für zusätzliche Funktionen hinzu

Dark Mode, Bildoptimierung und erweiterte Export-Plugins sind auf GJS.Market verfügbar.

Die beste Passform für diese Teams

Produkt- und Lebenszyklusteams

Verwalten Sie Onboarding-, Aktivierungs- und Retentions-E-Mails mit wiederverwendbaren Blöcken und vorhersehbaren Ergebnissen.

Agenturen und Wachstumsteams

Erstellen Sie Kampagnenvarianten schneller und halten Sie visuelle Konsistenz über mehrere Kunden hinweg.

SaaS-Plattformen mit eingebetteten Editoren

Bieten Sie den Kunden ein integriertes E-Mail-Builder-Erlebnis, ohne eines von Grund auf neu erstellen zu müssen.

E-Mail-Client-Kompatibilität

E-Mail-ClientWebMobilAnmerkungen
GmailVolle Unterstützung
Outlook 2019+Verwenden Sie MJML für die besten Ergebnisse
Apple MailAusgezeichnete Darstellung
Yahoo MailDie meisten unterstützten Funktionen
Samsung EmailN/AGuter mobiler Support

Start-Checkliste für einen nützlichen E-Mail-Builder

  • Definieren Sie Vorlagentypen: Willkommen, Newsletter, Promo, Transaktion und Re-Engagement.
  • Setze Blockregeln für Abstand, Typografie und Button-Stile, um Markenkonsistenz zu gewährleisten.
  • Konfigurieren Sie Bildhosting und -optimierung für leichtere Nutzlasten und bessere Zustellbarkeit.
  • Teste Schlüsselvorlagen in Gmail, Outlook, Apple Mail und Yahoo vor der Veröffentlichung.
  • Implementiere Entwurfs- und Versionsverlauf, damit Teams sicher an Kampagnen iterieren können.

HTML-E-Mail-FAQ

Baue bessere E-Mail-Vorlagen mit weniger Überarbeitungen

Verwenden Sie bewährte Plugins und Template-Blöcke, um schneller vom ersten Entwurf zum produktionsbereiten E-Mail-HTML zu wechseln.

E-Mail-Plugins durchsuchen