Smart Content – E-Mail-Grafikeditor

„E-Mail“ Smart Content bietet einen E-Mail-Grafikeditor zum Erstellen von Smart Content auf visuelle Weise.

Der E-Mail-Grafikeditor besteht aus 4 Hauptabschnitten:

  • Links befinden sich Schaltflächen zum Hinzufügen von Objekten auf dem Bereich und Definieren ihrer Einstellungen.

  • In der Mitte befindet sich der Bereich, auf dem Sie Ihren Entwurf durchführen.

  • Rechts kann eine Vorschau dargestellt werden, um das tatsächliche Ergebnis Ihres Entwurfs zu validieren.

  • Oben sind Aktionsschaltflächen für den Design-Bereich und für die Vorschau verfügbar.

Sie können Objekte zum Bereich hinzufügen, wie Quadrat-, Kreis- und Dreieckformen, Katalog- und lokale Bilder und statische und Katalogtexte.

Die folgenden Einstellungen können definiert werden:
- Bereichseinstellungen
- Texteinstellungen
- Layout Einstellungen
- Bildeinstellungen

Außerdem können Constraint Builder-Regeln eingestellt werden, um Objekte ein-/auszublenden.

Die Aktionsschaltflächen, die oben zu sehen sind, werden im unteren Abschnitt dieser Seite erklärt.

Hinweis:
Sie können mit der rechten Maustaste auf den Bereich klicken, um ein Kontextmenü anzuzeigen, über das Sie schnell auf die folgenden Aktionen zugreifen können:
- Rasterlinien umschalten
- Anheften von Objekten umschalten
- Objekt auf vorne/hinten einstellen
- Änderungen rückgängig machen
- ausgewähltes Objekt klonen/löschen
- neues Objekt zum Bereich hinzufügen


 

Objekte zum Bereich hinzufügen


Es gibt mehrere Möglichkeiten, Objekte zum Bereich hinzuzufügen:

  • durch Klicken auf die Objektschaltfläche
  • durch Klicken und Ziehen der Objektschaltfläche auf den Bereich
  • durch Rechtsklick auf den Bereich und Auswählen des Objekts aus dem Kontextmenü, das angezeigt wird

