Existierenden Inhalt mit Creative Designer bearbeiten

Um die Bearbeitungsmöglichkeiten von Creative Designer vollständig nutzen zu können, muss Ihre hochgeladene HTML-Datei bestimmte Tags enthalten, damit sie mit dem WYSIWYG-Editor kompatibel ist.

Wenn die gesamte HTML-Datei oder Teile davon diese Tags nicht besitzt, wird der Inhalt im Kompatibilitätsmodus geladen.

Hinweis:

Die standardmäßigen Inhaltsvorlagen in Adobe Campaign werden derzeit nicht vollständig von Creative Designer unterstützt, da sie diese Tags nicht enthalten.

Es gibt zwei Möglichkeiten, um eine Adobe-Campaign-Vorlage oder einen existierenden externen Inhalt in Creative Designer vollständig bearbeitbar zu machen:

Hinweis:

Adobe empfiehlt die erste Option, da diese rascher ist und keine spezifischen technischen Kenntnisse erfordert. Die zweite Option ist nur für erfahrene Benutzer geeignet.

Sie können auch einen Versand mit Creative Designer erstellen, HTML-Code aus der ursprünglichen E-Mail unter Verwendung von HTML-Inhaltskomponenten einkopieren und diese nach Bedarf anpassen. Weiterführende Informationen dazu finden Sie im Abschnitt Über Inhaltskomponenten.

Doch ebenso wie im Kompatibilitätsmodus sind die Bearbeitungsmöglichkeiten von HTML-Komponenten beschränkt. Wenn Sie eine E-Mail mit HTML-Inhaltskomponenten erstellen, können Sie nicht alle Bearbeitungsfunktionen von Creative Designer verwenden.

Verwendung von Fragmenten und Komponenten zur Erstellung von in Creative Designer unterstützten Inhalten

Um die Kompatibilität von externem Inhalt mit Creative Designer zu gewährleisten, empfiehlt Adobe, einen neuen Versand zu erstellen und den Inhalt aus der existierenden E-Mail in Fragmente und Komponenten hinzuzufügen.

Weiter unten finden Sie ein Beispiel dafür.

Hinweis:

Der neue Inhalt ist keine exakte Kopie der ursprünglichen E-Mail, aber mithilfe der unten stehenden Schritte können Sie eine Nachricht erstellen, die dem Original möglichst ähnelt.

Nehmen wir an, Sie möchten einen vorhandenen Newsletter verwenden, der außerhalb von Adobe Campaign erstellt wurde:

des_newsletter_example

Sie möchten in allen mit Adobe Campaign versendeten E-Mails dieselbe Kopf- und Fußzeile verwenden. Der Textkörper der E-Mail ändert sich entsprechend dem jeweiligen Inhalt des Newsletters.

Voraussetzungen

  1. Stellen Sie fest, welche Bereiche Ihrer ursprünglichen E-Mail Sie in späteren E-Mails wiederverwenden möchten.

  2. Speichern Sie alle Bilder und Assets, die Sie verwenden möchten.

  3. Wenn Sie ausreichende HTML-Kenntnisse haben, teilen Sie Ihren ursprünglichen HTML-Inhalt in unterschiedliche Teile auf.

Fragmente für den wiederverwendbaren Inhalt erstellen

Erstellen Sie mit Creative Designer für jeden wiederverwendbaren Bereich ein Fragment. Für unser Beispiel brauchen wir zwei Fragmente: eines für die Kopfzeile und eines für die Fußzeile. Kopieren Sie dann die entsprechenden Teile aus dem existierenden Inhalt in diese Fragmente.

