Studio-Überblick

Das Studio ist MailInApps visueller E-Mail-Builder. Jedes Projekt in Ihrem Dashboard öffnet sich darin.

Von einem Zweck ausgehen

Neue Projekte können von einem Zweck ausgehen: Umfrage, Aktion, Newsletter, Event, Transaktional, Dashboard, Klasse oder Sportteam, ausgewählt bei der Projekterstellung. Die Auswahl öffnet ein Karussell der echten Starter-Vorlagen dieses Themas, jede davon eine große, tatsächlich gerenderte Vorschau statt eines Mockups. Klicken Sie sich durch und wählen Sie eine aus, und sie befüllt die Arbeitsfläche mit einem Starter-Layout aus gewöhnlichen Blöcken (ein Bewertung-Block für Umfragen, ein Hero und ein Coupon für Aktionen und so weiter). Danach ist nichts Besonderes mehr daran: bearbeiten, entfernen oder ergänzen Sie sie wie jeden anderen Block. Leer starten überspringt dies und öffnet die schlichte Standard-Arbeitsfläche.

Siehe Schnellstart für den Auswahldialog, Antworten & Webhooks dafür, wie der Zweck das Antworten-Dashboard prägt, und Starter-Vorlagen & Ihre eigene Bibliothek zum privaten Speichern eigener Vorlagen oder zum Veröffentlichen in der Community-Galerie.

Der Arbeitsbereich

Arbeitsfläche — die Mitte des Bildschirms: eine Live-Darstellung Ihrer E-Mail. Klicken Sie auf ein beliebiges Element, um es auszuwählen; eine Breadcrumb-Leiste zeigt den Pfad vom E-Mail-Body bis dorthin, und jeder übergeordnete Knoten ist anklickbar.
Linke Leiste — vier Panels, jeweils einzeln über ihr Symbol zu öffnen: Einfügen (die Block-Bibliothek — ziehen Sie Layout-Blöcke wie Section, Text, Bild, Button, Trennlinie, Abstandshalter sowie interaktive Blöcke wie Karussell, Abstimmung, Formular, Countdown, Quiz auf die Arbeitsfläche; ein Suchfeld filtert alles nach Namen), Baum (die vollständige E-Mail-Struktur — Blöcke neu anordnen, verschachtelte Elemente wie eine einzelne Karussell-Folie auswählen, Container einklappen, einen Block über seinen Augen-Schalter aus der Ausgabe ausblenden, ohne ihn zu löschen, oder sich per Doppelklick-Umbenennung eine Notiz hinterlassen; jeder Container trägt außerdem ein +, das einen durchsuchbaren Auswahldialog genau der Kindtypen öffnet, die er akzeptiert — bei einem Formular öffnet er dieselben Eingabevarianten wie der Inputs-Abschnitt des Einfügen-Panels — sodass Sie ohne Ziehen hinzufügen können; derselbe Auswahldialog erscheint auf der Arbeitsfläche auch anstelle des Platzhaltertexts „Hier ablegen“ eines leeren Containers), Daten (Datenquellen & Merge-Tags — Quellen verbinden, die Zielgruppe wählen, Felder durchsuchen) und Theme (siehe Theming weiter unten).
Inspektor — das rechte Panel für die jeweilige Auswahl, unterteilt in vier Tabs: Inhalt (Text, Links, blockspezifische Felder wie die Antwortoptionen einer Abstimmung), Stil (Farben, Abstände, Rahmen, benutzerdefiniertes CSS), Logik (Repeat-Verknüpfung, Anzeigebedingungen) und Aktionen (verschieben, duplizieren, löschen, ⧉ Einbetten in… — das Gegenstück zum + des Baum-Panels: legen Sie die aktuelle Auswahl genau an ihrer Stelle in eine neue Section, Columns, Repeat oder ein HTML-Element, das sie legal aufnehmen kann, ab — etwa um einem einzelnen Button einen eigenen Hintergrund zu geben oder einen Block in ein zweispaltiges Layout zu verwandeln — sowie Als Komponente speichern, siehe Wiederverwendbare Komponenten). Ein Suchfeld über den Tabs filtert Felder über alle vier hinweg gleichzeitig.