Die verschiedenen verfügbaren Objekte sind:

  • Quadrat – fügt eine quadratische Form auf dem Design-Bereich hinzu.

  • Kreis – fügt eine Kreisform auf dem Design-Bereich hinzu.

  • Dreieck – fügt eine dreieckige Form auf dem Design-Bereich hinzu.

  • Bild – fügt ein Katalog- oder ein lokales Bild auf dem Design-Bereich hinzu.

    Wählen Sie nach Auswahl des Bildobjekts „Katalog“ oder „Lokales Bild“ als Bildtyp.
    Je nach Ihrer Auswahl erscheinen die folgenden Einstellungen.
    • Katalogbild — Dies ist ein Platzhalter zum Definieren von Ort und Größe des Katalogbilds, das von Smart Content erzeugt wird. Die Bild-URL muss in den Bild-Einstellungen ausgewählt werden.
      Das eigentliche Bild wird durch den in der Smart Content-Konfiguration gewählten Algorithmus wiedergegeben.
      Im Bereich sieht das Katalogbild-Objekt wie folgt aus :
    • Lokales Bild — Durch Klicken auf die Schaltfläche „Bild hochladen“ und Auswählen einer lokalen Datei können Sie ein neues Bild hochladen.
      Klicken Sie auf die Schaltfläche „+ Zum Bereich hinzufügen“, um das Bild zum Bereich hinzuzufügen.

    Hinweis 1: Die maximale Bilddateigröße beträgt 200 kB.
    Hinweis 2: Die maximale Menge lokaler Bilder, die auf dem Bereich wiedergegeben werden können, ist auf 5 eingestellt. Sie erhalten eine Fehlermeldung, wenn diese Grenze überschritten wird.



  • Text — fügt statischen oder Katalogtext (oder eine Kombination aus beidem) auf dem Design-Bereich hinzu.


    • Statischer Text – Nach Auswählen des Textobjekts werden die Einstellungen für die Texteingabe angezeigt. Text kann im Rich-Text-Editor(1) hinzugefügt und Stile können angewandt werden.

      Die verfügbaren Textstile sind: durchgestrichen, unterstrichen, Schriftfarbe, Schriftartfamilie und Schriftgröße.
      Rechts ermöglicht das Tx-Symbol das Entfernen des angewandten Textstils (Text vor Klicken auf dieses Symbol markieren).

      • Stile können auf zwei Arten angewandt werden:
      1. Stellen Sie zuerst die Stilwerte ein und beginnen Sie dann mit der Eingabe (der Stil wird auf den gesamten Text angewandt).
      2. Markieren Sie den vorhandenen Text, auf den Sie den Stil anwenden möchten, und wählen Sie dann den Stil aus (auf diese Weise können Sie verschiedene Stile auf verschiedene Textteile anwenden).

    • Katalogtext – Sie können einen Katalogparameter aus dem Dropdown auswählen.

      • Durch Klicken auf das +-Zeichen kann ein Katalogparameter zum Text hinzugefügt werden.

      Im Rich-Text-Editor können Textstile auf dieselbe Weise wie für statischen Text angewandt werden (siehe oben). (1)

      Hinweis: Wenn Sie einen Textstil auf einen vorhandenen Katalogparameterwert anwenden möchten, achten Sie darauf, den gesamten Wert einschließlich Klammern zu markieren.


      (1) Hinweis: In der anfänglichen Version enthielt der E-Mail-Grafikeditor einen einfachen Texteditor. Da dies inzwischen ein Rich-Text-Editor ist, fordern früher erstellte Textplatzhalter Sie jetzt auf, sie neu zu erstellen, sodass sie im aktualisierten Texteditor als Rich Text verwendet werden können.

      „Alte“ Textobjekte (ohne Rich Text) sind in Ihrem vorhandenen, vorher erstellten E-Mail Smart Content noch sichtbar, aber alle Stile und Texteigenschaften sind deaktiviert.

      Im Design-Bereich können Sie „alte“ und „neue“ Textobjekte durch Auswählen und Suchen des entsprechenden Objektnamens im Dropdown unter dem Design-Bereich identifizieren.
      - „text_id“ bedeutet „alt“ (kein Rich Text)
      - „richtext_id“ bedeutet „neu“



      Beispiel eines Textwerts mit kombiniertem statischem Text „SALE –“ und einem Katalogparameter „{{ availability }}“ :


      Es ist außerdem möglich, Funktionen für Formatierungszwecke zu verwenden.
      Diese können aus dem zweiten Dropdown ausgewählt werden.
      Die verfügbaren Funktionen hängen vom ausgewählten Katalogfeldtyp ab.

      Textfeldfunktionen :
      - uppercase
      - lowercase
      - capitalize


      Zahlenfeldfunktionen:
      - decimal comma separator — fügt ein Kommatrennzeichen zu einem Zahlenwert hinzu.
      - decimal point separator — fügt ein Punkttrennzeichen zu einem Zahlenwert hinzu.
      - decimal places — zum Beispiel {{decPlaces volume 2}} : Fügt ein Kommatrennzeichen mit einer Anzahl von Ziffern (in diesem Beispiel 2) nach dem Komma zu einem Zahlenwert hinzu.

      Hinweis: Wenn das Katalogfeld „price“ ausgewählt ist, erhält der Werkt außerdem sein Währungssymbol vor der Zahl.

      Wenn Sie das Katalogfeld „price“ verwenden möchten, die Währung jedoch nicht angezeigt werden soll, können Sie dies durch manuelles Hinzufügen eines Unterstrichs vor dem Preis erreichen: {{_price}}



    Alle Werte, ob Katalogtext, benutzerdefinierter Text oder Funktionen, können manuell im Texteditor hinzugefügt/bearbeitet werden :

    Hinweis: Funktionen müssen für die korrekte Nutzung vor dem Katalogwert hinzugefügt werden.
    Beispiele :
    {{uppercase title}}
    {{decSepComma price}}


    Sie können auch ein Überlaufzeichen definieren, das angezeigt wird, wenn der Text zu lang ist.


    Im Bereich sieht das Text-Objekt wie folgt aus:

    Hinweis: Die maximale Menge von Textobjekten, die auf dem Bereich wiedergegeben werden können, ist auf 20 eingestellt. Sie erhalten eine Fehlermeldung, wenn diese Grenze überschritten wird.

Für Objekte auf dem Bereich können Sie Folgendes durchführen:

1. Verschieben – Halten Sie die linke Maustaste in der Mitte des Objekts gedrückt und ziehen Sie das Objekt an einen neuen Ort.
2. Größe ändern – Gehen Sie über eine der Ecken/Seitenquadrate, bis ein Pfeilsymbol erscheint. Halten Sie dann die linke Maustaste gedrückt und ziehen Sie, bis die gewünschte Größe erreicht ist.
3. Drehen – Gehen Sie über das oben zentrierte Quadrat, bis ein Kreuzsymbol erscheint. Halten Sie dann die linke Maustaste gedrückt und ziehen Sie, bis das Objekt den gewünschten Drehwinkel erreicht.


