Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung |
de:e_mail_builder [2023/03/30 18:22] – [Editor] fw | de:e_mail_builder [2025/04/09 10:10] (aktuell) – bk |
---|
====== Wie erstelle ich ein Creative mit dem E-Mail-Builder? ====== | ====== Wie erstelle ich ein Creative mit dem E-Mail-Builder? ====== |
| |
Der E-Mail-Builder ist ein Template, welches Ihnen nahezu unbegrenzte Möglichkeiten der Newsletter-Gestaltung bietet. Ganz ohne Programmierkenntnisse können Sie Ihren Newsletter flexibel gestalten und dabei auf verschiedene Design-Vorlagen zurückgreifen. Auch die Vorlagen können Sie komplett verändern, daher ist es am Anfang einfacher, wenn Sie mit einer Vorlage starten. | Der E-Mail-Builder ist ein Template, welches Ihnen nahezu unbegrenzte Möglichkeiten der Newsletter-Gestaltung bietet. Ganz ohne Programmierkenntnisse können Sie Ihren Newsletter flexibel gestalten und dabei auf verschiedene Design-Templates zurückgreifen. Sie können diese komplett verändern, daher ist es am Anfang einfacher, wenn Sie mit einem Template starten. |
| |
| Der E-Mail-Builder bietet verschiedene Gestaltungsmöglichkeiten hinsichtlich: |
| |
| * Konfiguration: Farben, Rahmen, Hintergründe, Schriftgrößen u.v.m. |
| * Elemente: Header, Editorial, Inhaltsverzeichnis, Text-/Bildelemente, Links, Social Media-Verknüpfung. |
| |
| Neu erstellte E-Mails können als wiederverwendbare Templates abgespeichert werden. |
| |
| |
===== Creative erstellen ===== | ===== Creative erstellen ===== |
| |
Wählen Sie beim Erstellen eines neuen Creatives die E-Mail-Vorlage "E-Mail Builder". Sie können nun aus einer der vorhandenen Vorlagen wählen, in denen bereits Styles und Artikel beispielhaft eingebunden sind, oder ein leeres Creative erstellen. | Wählen Sie beim Erstellen eines neuen Creatives das E-Mail-Template "E-Mail Builder". Sie können nun aus einem der vorhandenen Templates wählen, in denen bereits Styles und Artikel beispielhaft eingebunden sind, oder ein leeres Creative erstellen. |
| |
{{:de:delivery_create_emailbuilder.png?nolink&500|}} | {{:de:delivery_create_emailbuilder.png?nolink&500|}} |
| |
Durch Klick auf //OK// haben Sie einen neuen Newsletter mit dem E-Mail-Builder angelegt! Nun können Sie das Design und die Inhalte der Vorlage anpassen - nach Klick auf "Creative editieren" gelangen Sie in den Editor. | Durch Klick auf //OK// haben Sie einen neuen Newsletter mit dem E-Mail-Builder angelegt! Jetzt können Sie das Design und die Inhalte des Templates anpassen – nach Klick auf "Creative editieren" gelangen Sie in den Editor. |
| |
| |
| |
| |
* **Einstellungen**: Folgende Speicheroptionen sind möglich: | * **Einstellungen**: Die folgenden Speicheroptionen sind möglich. Entwickler von E-Mail Templates können mittels dieser Einstellungen das Verhalten des E-Mail-Editors steuern (vgl. Abschnitt "Config Tags" im Artikel //[[en:otml]]//). |
* **CSS in Inline CSS umwandeln**: Option ist standardmäßig aktiviert. Im Quellcode werden global definierte CSS Stylesheets "inline" in die betreffenden Tags des //body// geschrieben. Dies kann insbesondere die Anzeige der E-Mail in E-Mail-Clients verbessern, die globales CSS ignorieren. | * **CSS in Inline CSS umwandeln**: Option ist standardmäßig aktiviert. Ein im Quellcode definiertes CSS Stylesheet wird "inline" in die betreffenden Tags des //body// geschrieben. Dies kann insbesondere die Anzeige der E-Mail in E-Mail-Clients verbessern, die CSS Stylesheets ignorieren. |
* **Speicherfehler ignorieren**. Diese Option ist standardmäßig deaktiviert. | * **Speicherfehler ignorieren**: Option ist standardmäßig deaktiviert. Vor dem Speichern werden im Quellcode enthaltene Fehler, z.B. Syntaxfehler, angezeigt. |
* **Verwendeter CSS Inliner**. Zwei mögliche Versionen: | * **Verwendeter CSS Inliner**: Wahl des CSS Inliners, der bei Aktivierung der Option "CSS in Inline CSS umwandeln" verwendet wird: |
* Standard. Diese Option ist standardmäßig aktiviert. Hier sind gestackte oder kommaseparierte Selektoren nicht möglich. | * Standard: Option ist standardmäßig aktiviert. Diese Version kann ausschließlich einzelne, nicht durch Kommas getrennte Selektoren übertragen. |
* Next Generation. Diese Version des Inliners verarbeitet auch gestackte Selektoren und kommaseparierte Selektoren, z.B. <code html>.classname a { | * Next Generation: Diese Version des Inliners verarbeitet im Vergleich zur Standard-Version auch gestackte sowie kommaseparierte Selektoren, z.B. <code html>.classname a { |
color: #000000; | color: #000000; |
} | } |
.class1, class2 { | .class1, class2 { |
padding: 10px; | padding: 10px; |
}</code>[[https://servicewiki.promio-connect.com/doku.php/en:otml#values_for_cssinlinetype|Weiteres]] | }</code> |
* **Änderungen zurücksetzen**: Hier können Sie Änderungen, die noch nicht gespeichert sind, wieder zurücksetzen. | * **Änderungen zurücksetzen**: Hier können Sie Änderungen, die noch nicht gespeichert sind, wieder zurücksetzen. |
* **Speichern**: Zwischenspeichern. | * **Speichern**: Speichern, ohne den Editor zu verlassen. |
* **Speichern & verlassen**: Speichern mit Wechsel in die Creative Einstellungen. | * **Speichern & verlassen**: Speichern mit Wechsel in die Creative Einstellungen. |
| |
* **Layout-Aktionen anzeigen**: Aktionen zum Einfügen, Kopieren, Verschieben, Löschen von Layouts ein-/ausblenden. | * **Layout-Aktionen anzeigen**: Aktionen zum Einfügen, Kopieren, Verschieben, Löschen von Layouts ein-/ausblenden. |
* **Titel editieren**: Titel (title-Tag im head) eines Creatives vom Format HTML bearbeiten. Voraussetzung: title-Tag muss im zugrundeliegenden Mastertemplate enthalten sein. Platzhalter von den Typen field oder function können verwendet werden. | * **Titel editieren**: Titel (title-Tag im head) eines Creatives vom Format HTML bearbeiten. Voraussetzung: title-Tag muss im zugrundeliegenden Mastertemplate enthalten sein. Platzhalter von den Typen field oder function können verwendet werden. |
* **Pre-Header editieren**: Hier können Sie einen Preheader für Ihr Creative erstellen und bearbeiten. | * **Pre-Header editieren**: Hier können Sie einen Pre-Header für Ihr Creative erstellen und bearbeiten. |
* **CSS editieren**: Konfigurieren Sie das Design Ihres Newsletters. | * **CSS editieren**: Konfigurieren Sie das Design Ihres Newsletters. |
| |
{{:de:delivery_drafts_emailbuilder_layout.png?nolink&600|}} | {{:de:delivery_drafts_emailbuilder_layout.png?nolink&600|}} |
| |
Durch Klick auf den Button //Layout einfügen// können Sie Design und Inhalte der Vorlage anpassen, indem Sie aus den Bausteinen auf der linken Seite auswählen: | Durch Klick auf den Button //Layout einfügen// können Sie Design und Inhalte des Temlpates anpassen, indem Sie aus den Bausteinen auf der linken Seite auswählen: |
| |
{{:de:delivery_drafts_emailbuilder_repeater1.png?direct&400|}} | {{:de:delivery_drafts_emailbuilder_repeater1.png?direct&400|}} |
==== Layout bearbeiten ==== | ==== Layout bearbeiten ==== |
| |
Im Editor können Sie Vorlagen auswählen, Bilder austauschen, eine Personalisierung vornehmen und vieles mehr: | Im Editor können Sie Templates auswählen, Bilder austauschen, eine Personalisierung vornehmen, Texte mithilfe von KI übersetzen, erweitern, kürzen oder umformulieren und vieles mehr: |
| |
{{:de:delivery_drafts_emailbuilder_editorial_text.png?direct&400|}} | {{:de:delivery_drafts_emailbuilder_editorial_text.png?direct&400|}} |
{{:de:drafts_mediabrowser_button.png?direct&400|}} | {{:de:drafts_mediabrowser_button.png?direct&400|}} |
| |
| Über den Bildeditor können Sie über verschiedene Wege Bilder einfügen, entfernen und verlinken: |
| |
| {{:de:delivery_drafts_mediabrowser_picture_editor.png?direct&400|}} |
| |
| | //Link hinzufügen//: | Ein Bild verlinken \\ | |
| | //Ersetzen (Upload)//: | Ein Bild via drag & drop einfügen oder vom Rechner hochladen \\ | |
| | //Ersetzen: (Media Browser)//: | Ein Bild, das zuvor im Media Browser hochgeladen wurde, von dort aus einfügen \\ | |
| | //Ersetzen (AI)//: | Ein Bild durch die Eingabe einer englischen Beschreibung generieren \\ | |
| | //Bild entfernen//: | Ein eingefügtes Bild wieder entfernen \\ | |
| | //Eintrag im Inhaltsverzeichnis zufügen//: | Das Bild dem Inhaltsverzeichnis zufügen bzw. entfernen \\ | |
| |
==== Footer ==== | ==== Footer ==== |
| |
Datenschutzrechtlich ist der Footer das wichtigste Element Ihres Newsletters. Benutzen Sie eine Design-Vorlage und ändern Sie sämtliche Daten ab. | Datenschutzrechtlich ist der Footer das wichtigste Element Ihres Newsletters. Benutzen Sie ein Design-Template und ändern Sie sämtliche Daten ab. |
<WRAP round important 70%> | <WRAP round important 70%> |
Achten Sie darauf, dass Ihre Firmen-Informationen und der Abmeldelink in jedem Ihrer Newsletter enthalten sind! Sie dürfen kein Mailing ohne Abmeldemöglichkeit versenden! | Achten Sie darauf, dass Ihre Firmen-Informationen und der Abmeldelink in jedem Ihrer Newsletter enthalten sind! Sie dürfen kein Mailing ohne Abmeldemöglichkeit versenden! |
==== Konfiguration ==== | ==== Konfiguration ==== |
| |
Haben Sie eine Vorlage gewählt, finden Sie in der Konfiguration verschiedene Menüpunkte, durch welche Sie das Layout des Creatives verändern können. | Haben Sie ein Template gewählt, finden Sie in der Konfiguration verschiedene Menüpunkte, durch welche Sie das Layout des Creatives verändern können. |
Klicken Sie auf "CSS editieren". Hier können Sie das Grunddesign Ihres Newsletters anpassen. Unter den Reitern finden Sie Einstellungsmöglichkeiten, um Schriftfarben, Größen usw. anzupassen. Wenn Sie z.B. auf Artikel > Text klicken, können Sie die Schrifteinstellungen des Artikeltexts anpassen. \\ \\ | Klicken Sie auf "CSS editieren". Hier können Sie das Grunddesign Ihres Newsletters anpassen. Unter den Reitern finden Sie Einstellungsmöglichkeiten, um Schriftfarben, Größen usw. anzupassen. Wenn Sie z.B. auf Artikel > Text klicken, können Sie die Schrifteinstellungen des Artikeltexts anpassen. \\ \\ |
{{:de:delivery_drafts_emailbuilder_css_editor.png?nolink&400|}} | {{:de:delivery_drafts_emailbuilder_css_editor.png?nolink&400|}} |
E-Mails, die mit dem E-Mail-Builder erstellt wurden, werden als Multipart verschickt und enthalten eine automatisch generierte Textversion, welche neben den Texten aus den Artikeln selbstverständlich auch das Impressum und die Abmeldeinformationen enthält. Sie können sich die Textversion in der Vorschau unter dem Reiter "Textversion" ansehen. | E-Mails, die mit dem E-Mail-Builder erstellt wurden, werden als Multipart verschickt und enthalten eine automatisch generierte Textversion, welche neben den Texten aus den Artikeln selbstverständlich auch das Impressum und die Abmeldeinformationen enthält. Sie können sich die Textversion in der Vorschau unter dem Reiter "Textversion" ansehen. |
| |
{{tag>CSS_Editor Templates E-Mail-Builder }} | Ein Tutorial zum Erstellen von Creatives finden Sie hier: \\ |
| <html> |
| <iframe class="md-youtube-embed" width="560" height="315" src="https://www.youtube-nocookie.com/embed/7tjSCfMVr2o?si=DbGrKD0QgLFOQoyU&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> |
| </html> |
| |
| {{tag>CSS_Editor Templates E-Mail-Builder Textgenerierung KI }} |
| |
| |