Erstellung von E-Mail-Vorlagen
Nachdem Sie E-Mail-Vorlage erstellt haben verwenden Sie den visuellen Design-Bereich, um die Struktur- und Inhaltskomponenten in Ihrer E-Mail-Vorlage zu erstellen.
Hinzufügen von Struktur und Inhalten structure-content
-
Ziehen Sie zum Beginnen Ihres Inhaltsdesigns ein Element aus der Strukturen und legen Sie es auf der Arbeitsfläche ab.
Fügen Sie so viele Elemente aus Strukturen hinzu, wie Sie benötigen, und bearbeiten Sie die Einstellungen für jedes Element im Bereich auf der rechten Seite.
note tip TIP Wählen Sie die Komponente n:n Column aus, um die Anzahl der Spalten zu definieren (drei bis zehn). Sie können auch die Breite jeder Spalte definieren, indem Sie die Pfeile unter die Spalte verschieben. 
Die Größe einer Spalte darf nicht kleiner als 10 % der Gesamtbreite der Strukturkomponente sein. Nur leere Spalten können entfernt werden.
-
Erweitern Sie Abschnitt Inhalte“ und fügen Sie beliebig viele Inhaltskomponenten zu einer oder mehreren Strukturkomponenten hinzu.
-
Bei Bedarf können Sie auf den Registerkarten Einstellungen“ oder „Stil zusätzliche Anpassungen jede Komponente.
Sie können beispielsweise den Textstil, den Abstand oder den Rand jeder Komponente ändern.
-
Um bedingte Inhalte hinzuzufügen und den Inhalt auf der Grundlage von bedingten Regeln an die Zielprofile anzupassen, wählen Sie eine Inhaltskomponente aus und klicken Sie in der Komponenten Symbolleiste auf das Symbol Bedingten Inhalt aktivieren“.
Weitere Informationen finden Sie unter Bedingter Inhalt.
Hinzufügen von benutzerdefiniertem CSS
Sie können Ihr eigenes benutzerdefiniertes CSS direkt im Design-Bereich der E-Mail-Vorlage hinzufügen. Verwenden Sie benutzerdefiniertes CSS, um erweiterte und spezifische Stile anzuwenden, um die Flexibilität und Kontrolle über das Erscheinungsbild Ihrer Inhalte zu erhöhen. Es empfiehlt sich, diese Formatierung auf höchster Ebene hinzuzufügen, bevor Sie Komponenten wie Bilder, Schaltflächen und Text einbeziehen.
Wählen Sie bei mindestens einer Inhaltskomponente auf der Arbeitsfläche die Komponente Hauptteil in der linken Navigationsstruktur aus, um auf den benutzerdefinierten CSS-Editor zuzugreifen.
-
Klicken Sie auf der Stile Registerkarte, die auf der rechten Seite angezeigt wird, auf Benutzerdefiniertes CSS hinzufügen.
note note NOTE Die Schaltfläche Benutzerdefiniertes CSS hinzufügen ist nur verfügbar, wenn die Komponente Hauptteil ausgewählt ist. Sie können jedoch benutzerdefinierte CSS-Stile auf alle darin enthaltenen Komponenten anwenden. Der Benutzerdefinierte CSS hinzufügen Popup-Editor wird mit Platzhalter-Code-Kommentaren angezeigt.
-
Geben Sie Ihren CSS-Code im Editor ein.
Stellen Sie sicher, dass das benutzerdefinierte CSS gültig ist und der richtigen Syntax folgt. Wenn die eingegebene CSS-Datei ungültig ist, wird eine Fehlermeldung angezeigt und die CSS-Datei kann nicht gespeichert werden. Weitere Informationen finden Sie unter CSS-Gültigkeit.
-
Klicken Sie Speichern, um das benutzerdefinierte CSS zu speichern.
Das benutzerdefinierte Stylesheet wird auf den vorhandenen Inhalt angewendet. Sie können überprüfen, ob Ihr benutzerdefiniertes CSS Ihren Anforderungen entspricht. Informationen zum Vornehmen von Änderungen und Anpassen der Stylesheet-Anwendung finden Sie unter Fehlerbehebung.
Hinzufügen von Fragmenten
Ein visuelles Fragment ist eine wiederverwendbare Design-Komponente, die von mehreren Inhalts-Assets in Adobe Journey Optimizer B2B edition referenziert werden kann. Normalerweise handelt es sich dabei um einen Inhaltsblock, der vorab erstellt und schnell eingefügt werden kann, um das Authoring schneller und konsistenter zu machen.
Im folgenden Beispiel werden Schritte zum Hinzufügen von Fragmenten bei der Erstellung von Inhalten beschrieben.
-
Um die Fragmentliste zu öffnen, wählen Sie das Symbol Fragmente aus (
Sie haben folgende Möglichkeiten:
- Sortieren Sie die Liste.
- Durchsuchen, Suchen oder Filtern der Liste.
- Wechseln zwischen Miniatur- und Listenansicht.
- Aktualisieren Sie die Liste, um die kürzlich erstellten Fragmente anzuzeigen.
-
Ziehen Sie eines der Fragmente per Drag-and-Drop in die Strukturkomponente.
Der Editor rendert das Fragment innerhalb des Abschnitts/Elements der E-Mail-Struktur.
note tip TIP Um das Fragment so hinzuzufügen, dass es das gesamte horizontale Layout in der E-Mail einnimmt, fügen Sie eine 1:1-Spaltenstruktur hinzu und ziehen Sie das Fragment dann per Drag-and-Drop hinein. Der Inhalt des Fragments wird innerhalb der Struktur dynamisch aktualisiert, um anzuzeigen, wie der Inhalt in Ihrem Inhalt angezeigt wird.
Bearbeitbare Felder in anpassbaren Fragmenten
Ein visuelles Fragment kann bearbeitbare Felder enthalten, die Sie anpassen können. Mit benutzerdefinierten Feldern können Sie Parameter ändern, wenn Sie das Fragment in Ihren Inhalt integrieren und ein maßgeschneidertes Erlebnis erstellen, ohne das ursprüngliche Fragment zu beeinflussen. Der Fragmentautor kann das Fragment für die Anpassung entwerfen von Text-, Bild- und Schaltflächenkomponenten. Wenn ein eingeschlossenes Fragment Komponenten mit bearbeitbaren Feldern enthält, können Sie die Standardwerte ändern, um es für Ihren Inhalt anzupassen.
-
Wählen Sie die Fragmentkomponente aus.
Die auf der rechten Seite angezeigten Einstellungen enthalten bearbeitbare Felder mit den Standardwerten.
-
Ändern Sie jedes bearbeitbare Feld nach Bedarf.
Nachdem die Vorlage gespeichert wurde, wird sie auf der Seite mit den Fragmentdetails angezeigt, wenn Sie die Registerkarte Verwendet von in der Zusammenfassung auswählen.
Hinzufügen von Bild-Assets
Wählen Sie im Visual Content Editor das Symbol Marketo Engage Assets (
-
Fügen Sie ein neues Asset hinzu, indem Sie das Bild-Asset per Drag-and-Drop in eine Strukturkomponente ziehen.
-
Ersetzen Sie ein vorhandenes Bild-Asset, indem Sie es auf der Arbeitsfläche auswählen und Asset auswählen in den Bildquellen-Tools klicken.
Weitere Informationen zur Verwendung von Assets aus Ihrem Quelltyp finden Sie unter Verwenden von Assets für die Inhaltserstellung.
Navigieren in den Ebenen, Einstellungen und Stilen
Beim Arbeiten mit Inhalten im visuellen Design-Bereich können Sie über die Navigationsstruktur auf die Komponenten, Spalten und Inhaltselemente zugreifen. Klicken Sie links auf das Symbol Navigationsbaum
Im folgenden Beispiel werden Schritte zum Anpassen des Abstands und der vertikalen Ausrichtung innerhalb einer Strukturkomponente mit Spalten beschrieben.
-
Wählen Sie die Spalte in der Strukturkomponente direkt auf der Arbeitsfläche aus oder verwenden Sie den Navigationsbaum der links angezeigt wird.
-
Klicken Sie in der Spalten-Symbolleiste auf Spalte auswählen und wählen Sie das Tool aus, das Sie bearbeiten möchten.
Sie können sie auch aus dem Strukturbaum auswählen. Die bearbeitbaren Parameter für diese Spalte werden auf den Registerkarten Einstellungen und Stile auf der rechten Seite angezeigt.
-
Um die Spalteneigenschaften zu bearbeiten, klicken Sie auf die Stile Registerkarte auf der rechten Seite und ändern Sie sie entsprechend Ihren Anforderungen:
-
Für Hintergrund ändern Sie die Hintergrundfarbe nach Bedarf.
Deaktivieren Sie das Kontrollkästchen für einen transparenten Hintergrund. Aktivieren Sie die Hintergrundbild, um ein Bild anstelle einer Volltonfarbe als Hintergrund zu verwenden.
-
Wählen für das Symbol Oben, Mitte oder Unten aus.
-
Definieren für Abstand“ den Abstand für alle Seiten.
Wählen Sie Unterschiedliche Abstände für jede Seite aus, wenn Sie eine Feinabstimmung für den Abstand vornehmen möchten. Klicken Sie auf Sperrsymbol, um die Synchronisierung aufzuheben.
-
Erweitern Sie den Abschnitt Erweitert, um Inline-Stile für die Spalte zu definieren.
-
-
Wiederholen Sie bei Bedarf diese Schritte, um die Ausrichtung und den Abstand für die anderen Spalten in der Komponente anzupassen.
-
Speichern Sie Ihre Änderungen.
Personalisieren von Inhalten
Journey Optimizer B2B edition verwendet eine einfache Inline-Syntax, mit der Sie Ausdrücke mit personalisierten Inhalten erstellen können, die von geschweiften Klammern {} eingeschlossen sind. Sie können ohne Einschränkungen mehrere Ausdrücke in demselben Inhalt oder Feld hinzufügen.
Beispiele:
Hello {{lead.firstName}} {{lead.lastName}}Hello {%= lead.mktoName ?: "Marketer" %}
Bei der Verarbeitung des Inhalts ersetzt Journey Optimizer B2B edition den Ausdruck durch die in der Experience Platform-Datenbank enthaltenen Daten. Das erste Beispiel wird also Hallo, Max Mustermann.
Im folgenden Beispiel werden die Schritte zum Personalisieren von Inhalten mit Lead-/Kontoattributen und System-Token beschrieben.
-
Wählen Sie die Textkomponente aus und klicken Sie auf das Symbol Personalisierung hinzufügen in der Symbolleiste.
Dadurch wird das Dialogfeld Personalization bearbeiten geöffnet.
-
Fügen Sie ein Token hinzu, indem Sie auf das Pluszeichen ( + ) daneben klicken.
Wenn Sie das Token mit einem Fallback hinzufügen möchten (Standardtext, der angezeigt wird, wenn dieses Feld für einen Lead nicht verfügbar ist), klicken Sie auf das Symbol Mehr ( … ) und wählen Sie Mit Fallback-Text einfügen.
-
Fügen Sie alle zusätzlichen Token oder anderen statischen Text hinzu, die Sie einbeziehen möchten.
-
Klicken Sie auf Speichern.
Das Personalisierungsskript wird im visuellen Design-Bereich angezeigt. Sie können ihn auswählen, um bei Bedarf Änderungen vorzunehmen.
Verknüpftes URL-Tracking bearbeiten
-
Klicken Sie auf Links-Symbol (
-
Klicken Sie bei Bedarf auf das Symbol Bearbeiten (
Sie können auch Tags für einen Link hinzufügen.
Anwenden des Dunkelmodus-Stils
Verwenden Sie Dunkler Modus, um Ihre E-Mail-Anzeige auf ein dunkles Design in einem E-Mail-Client zu überprüfen. Ein Dunkelmodus oder Design ermöglicht es einem unterstützenden E-Mail-Client oder einer unterstützenden Mobile App, E-Mails mit dunkleren Hintergründen und helleren Farben für Text, Schaltflächen und andere visuelle Elemente anzuzeigen. Ändern Sie oben rechts auf der Design-Arbeitsfläche die Auswahl in Dunkler Modus (
Weitere Informationen zu Stilen und Best Practices für den Dunkelmodus finden Sie unter Dunkelmodus für E-Mail-Inhalte.
Optionen anzeigen
Nutzen Sie die Ansicht- und Inhaltsvalidierungsoptionen, die im visuellen Design-Bereich verfügbar sind.
-
Vergrößern/Verkleinern des Inhalts in allen vordefinierten Zoom-Optionen.
-
Wechseln der Anzeige von Inhalten zwischen Desktop, Mobilgerät oder Nur-Text-/Nur-Text-Ansicht.
- Klicken Sie auf das Auge-Symbol für die geräteübergreifende Inhaltsvorschau.
- Wählen Sie eines der standardmäßigen Geräte aus oder geben Sie benutzerdefinierte Dimensionen ein, um eine Vorschau des Inhalts anzuzeigen.
Mehr Optionen
Im Menü Mehr … oben im E-Mail-Design-Bereich können Sie die folgenden Aktionen ausführen:
- Vorlage zurücksetzen - Klicken Sie auf diese Option, um die Arbeitsfläche des Designs zu leeren und die Inhaltserstellung neu zu starten.
- Als Fragment speichern - Speichert die Vorlage ganz oder teilweise als Fragment zur Wiederverwendung in mehreren E-Mails oder E-Mail-Vorlagen. Geben Sie einen Namen und eine Beschreibung für das Fragment ein und speichern Sie es in der Liste der verfügbaren Fragmente.
- Design ändern - Kehren Sie zur Seite E-Mail gestalten zurück. Dort können Sie eine andere Vorlage auswählen, um den Design-Prozess neu zu starten. Sie können den Inhalt auch mit einer leeren Arbeitsfläche (Classic-Modus) oder mit einem Markendesign (Design-Modus) von Grund auf gestalten.
- HTML exportieren - Laden Sie den Inhalt auf der visuellen Arbeitsfläche in HTML im Format herunter, das als ZIP-Datei verpackt ist.