Unter dem Designbereich ist die ausgewählte Form-ID angegeben.
Sie können außerdem Formen aus der Dropdown-Liste auswählen, statt sie direkt im Bereich auszuwählen.

In den Layout-Einstellungen können Sie eine Form-ID für jede Form einstellen, um sie einfacher identifizieren zu können.

 

Bereichseinstellungen

Definieren Sie die Bereichseigenschaften für die Breite und Höhe Ihres Bereichs (in Pixel), zeigen Sie Rasterlinien an (und wählen Sie Ihre bevorzugte Rastergröße aus), um Ihre Objekte einfach auszurichten und sie optional am Raster anzuheften, und bearbeiten Sie die Bereichshintergrundfarbe durch eine visuelle Farbauswahl oder Eingabe eines RGB- oder HEX-Farbcodes.

Wenn der Schalter „Rasterlinien“ aktiviert wurde, sind Rasterlinien im Bereich zu sehen:

 

Texteinstellungen

Sie können statischeText- und Katalogtext-Werte über die Text-Eigenschaften hinzufügen.

Beim Bearbeiten von vorhandenem Text können Sie den Textstil im Rich Text-Editor anzeigen und anpassen und Feld-Größenänderung, Platzierung und Formkennung konfigurieren.



 

Layout Einstellungen

- Für „Dreieck“-, „Quadrat“- und „Kreis“-Formen und „Lokal Bild“-Objekte: Eigenschaften können für Stil, Größenänderung, Platzierung, Rahmen und Formkennung festgelegt werden.
- Für „Katalogbild“-Objekte: Eigenschaften können für Größenänderung, Platzierung und Formkennung festgelegt werden.

Hinweis: Layout-Einstellungen gelten nicht für Texte (sie verwenden diese Texteinstellungen).

- Stil — Legen Sie die Farbe der Form durch eine visuelle Farbauswahl oder Eingabe eines RGB- oder HEX-Farbcodes fest, definieren Sie den Eckradius der Form und legen Sie die Opazitätsstufe fest (Farbe und Eckradius sind nur für Quadrat-, Kreis- und Dreieckformen verfügbar, nicht für lokale Bilder).


- Größenänderung — Die Breite und Höhe des Objekts kann durch Ziehen der Schieberegler oder durch manuelle Eingabe der Werte geändert werden. Diese Werte sind in Pixel und können zwischen 0 und 500 liegen.
Für Quadrat-, Kreis- und Dreieckformen können außerdem Schrägwerte eingestellt werden, um den Winkel des Objekts sowohl in der X- als auch der Y-Achse zu ändern. Diese Werte können zwischen 0 und 90 liegen.


- Rahmen — Ein Rahmen mit einer gewählten Rahmenfarbe und Größe kann um ein Objekt hinzugefügt werden.


- Platzierung — Folgende Einstellungen können definiert werden:
Horizontale Ausrichtung — Horizontal können Formen und Bilder links, mittig oder rechts auf dem Bereich ausgerichtet werden.
Vertikale Ausrichtung — Vertikal können Formen und Bilder oben, mittig oder unten auf dem Bereich ausgerichtet werden.
Nach hinten/vorne setzen — Wenn sich Objekte überlappen, können Sie diese Option verwenden, um das ausgewählte Objekt hinter oder vor einem anderen Objekt zu platzieren.
(Erzeugen Sie eine Vorschau, um den Effekt zu sehen.)



Ausgewählte Objekte gruppieren/Gruppierung aufheben — Wenn mehrere Objekte ausgewählt sind, wird eine zusätzliche Schaltfläche „Objekte gruppieren“ verfügbar, die das Gruppieren verschiedener Objekte ermöglicht, sodass sie als ein einziges Objekt behandelt werden können (zum Beispiel zum gleichzeitigen Positionieren/Ausrichten).

(Um mehrere Objekte auszuwählen, ziehen Sie mit dem Mauscursor ein Rechteck um die Objekte oder halten Sie die Umschalttaste gedrückt und klicken Sie gleichzeitig mit der linken Maustaste auf die Objekte mit dem Mauscursor).

Die Gruppierung einer Gruppe von Objekten kann mit der Schaltfläche „Gruppierung aufheben“ wieder aufgehoben werden, um sie als verschiedene Objekte zu behandeln.


- Formkennung — Sie können eine Form-ID für jede Form einstellen, um sie einfacher identifizieren zu können.


Die definierte ID ist dann auch im Dropdown der ausgewählten Form sichtbar.

 

Bildeinstellungen

Bildeinstellungen können für Katalogbilder und lokale Bilder definiert werden.

Katalogbild:

Nach Auswählen der Optionsschaltfläche „Katalog“ werden die Katalogbild-Einstellungen angezeigt.
- Jedes Katalogfeld, das als Bild-URL (im Smart Content-Katalogabschnitt) definiert ist, kann im Dropdown ausgewählt werden.

- Die Opazität des Bildes kann eingestellt werden.
- Zusätzlich, die Bildanpassung kann wie folgt definiert werden:
Füllen = Die Größe des Bilds wird so angepasst, dass es das vorgegebene Maß füllt. Falls nötig, wird das Bild passend gedehnt oder komprimiert.
Abdecken = Das Bild behält sein Seitenverhältnis und füllt das vorgegebene Maß. Das Bild wird passend zugeschnitten.
Enthalten = Das Bild behält sein Seitenverhältnis, seine Größe wird aber geändert, um in das vorgegebene Maß zu passen.

Sowohl für „Abdecken“ als auch „Enthalten“ können horizontale und vertikale Anpassungsausrichtungen ausgewählt werden.

Beispiel:
Für ein Bildobjekt ist „Enthalten“ ausgewählt und die horizontale Anpassungsausrichtung wurde auf „links ausrichten“ ausgewählt.

Wenn die Breite des Bildplatzhalters (250 px) größer als die Höhe (150 px) im Design-Bereich ist, wird ein Katalogbild, das dieselbe Breite und Höhe (150 px) hat, jetzt in der Region des Platzhalters links ausreichtet, wobei es sein Seitenverhältnis enthält.

 

Lokales image :

Beim Auswählen der Optionsschaltfläche „Lokales Bild“ werden die Lokalen Bild-Einstellungen angezeigt.
Sie können ein benutzerdefiniertes Bild (mit einer maximalen Größe von 200 kB) hochladen und zum Bereich hinzufügen.

 

Constraint Builder

Legen Sie Constraint-Regeln fest, um zu definieren, ob ein Objekt ein- oder ausgeblendet werden soll.

Beispiel:
Wenn der Katalogparameter „Verfügbarkeit“ nicht gleich dem Wert „verfügbar“ ist, wird das ausgewählte Objekt ausgeblendet.

Hinweis: Die verfügbaren Operatoren (im zweiten Dropdown) hängen von dem gewählten Katalogparameter (im ersten Dropdown) ab.

- Für Textfelder sind die verfügbaren Operatoren: ist gleich, ist nicht gleich, ist nicht null, ist null.

- Für Zahlenfelder sind die verfügbaren Operatoren: ist gleich (=), ist größer oder gleich (>=), ist größer als (>), ist nicht gleich (<>), ist nicht null, ist null, ist kleiner oder gleich (<=), ist kleiner als (<).

 

Aktionsschaltflächen

