Inhalte mit der E-Mail-Designer von Grund auf gestalten content-from-scratch

Auf dieser Seite: Erfahren Sie, wie Sie E-Mail-Inhalte im E-Mail-Designer von Adobe Journey Optimizer von Grund auf neu erstellen können, indem Sie Strukturen und Inhaltskomponenten hinzufügen und dann Ihre E-Mails personalisieren und in der Vorschau anzeigen.

Verwenden Sie den E-Mail-Designer von Adobe Journey Optimizer, um die Struktur Ihrer Inhalte einfach zu definieren. Durch das Hinzufügen und Verschieben von strukturellen Elementen mit einfachem Drag-and-Drop können Sie Ihrer E-Mail in Sekundenschnelle die gewünschte Form verleihen.

NOTE
Die EU-Richtlinie zur Barrierefreiheit legt fest, dass jegliche digitale Kommunikation barrierefrei sein sollte. Beachten Sie beim Erstellen von Inhalten in Journey Optimizer die konkreten Richtlinien auf dieser Seite.

Gehen Sie wie folgt vor, um mit der Erstellung des Ihrers Inhalts zu beginnen:

  1. Wählen Sie auf der Startseite von Designer die Option Erstellen von neuen Inhalten aus.

    Bildschirm „E-Mail erstellen“ mit hervorgehobener Option „Inhalte von Grund auf neu erstellen“ sowie den Optionen „Eigenen Code schreiben“ und „HTML importieren“ und Beispielvorlagen darunter

  2. Verwenden Sie für einen schnellen Einstieg Module. Dies sind einsatzbereite, vordefinierte Inhaltsbausteine wie Kopf- und Fußzeilen, mit denen Sie die E-Mail-Erstellung beschleunigen und Ihre Kampagnen visuell konsistent halten können. Weitere Informationen zu Modulen

    E-Mail-Designer mit ausgewählter Registerkarte „Module“ im linken Bereich, in der Modulkategorien wie Kopfzeilen, Hero, Kundenreferenz, Karten, Teams und Fußzeilen aufgelistet sind

  3. Beginnen Sie anderenfalls die Gestaltung Ihres Inhalts, indem Sie Strukturen per Drag-and-Drop auf die Arbeitsfläche ziehen, um das Layout Ihrer E-Mail zu definieren.

    note tip
    TIP
    Alternativ können Sie die E-Mail-Erstellung mit „Inhalt generieren“ beschleunigen und vollständige E-Mail-Inhalte, einschließlich Text und Bildern, mit der Option Gesamten Inhalt mit KI generieren generieren. Sie können dann mit der Vorschau und Validierung Ihrer Inhalte fortfahren.
  4. Fügen Sie so viele Strukturen hinzu, wie benötigt werden, und bearbeiten Sie deren Einstellungen im entsprechenden Bereich auf der rechten Seite.

    E-Mail-Designer mit den verfügbaren Spalten-Layouts im Panel „Strukturen“ und hervorgehobenen Registerkarten „Einstellungen“ und „Stile“ im rechten Panel „Struktur“

    note
    NOTE
    Auf schmalen Bildschirmen (z. B. Mobilgeräten) werden Spalten zur besseren Lesbarkeit standardmäßig vertikal gestapelt. Einige E-Mail-Clients unterstützen dieses Verhalten nicht. In diesem Fall bleiben Spalten nebeneinander angeordnet. Sie können dies auch deaktivieren, indem Sie auf der Registerkarte Einstellungen den Umschalter Auf Mobilgeräten Spalten nicht stapeln verwenden.
  5. Die meisten Strukturen (1:1-Spalte, 2:2-Spalte, 1:2-Spalte links usw.) sind feste Voreinstellungen. Wählen Sie die Komponente n:n-Spalte aus, um eine beliebige Anzahl von Spalten zu definieren (3 bis 10).

    E-Mail-Designer mit der Registerkarte „Einstellungen“ für eine ausgewählte Strukturkomponente, wobei das Feld „Spaltenanzahl“ hervorgehoben ist

    Sie können die Spaltenanzahl einer vorhandenen Struktur jederzeit auf der Registerkarte Einstellungen erhöhen, auch nachdem Sie ihr Inhalte hinzugefügt haben. Ihre vorhandenen Inhalte werden beibehalten und gehen nicht verloren.

    Sie können die Breite der einzelnen Spalten auch direkt auf der Arbeitsfläche anpassen oder indem Sie die Prozentsätze auf der Registerkarte Einstellungen bearbeiten.

    note
    NOTE
    Die Größe einer Spalte muss immer mindestens 10 % der Gesamtbreite der Strukturkomponente betragen. Sie können nur leere Spalten entfernen.
  6. Fügen Sie aus dem Abschnitt Inhalte beliebig viele Elemente in eine oder mehrere Strukturkomponenten ein. Weitere Informationen zu Inhaltskomponenten

  7. Jede Komponente kann mithilfe der Registerkarten Einstellungen oder Stil im rechten Menü angepasst werden. Beispielsweise können Sie den Textstil, den Abstand oder den Rand jeder Komponente ändern. Erfahren Sie mehr über Ausrichtung und Abstand

    E-Mail-Designer mit hervorgehobenem Panel „Inhalte“ auf der linken Seite und hervorgehobener Registerkarte „Einstellungen“ für eine ausgewählte Bildkomponente auf der rechten Seite, in der die Felder für Bildquelle, Alt-Text und Link angezeigt werden

  8. Über die Asset-Auswahl können Sie direkt Assets auswählen, die in der Asset-Bibliothek gespeichert sind. Weitere Informationen über Asset-Management

    Klicken Sie doppelt auf den Ordner, der Ihre Assets enthält. Ziehen Sie sie per Drag-and-Drop in eine Strukturkomponente.

    Panel „Assets“ im E-Mail-Designer mit Dateien der Asset-Bibliothek und einem Bild, das auf die Arbeitsfläche gezogen wird

  9. Fügen Sie Personalisierungsfelder ein, um Ihren Inhalt aus Profilattributen, Zielgruppenzugehörigkeiten, Kontextattributen und mehr anzupassen. Weitere Informationen über die Personalisierung von Inhalten

    Textsymbolleiste im E-Mail-Designer mit Hervorhebung der Schaltfläche „Personalisierung hinzufügen“ über einem ausgewählten Textblock

  10. Klicken Sie auf Bedingten Inhalt aktivieren, um dynamischen Inhalt hinzuzufügen und den Inhalt auf der Grundlage von bedingten Regeln an die Zielprofile anzupassen. Erste Schritte mit dynamischen Inhalten

    Symbolleiste im E-Mail-Designer mit der Option „Bedingten Inhalt aktivieren“ über einem Textblock, der ein Personalisierungs-Token des Profils enthält

  11. Klicken Sie auf die Registerkarte Links im linken Bereich, um die Liste aller zu verfolgenden URLs Ihres Inhalts anzuzeigen. Sie können bei Bedarf deren Tracking-Typ oder das Label ändern und Tags hinzufügen. Erfahren Sie mehr über Links und Tracking

    Panel „Links“ im E-Mail-Designer mit einer Liste getrackter URLs einschließlich Label und Tracking-Typ sowie den erweiterten Details für einen ausgewählten Link

  12. Bei Bedarf können Sie Ihre E-Mail weiter personalisieren, indem Sie im erweiterten Menü auf Zum Code-Editor wechseln klicken. Auf diese Weise können Sie den E-Mail-Quell-Code bearbeiten, z. B. um Tracking- oder benutzerdefinierte HTML-Tags hinzuzufügen. Erfahren Sie mehr über den Code-Editor

    note caution
    CAUTION
    Nach dem Wechsel zum Code-Editor können Sie für diese E-Mail nicht mehr zum visuellen Designer zurückkehren.
  13. Sobald Ihr Inhalt fertig ist, verwenden Sie eine der Simulationsmethoden, um das Rendering zu überprüfen. Sie können zwischen der Desktop- oder der Mobil-Ansicht wählen. Detaillierte Informationen finden Sie im Abschnitt Content-Management.

    Arbeitsfläche des E-Mail-Designers mit hervorgehobener Schaltfläche „Inhalt simulieren“ in der oberen Symbolleiste

  14. Sie können auch die Qualität Ihrer Inhalte überprüfen, um die Lesbarkeit, die Effektivität und die Inhaltskohärenz zu bewerten. Weitere Informationen zur Validierung der Inhaltsqualität

  15. Wenn Ihre Inhalte fertig sind, klicken Sie auf Speichern.

    note
    NOTE
    Bei der automatischen Speicherung werden Ihre Änderungen nach etwa 10 Sekunden Inaktivität automatisch in der E-Mail-Designer gespeichert. Diese Funktion ist nur eingeschränkt verfügbar. Wenden Sie sich an den Adobe-Support, um Zugriff zu erhalten.
AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page explains how to design email content from scratch in the Email Designer by adding structure and content components, defining columns, personalizing, adding dynamic content and links, and previewing before saving.

Intents:

  • Start an email from the Design from scratch option and add structure components
  • Define the number and width of columns in a structure component
  • Add content components, personalization fields, and dynamic (conditional) content
  • Review and configure tracked links from the Links tab
  • Preview rendering with a simulation method and validate content quality
  • Switch to the code editor for advanced source editing

Glossary:

  • Design from scratch: The Designer home page option to start building content by adding structures and components (product-specific)
  • Structure components: Elements that define the layout of the email, added by drag and drop into the canvas (product-specific)
  • n:n column: A structure component whose number of columns can be defined between 3 and 10 (product-specific)
  • Switch to code editor: An advanced-menu option to edit the email source code (for example to add tracking or custom HTML tags) (product-specific)

Guardrails:

  • The n:n column component supports between 3 and 10 columns.
  • Each column size cannot be under 10% of the total width of the structure component.
  • You cannot remove a column that is not empty.
  • After switching to the code editor, you cannot revert back to the visual designer for that email.
  • Stacking columns is not compatible with all email programs; when not supported, columns will not be stacked.

Terminology:

  • Canonical name: Structure components — Acronym: n/a — variants: Structures, structure component
  • Synonyms: “Design from scratch” = starting content with no template
  • Do not confuse: “Structure components” (define layout) ≠ “Content components” (elements placed inside structures)
  • Do not confuse: “Settings tab” ≠ “Style tab” (both used to customize components)

FAQ:

  • Q: How many columns can a structure have? — Between 3 and 10, defined with the n:n column component.
  • Q: Can I make a column narrower than 10%? — No, each column size cannot be under 10% of the total width of the structure component.
  • Q: Can I go back to the visual designer after using the code editor? — No, you cannot revert back to the visual designer for that email after switching to the code editor.
  • Q: How do I check rendering before saving? — Use either simulation method to check rendering, choosing the desktop or mobile view.
  • Q: Where do I manage tracked links? — In the Links tab from the left pane, where you can modify Tracking Type or Label and add Tags.
recommendation-more-help
journey-optimizer-help