Vorschau-Modi

Über der Arbeitsfläche steuert ein Bearbeiten / Vorschau-Schalter, was Sie gerade sehen:

Bearbeiten — die Block-Struktur, auswählbar und bearbeitbar.
Vorschau löst Merge-Tags, Anzeigebedingungen und Repeats gegen eine gewählte Empfängerzeile auf, mit einer Stufen-Auswahl darunter: Live-Ansicht (dieselbe React-Seite, auf der Empfänger landen), Versendet — modern und Versendet — Outlook rendern das tatsächlich kompilierte HTML, das die Postfächer Ihrer Empfänger erhalten würden — die Outlook-Stufe erzwingt dieselben Conditional-Comment-Zweige, die ein echter Outlook-Client nehmen würde, sodass Sie den Fallback prüfen können, ohne selbst eine Outlook-Kopie zu besitzen. Ein Dunkelmodus-Schalter simuliert, wie die Live-Ansicht-Stufe im Dunkelmodus eines E-Mail-Clients aussehen würde.

Eine Zoom-Steuerung (50–150 % oder An Breite anpassen) skaliert die Arbeitsfläche, ohne das zugrunde liegende Design zu verändern.

Rückgängig, Wiederholen & Autospeichern

Jede Änderung am Design — einen Block ziehen, in ein Feld tippen, eine Farbe ändern — lässt sich mit Strg/Cmd+Z rückgängig machen (wiederholen: Umschalt+Strg/Cmd+Z oder Strg/Cmd+Y), auch innerhalb eines Textfelds. Schnelle Änderungen (einen Satz tippen, einen Regler ziehen) werden zu einem einzigen Rückgängig-Schritt zusammengefasst statt zu einem pro Tastendruck.

Das Studio speichert fortlaufend automatisch — es gibt keinen Speichern-Button, und das Schließen des Tabs verliert nichts; das Projekt öffnet sich beim nächsten Mal genau dort, wo Sie aufgehört haben. Wenn Sie und ein Teammitglied dasselbe Projekt gleichzeitig geöffnet haben, zeigt der zweite Speichervorgang ein Banner „Anderswo geändert“, statt den ersten stillschweigend zu überschreiben. Laden Sie neu, um die neueste Version zu übernehmen, oder nutzen Sie Als Kopie speichern, um Ihre Änderungen als neues Projekt zu behalten.

Theming

Das Theme-Panel legt eine Handvoll projektweite Tokens fest (Marken-, Akzent-, Text-, Gedämpft- und Hintergrund-Farbe, eine Schriftartenfamilie und den Standard-Eckenradius von Buttons), sodass ein Rebranding eine einzige Änderung statt der Suche nach jedem einzelnen Farbfeld eines Blocks ist. Ein Farbfeld kann eine Token-Referenz enthalten, dargestellt als Farbmuster-Auswahl neben dem üblichen Farbeingabefeld, oder eine eigene, feste Farbe. Blöcke, die mit einer Token-Referenz ausgeliefert werden — Buttons, Social-Icons, Absenden-Buttons von Formular/Quiz — passen sich automatisch an, wenn Sie das Token ändern, während jeder Block, bei dem Sie eine feste Farbe gesetzt haben, diese behält. Nicht themenfähig gestaltete Projekte werden genau wie zuvor gerendert; das Panel macht Markenfarben lediglich explizit, statt sie als kopierte Hex-Codes zu verstecken.

Mediathek

Manche Felder dienen ausschließlich dazu, ein Bild aufzunehmen: der Bild-Block, das Poster-/Cover-Bild eines Video-/Audio-Blocks, das Bild einer Karussell-Folie, das Vorder-/Rückseitenbild einer Karteikarte und das Foto des Produkt-Blocks. Diese zeigen im Inspektor eine Miniaturansicht und einen Button Bild wählen… statt eines URL-Felds. Ein Klick darauf öffnet ein Raster mit allem, was Sie bereits in Ihr Konto hochgeladen haben (nicht nur in dieses Projekt), mit einem direkt daneben liegenden Button Neu hochladen für PNG, JPEG, WebP oder GIF bis zu 5 MB. Wählen Sie eines aus, und es wird sofort in das Feld geschrieben, genau als hätten Sie eine URL eingetippt. Der Auswahldialog ist rein eine Komfortfunktion beim Erstellen — am Rendering des Blocks in der E-Mail, der Live-Ansicht oder der Arbeitsfläche ändert sich dadurch nichts.