Gehen Sie dazu wie folgt vor:

  1. Gehen Sie in Adobe Campaign zu Ressourcen > Inhaltsvorlagen und -fragmente und erstellen Sie ein Fragment für die Kopfzeile. Weiterführende Informationen dazu finden Sie im Abschnitt Inhaltsfragment erstellen.

  2. Fügen Sie beliebig viele Strukturkomponenten zu diesem Fragment hinzu.

    des_loading_compatible_fragment_1
  3. Fügen Sie Bild- und Textkomponenten in Ihre Struktur ein.

    des_loading_compatible_fragment_2
  4. Laden Sie das entsprechende Bild hoch, geben Sie Ihren Text ein und passen Sie die Einstellungen an.

    Weiterführende Informationen zur Verwaltung von Stileinstellungen und Inline-Attributen finden Sie im Abschnitt E-Mail-Stile bearbeiten.

    des_loading_compatible_fragment_3
  5. Speichern Sie Ihr Fragment.

  6. Gehen Sie bei der Erstellung der Fußzeile analog vor und speichern Sie sie.

    des_loading_compatible_fragment_4

    Wenn Sie HTML-Kenntnisse haben, können Sie den HTML-Code mit der HTML-Inhaltskomponente aus der Original-Fußzeile kopieren und einfügen. Weiterführende Informationen dazu finden Sie im Abschnitt Über Inhaltskomponenten.

    des_loading_compatible_fragment_9

Ihre Fragmente können jetzt in einer Vorlage verwendet werden.

Fragmente und Komponenten in eine Vorlage einfügen

Sie können jetzt mit Creative Designer eine E-Mail-Vorlage erstellen. Mit Inhaltskomponenten können Sie die unterschiedlichen Bereiche der E-Mail gestalten und die Einstellungen so anpassen, dass das Ergebnis möglichst dem ursprünglichen Newsletter entspricht. Fügen Sie schließlich die soeben von Ihnen erstellten Fragmente ein.

  1. Erstellen Sie mit Creative Designer eine Vorlage. Weiterführende Informationen dazu finden Sie im Abschnitt Inhaltsvorlagen.

  2. Fügen Sie mehrere Strukturkomponenten in die Vorlage ein, die der Kopfzeile, Fußzeile und dem Textkörper Ihrer E-Mail entsprechen. Weiterführende Informationen zum Hinzufügen von Strukturkomponenten finden Sie im Abschnitt Die E-Mail-Struktur mit Creative Designer bearbeiten.

  3. Fügen Sie so viele Inhaltskomponenten ein, wie Sie für die Erstellung Ihres Newsletters benötigen. Diesen Inhalt werden Sie in Ihrer E-Mail jeden Monat aktualisieren können.

    des_loading_compatible_fragment_5

    Wenn Sie HTML-Kenntnisse besitzen, empfiehlt Adobe HTML-Komponenten für komplexe Elemente der ursprünglichen E-Mail zu verwenden und diese zu kopieren und einzufügen. Für den restlichen Inhalt können Sie andere Komponenten wie Schaltfläche, Bild oder Text verwenden. Weiterführende Informationen dazu finden Sie im Abschnitt Über Inhaltskomponenten.

    Hinweis:

    Mit der HTML-Komponente können Komponenten erstellt werden, die beschränkte Bearbeitungsmöglichkeiten bieten. Wählen Sie diese Komponente nur aus, wenn Sie mit der Handhabung von HTML-Code vertraut sind.

  4. Passen Sie die Inhaltskomponenten so an, dass sie der ursprünglichen E-Mail möglichst ähnlich sind.

    des_loading_compatible_fragment_6

    Weiterführende Informationen zur Verwaltung von Stileinstellungen und Inline-Attributen finden Sie im Abschnitt E-Mail-Stile bearbeiten.

  5. Fügen Sie die zwei Fragmente (Kopf- und Fußzeile) ein, die Sie zuvor in der gewünschten Strukturkomponente erstellt haben.

    des_loading_compatible_fragment_10
  6. Speichern Sie Ihre Vorlage.

Sie können diese Vorlage jetzt in Creative Designer vollständig verwalten und damit einen Newsletter erstellen, aktualisieren und monatlich an Ihre Empfänger senden.

Erstellen Sie dazu eine E-Mail und wählen Sie die soeben von Ihnen erstellte Inhaltsvorlage aus.

des_loading_compatible_fragment_7

Verwandtes Thema:

HTML-Tags zur Gewährleistung der Kompatibilität mit Creative Designer

Creative Designer nutzt spezielles Tagging. Standard-HTML-Inhalt, der in Adobe Campaign geladen wird, muss diesem Tagging entsprechen, um vollständig kompatibel und bearbeitbar zu sein.