Oben rechts im E-Mail-Grafikeditor sind die folgenden Schaltflächen verfügbar:

  •  Bereich leeren — Ihr Entwurf wird vollständig entfernt, sodass Sie wieder mit einem leeren Bereich beginnen.

  •  Bereichsänderungen rückgängig machen — Klicken Sie auf den nach links weisenden Pfeil, um die letzten Änderungen rückgängig zu machen.

  •  Bereichsänderungen wiederholen — Klicken Sie auf den nach rechts weisenden Pfeil, um die letzten Änderungen, die rückgängig gemacht wurden, zu wiederholen.

  •  Objekt löschen — Wählen Sie ein Objekt aus dem Bereich aus und klicken Sie auf diese Schaltfläche, um das ausgewählte Objekt zu löschen. Andere Objekte im Bereich bleiben gleich. (die Schaltfläche ist abgegraut, wenn kein Objekt ausgewählt ist)

  •  Objekt klonen — Wählen Sie ein Objekt aus dem Bereich aus und klicken Sie auf diese Schaltfläche, um eine exakte Kopie des ausgewählten Objekts zu erstellen. (die Schaltfläche ist abgegraut, wenn kein Objekt ausgewählt ist)

    Hinweis: Es ist nicht möglich, ein Objekt zu klonen, wenn mehrere Objekte ausgewählt sind oder wenn ein '„Gruppen“-Objekt ausgewählt ist.

  • Vorlage auswählen — Bei Klicken auf diese Schaltfläche werden die verfügbaren Vorlagenvoreinstellungen in einem Popup angezeigt, aus dem Sie eine auswählen können:


    Sie können mit dem Mauscursor über eine Vorlage gehen, um eine Quickinfo über diese Vorlage anzuzeigen.


    Nach Auswahl einer der Vorlagen wird der Grafik-Editor mit der ausgewählten Vorlagenvoreinstellung auf Ihrem Design-Bereich angezeigt.

    Beispiel:
    Wenn die Vorlage „Banner“ ausgewählt ist, werden die folgenden Komponenten zu Ihrem Design hinzugefügt :
    - ein Katalogbild links mit der standardmäßig ausgewählten „image_url“ (aus dem Produktkatalog)


    - ein Katalogtext oben rechts mit dem standardmäßig ausgewählten „title“-Wert (aus dem Produktkatalog)


    - ein Katalogtext unten rechts mit dem standardmäßig ausgewählten „Preis“-Wert (aus dem Produktkatalog)


    Auf diese Weise kann ganz einfach eine Smart Content-E-Mail mit Bildern und Text erstellt werden.
    Es ist selbstverständlich trotzdem möglich, alle Komponenten im Grafik-Editor zu bearbeiten.

    Hinweis: Wenn Sie auf die Schaltfläche geklickt haben, um die verfügbaren Vorlagen anzuzeigen, aber keine auswählen möchten, können Sie durch Klicken auf die Schaltfläche „Abbrechen" im Popup zurückgehen.
    Es wird keine Vorlagenvoreinstellung angewendet und Sie können mit der Arbeit an Ihrem ursprünglichen E-Mail-Design fortfahren.


  • Vorschau — Klicken Sie auf diese Schaltfläche, um eine Vorschau Ihres Entwurfs rechts anzuzeigen. Sie können auf diese Schaltfläche jederzeit klicken, um die Vorschau zum Validieren Ihrer Änderungen zu aktualisieren.

    Sie können auch den Schalter „Live-Vorschau“ aktivieren.
    Wenn Sie dies tun, spiegelt sich jede Änderung im Designbereich umgehend in der Vorschau wider.In diesem Fall ist die Vorschau-Schaltfläche zum manuellen Erzeugen einer Vorschau ausgeblendet.

    Hinweis: Beim Öffnen eines vorhandenen Smart Content-Designs achten Sie darauf, dass der Schalter „Live-Vorschau“ aktiviert ist oder dass Sie auf die manuelle Vorschau-Schaltfläche klicken (wenn der Schalter ausgeschaltet ist), um eine Vorschau zu sehen.

    Beispiel eines Entwurfs (in der Mitte) und seiner Vorschau (rechts):

    IStatt dem Standard-Katalogelement, das in der Vorschau wiedergegeben wird (das mit der niedrigsten ID), können Sie auch eine Vorschau spezifischer Katalogelemente anzeigen, indem Sie die Katalogelement-ID in das Feld unter der Vorschau eingeben.

    Hinweis: Wenn ein Feld „Bild-URL“ (für Katalogbilder verwendet) keinen Wert im Katalog enthält (ist leer), wird kein Bild wiedergegeben..

    Beispiel eines Katalogelements mit ID 1:


    Beispiel eines Katalogelements mit ID 10:

Hinweis: Wenn ein Objekt im Bereich ausgewählt wird, wird durch Klicken irgendwo außerhalb des Bereichs mit der linken Maustaste diese Auswahl entfernt.

Sie können auch die folgenden Tastenkombinationen verwenden (wenn Sie über eine der entsprechenden Schaltflächen gehen, wird eine Quickinfo angezeigt):

  • Steuerung (Windows) / Befehl (Mac) + Löschen — entfernt das ausgewählte Objekt.
  • Steuerung (Windows) / Befehl (Mac) + Z — macht die letzte Änderung rückgängig.
  • Steuerung (Windows) / Befehl (Mac) + Y — wiederholt die letzte Änderung.
  • Steuerung (Windows) / Befehl (Mac) + C – Klonen des ausgewählten Objekts.
  • Steuerung (Windows) / Befehl (Mac) + Umschalt + V — lädt die Vorschau.

Hinweis: Wenn Sie mit dem Mauscursor über ein Info-Symbol gehen, wird ein Popup mit Informationen über diesen Abschnitt angezeigt.

 

Symbol für Verwandte-Themen-LinksVerwandte Themen