Uploads werden über alle Projekte Ihres Kontos hinweg geteilt: Laden Sie ein Logo oder Produktfoto einmal hoch und nutzen Sie es überall dort, wo der Auswahldialog erscheint. Die vollständige Mediathek ist außerdem über Medien in der Dashboard-Navigation durchsuchbar, wo Sie Assets außerhalb eines bestimmten Projekts hochladen, ansehen und löschen können. Das Löschen eines Assets entfernt es nur aus der Mediathek — ein Block, der bereits dessen URL enthielt, rendert das Bild weiterhin, bis Sie es selbst gegen etwas anderes austauschen.

Speicherplatz wird auf das Kontingent Ihres Tarifs angerechnet (siehe Preise), angezeigt als Zähler neben Ihrer übrigen Nutzung in den Einstellungen. Manche Felder nehmen stattdessen einen Link statt eines Bildes entgegen — der optionale Tap-Through-Link einer Folie, die eigene Datei-src eines Video-/Audio-Blocks, die Beitritts-URL eines Meeting-Links. Diese bleiben schlichte URL-Felder: MailInApp speichert nur Bilder, keine Video-/Audiodateien oder beliebigen Seiten.

Wiederverwendbare Komponenten

Etwas gebaut, das sich lohnt, wiederzuverwenden — einen gestalteten Header, einen Coupon-Abschnitt, eine Produktreihe? Wählen Sie es aus, öffnen Sie den Tab Aktionen des Inspektors und wählen Sie Als Komponente speichern. Es wird in Ihrem Konto gespeichert (nicht nur in diesem Projekt) und erscheint fortan unter Meine Komponenten oben im Einfügen-Panel jedes Projekts. Ziehen oder klicken Sie, um eine frische, vollständig unabhängige Kopie einzufügen; benennen Sie die gespeicherte Komponente in derselben Liste um oder löschen Sie sie. Das unterscheidet sich von den integrierten Kompositionen des Abschnitts Vorgefertigt (siehe Interaktive Blöcke): Diese werden mit MailInApp für alle ausgeliefert, während eine gespeicherte Komponente Ihnen gehört und aus Ihren eigenen Designs entstanden ist.

Live-Ansicht

Der Toolbar-Button Live-Ansicht ↗ öffnet die gehostete Web-Version der E-Mail — eine vollständig interaktive Seite, gerendert aus Ihrem aktuellen Design. Sie ist zugleich ein Vorschau-Werkzeug für Sie und der universelle Fallback, den Empfänger erhalten, wenn ihr E-Mail-Client Interaktivität nicht darstellen kann. Der Link ist signiert und 30 Tage gültig; siehe Live-Ansicht-Links.

KI-gestützte Texte

Hängen Sie bei einer Betreffzeile fest? Klicken Sie auf ✨ Vorschlagen neben dem Betrefffeld auf der Versandseite. MailInApp entwirft einige Optionen, die sich am Namen des Projekts, seinem Zweck und einem kurzen Auszug des bestehenden Textes der E-Mail orientieren.

Vorschläge sind nur zum Anklicken und Übernehmen gedacht — nichts wird jemals automatisch in Ihr Projekt geschrieben. Vorschlagsanfragen werden auf das monatliche Kontingent Ihres Kontos angerechnet (siehe Preise), geteilt über alle Projekte und alle, die daran mitarbeiten. Zum Erstellen oder Bearbeiten der E-Mail selbst — nicht nur eines einzelnen Felds — siehe KI-Copilot.

Größenbudget

Gmail kappt Nachrichten, die größer als etwa 102 KB sind — und eine gekappte E-Mail verliert ihren <style>-Block, was jegliche CSS-Interaktivität stillschweigend deaktiviert. Das Studio verfolgt die kompilierte Größe Ihrer E-Mail während des Erstellens gegen dieses Budget und warnt Sie, bevor es zum Problem wird. Mehr dazu in Export & Versand.