In diesem Abschnitt werden die Hierarchie und die Attribute beschrieben, die erforderlich sind, damit eine Vorlage oder anderer Inhalt mit Creative Designer kompatibel ist.

DOM-Hierarchie

Verwenden Sie folgende DOM-Hierarchie:

<HTML>
│
└─ <BODY>
  |
  └─ <DIV> Main container [1]
    |
    └─ <DIV> Structure [2]
      |
      └─ <TABLE> Structure table [3]
        |
        └─ <TBODY>
          |
          └─ <TR>
            |
            └─ <TH> Structure column [4]
              |
              └─ <DIV> Fragment/component container [5]
                |
                └─ <DIV> Fragment/component content wrapper [6]
                  |
                  └─ <DIV> Fragment/component content [7]

Namen der CSS-Klasse

Verwenden Sie in der oben beschriebenen DOM-Hierarchie die folgenden Namen für CSS-Klassen:

  • Container – im Hauptknoten&lt;div&gt; [1]: definiert das erste Container-Element des Inhalts.

  • structure – in einem &lt;div&gt;-Knoten [2]: definiert einen Knoten als einen Struktur-Container.

  • structure__table – in einem &lt;table&gt;-Knoten [3]: definiert einen Knoten als einen Tabellenstruktur-Wrapper.

  • colspan1 / colspan2 / colspan3 / colspan4 – in einem &lt;th&gt;-Knoten [4]: definiert die Anzahl der Spalten, aus denen eine Struktur bestehen soll.

  • fragment – in einem &lt;div&gt;-Knoten [5]: definiert einen Knoten als ein Fragment.

  • component – in einem &lt;div&gt;-Knoten [5]: definiert einen Knoten als eine Komponente.

  • button-container – in einem &lt;div&gt;-Knoten [6]: Name der Schaltflächenkomponenten-Wrapper-Klasse.

  • text-container – in einem &lt;div&gt;-Knoten [6]: Name der Textkomponenten-Wrapper-Klasse.

  • image-container – in einem &lt;div&gt;-Knoten [6]: Name der Bildkomponenten-Wrapper-Klasse.

  • divider-container – in einem &lt;div&gt;-Knoten [6]: Name der Divisorkomponenten-Wrapper-Klasse.

Datenattribute

Verwenden Sie in der oben beschriebenen DOM-Hierarchie die folgenden Datenattribute:

  • data-structure-id – in einem structure &lt;div&gt;-Knoten [2]: definiert die Kennung der Struktur entsprechend der Spaltenanordnung.

    Mögliche Werte: 1-1-Spalte | 1-2-Spalte | 1-3-Spalte | 2-1-Spalte | 2-2-Spalte | 3-1-Spalte | 3-3-Spalte | 4-4-Spalte

  • data-structure-name – in einem structure &lt;div&gt;-Knoten [2]: definiert den Namen der Struktur. Der Namensraum lautet richtext.

    Beispiel: richtext.structure_1_1_column

  • data-component-id – in einem component &lt;div&gt;-Knoten [5]: definiert die Kennung einer Komponente.

    Mögliche Werte: Schaltfläche | Bild | Text | Divisor | Sozial | Karussell

  • data-component-name – in einem component &lt;div&gt;-Knoten [5]: definiert den Namen der Komponente. Der Namensraum lautet richtext.

    Beispiel: richtext.component_button

Sonstige Attribute

  • contenteditable – in einem component wrapper &lt;div&gt;-Knoten [6]: ermöglicht die Bearbeitung der Komponente (für Textkomponenten).

    Mögliche Werte: true | false

    Hinweis:

    Der component-Container-Knoten ([5]) sollte das Attribut contenteditable="false" enthalten.

DOM-Beispiel

<html>
  <head></head>
  <body>
    <divclass="container">
      <divclass="structure"data-structure-id="1-1-column"data-structure-name="richtext.structure_1_1_column">
        <tableclass="structure__table"align="center">
          <tbody>
            <tr>
              <thclass="colspan1" >
                <divclass="fragment component"data-component-id="button"data-component-name="richtext.component_button"contenteditable="false">
                  <divcontenteditable="true"class="button-container">
                    <ahref="#">Button</a>
                  </div>
                </div>
              </th>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie