Im Responsive-Design-Editor wird eine Vorlage oder E-Mail aus Layout- und Inhaltskomponenten erstellt, indem sie per Drag & Drop auf die Nachricht gezogen werden.
- Zeilen-Komponenten im rechten Bereich legen die Anzahl der Zeilen und Spalten in der Vorlage/E-Mail fest.
- Inhalt-Komponenten definieren, welche Art von Inhalt tatsächlich in ihnen angezeigt wird.
Basislayout und Inhalt
Das Layout der Selligent-Standardvorlage/E-Mail ist wie folgt:
Der Inhalt enthält die folgenden Bausteine:
Header — Wird oben auf der Seite angezeigt. Standardmäßig enthält der Header eine Zeile mit zwei Spalten, in denen bereits Textkomponenten platziert sind: ein Pre-Header-Text sowie ein Link zur Webversion. Sie können bei Bedarf zusätzliche Elemente zum Header hinzufügen und die Standardelemente entfernen.
Textkörper — Enthält den eigentlichen Inhalt der E-Mail. Der Textkörper ist standardmässig leer. Sie können zuerst Zeilenkomponenten und anschließend Inhaltskomponenten dazu hinzufügen oder Sie können Zeilen mit Standard-Inhalt direkt zum Textkörper hinzufügen. Sie müssen auf die Umschalten-Schaltfläche „Mit Standard-Inhalt“ klicken, um diese Option zu sehen.
Footer — Wird unten auf der Seite angezeigt und ist normalerweise für die verschiedenen Vorlagen/E-Mailsgleich. Der Footer enthält standardmässig eine Textkomponente. änderungen am Standard-Footer können durch Bearbeiten oder Entfernen des vorhandenen Inhalts oder Hinzufügen von neuem Inhalt durchgeführt werden.
Auf der rechten Seite des Fensters im Links-Bereich gibt es einen Standard-Link für jede Vorlage/E-Mail:
Webversion — Dieser Link wird zu E-Mail-Nachrichten hinzugefügt, um es Kontakten zu ermöglichen, die E-Mail-Nachricht in einem Webbrowser zu lesen, wenn sie die Mail in ihrem E-Mail-Client nicht korrekt anzeigen können. Wenn Sie eine neue Vorlage/E-Mailerstellen, wird der Webversion-Link standardmässig im Links-Bereich erstellt und in den Header eingefügt. Die beste Vorgehensweise ist, den Webversion-Link nicht anzuzeigen, wenn die E-Mail bereits in einem Webbrowser angezeigt wird. Ein Sichtbarkeits-Constraint SYSTEM.MAIL=1 kann in diesem Fall hinzugefügt werden, damit die Anzeige nur im E-Mail-Client und nicht im Browser erfolgt.
Technischer Hinweis: Wenn eine Vorlage/E-Mailerstellt wird, wird automatisch auch ein Austragungslink hinzugefügt.
Dieser Link hat die ID=9, wird aber nicht mit den anderen Links in der E-Mailaufgeführt.
Der Link wird von bestimmten webbasierten E-Mail-Clients verwendet, um dem Benutzer eine zusätzliche Möglichkeit zur Austragung zu bieten.
Ein Link "list-unsubscribe" wird der Kopfzeile der E-Mail hinzugefügt.
Wenn der empfangende E-Mail-Client diesen Link entdeckt, fügt er/sie in der Regel eine Textzeile mit einem Link über der E-Mail "Sie sind in diese Mailingliste eingetragen. Austragung" zu.
Wenn der Kontakt auf diesen Link klickt, wird er von der gesamten Zielgruppenliste ausgetragen (Feld OPT-OUT ist auf 9 gesetzt).
Dies wird nur verwendet, wenn der E-Mail-Client den Standard "list-unsubscribe" unterstützt.Dieser Austragungslink ersetzt nicht den obligatorischen Opt-Out-Link in Ihren E-Mail.
(Nähere Informationen zu Links in E-Mail finden Sie hier)
Hinzufügen von Zeilen und Spalten
Der Textkörper enthält keinen Inhalt, wenn die Vorlage/E-Mail zuerst erstellt wird. Sie benötigen mindestens eine Zeile in jedem Teil der E-Mail. Sie können neue Zeilen hinzufügen, indem Sie vom Komponenten-Bereich rechts auf den Bereich ziehen.
Obligatorische Zeilen müssen zu den Abschnitten hinzugefügt werden, dort wo Zeilen hier ablegen beim Darübergehen angegeben ist, es können aber auch zusätzliche Zeilen zum Header und Footer hinzugefügt werden.
Verwenden von Zeilen mit oder ohne Standard-Inhalt
Sie können Zeilen mit oder ohne Inhalt mithilfe der Umschalten-Schaltfläche Mit Standard-Inhalt im Komponenten-Bereich im ZEILEN-Abschnitt hinzufügen.
Deaktiviert — Wenn die Option deaktiviert ist, können Sie leere Zeilen mit ein bis vier Spalten ziehen und auf dem Bereich ablegen. Danach können Sie mehrere Inhaltskomponenten in jede einzelne Spalte in einer Zeile platzieren
Hinweis: Verwenden Sie mindestens zwei Spalten für Mobilgeräte, um sicherzustellen, dass der Inhalt richtig angezeigt wird.
Aktiviert — Wenn die Option aktiviert ist, können Sie Zeilen, die Standard-Inhalt wie Bild- und Textcontainer enthalten, ziehen und auf dem Bereich ablegen. Diese Zeilen bestehen je nach Art des ausgewählten Inhalts aus ein oder zwei Spalten. Verwenden Sie diese Option, wenn Sie schnell Inhalte erstellen möchten, die die gesamte Zeile benötigen.
- Text — Fügt eine einspaltige Zeile hinzu, in der Sie Text hinzufügen können, der personalisiert und mit einem Stil versehen werden kann.
- Bild — Fügt eine Bildkomponente in die Zeile ein und ermöglicht Ihnen das Auswählen eines Bilds zur Verwendung darin.
- Text + Bild — Bietet mehrere mögliche Layouts für eine Kombination aus Text und Bild in einem Inhaltsfeld, wie im Bild auf der Komponenten-Schaltfläche dargestellt.
Beispiel:
Diese Vorlage ist für die Verwendung als Basis für alle Nachrichten gedacht. Daher müssen wir Header und Footer definieren und sie auf Vorlagenebene sperren. Fügen wir also eine Zeile mit drei Spalten zum Header hinzu, eine für das Parana-Logo, eine für das Ausgabedatum und eine für Hyperlinks zu spezifischen Bereichen auf der Website. Im Footer fügen wir eine Zeile mit zwei Spalten hinzu und entfernen den Standard-Inhalt.
Zum Textkörper der Vorlage wird eine weitere Zeile hinzugefügt, die den Einleitungstext enthält.
Das Ergebnis sieht wie folgt aus:
Wenn Sie über die verschiedenen hinzugefügten Blöcke gehen, werden Labels angezeigt, um Inhalte hier abzulegen.
Hinweis: Beim Hinzufügen von Inhalt zum Design ist der Bereich, in dem der Inhalt abgelegt wird, blau markiert.
Um auf die Eigenschaften der Einstellungen von Zeilen, Spalten und Komponenten zuzugreifen, wird ein Code für die verschiedenen Symbole im Design verwendet. Die Symbole erscheinen, wenn Sie über das Element gehen. Wenn Sie darauf klicken, erhalten Sie Zugriff auf die Optionen für das entsprechende Element:
- Gelb — Wählt die Spalte aus und bietet Zugriff auf die Spalte „Stileigenschaften“ (im Bereich rechts angezeigt), die Anzeigeoptionen und das Spaltenlayout (vertikal oder horizontal).
Sie können Stiloptionen für den Inhalt einstellen und definieren, auf welchen Geräten der Spalteninhalt angezeigt werden soll. Für mehrere horizontal ausgerichtete Inhaltskomponenten in der Spalte können Sie einstellen, wie sie auf Mobilgeräten angezeigt werden sollen: horizontal — eine neben der anderen, oder vertikal — eine unter der anderen.
- Teal — Wählt die Zeile aus und bietet Zugriff auf die Layoutoptionen für die Zeile und das Dropdown-Menü:
Vom Dropdown-Menü aus können Sie Sichtbarkeits-Constraints verwalten, die Zeile verdoppeln, die Zeile entsperren und sperren, definieren, auf welchen Geräten die Zeile angezeigt werden soll, oder die Zeile löschen.
- Grün — Wählt die Inhaltskomponente aus und bietet Zugriff auf die Inhaltseigenschaften und das Dropdown-Menü.
Hinweis: Um die Auswahl einer Komponente, Zeile oder Spalte aufzuheben (und damit das Eigenschaftenfenster zu schließen), können Sie entweder außerhalb des E-Mail Design klicken, über dem Eigenschaftenfenster auf das Symbol Schließen klicken oder die Esc-Taste drücken.
Hinzufügen von Inhaltskomponenten
Inhaltskomponenten können zu einer vorhandenen Zeile oder Komponente in einer Zeile hinzugefügt werden.
Wenn eine Zeile oder Spalte keinen Inhalt enthält, wird beim Darübergehen ein Text angezeigt. Dies bedeutet, Sie können Inhalte auf der Zeile oder Spalte ablegen.
Der Inhalt kann vertikal oder horizontal ausgerichtet werden. Dies wird über die Spaltenlayout-Auswahl in den Spalten-Eigenschaften definiert. Das horizontale Spaltenlayout funktioniert nur für Schaltfläche, Bilder und Text. Die unterschiedlichen Arten können in einer Spalte gemischt werden.
- Vertikales Spaltenlayout
Beim Ablegen einer Inhaltskomponente auf einer Spalte wird die horizontale grüne Leiste automatisch angezeigt. Die neue Inhaltskomponente wird über/unter einer anderen Komponente hinzugefügt. Jede andere Komponente, die danach hinzugefügt wird, wird automatisch über/unter einer anderen Komponente hinzugefügt. Beim vertikalen Hinzufügen von Inhaltskomponenten kann jede Art von Inhalt hinzugefügt werden und verschiedene Arten können in derselben Spalte gemischt werden.
- Horizontales Spaltenlayout
Beim Ablegen einer zweiten Inhaltskomponente auf der Spalte wird die vertikale grüne Leiste automatisch angezeigt. Die neue Inhaltskomponente wird links/rechts von einer anderen Komponente hinzugefügt. Jede andere Komponente, die danach hinzugefügt wird, wird automatisch links/rechts von einer anderen Komponente hinzugefügt. Beim vertikalen Hinzufügen von Inhaltskomponenten können nur Text-, Bild- und Schaltflächenkomponenten verwendet werden.
Jede Komponente, die nach der zweiten hinzugefügt wird, kann am Ende der horizontalen Zeile oder zwischen bereits positionierten Komponenten hinzugefügt werden (dies ist sowohl für horizontale als auch für vertikales Spaltenlayouts der Fall):
Als Folge wird der Inhalt horizontal nebeneinander platziert.
Hinweis: Wenn Textkomponenten horizontal hinzugefügt werden, kann die Breite des Textelements im Eigenschaften-Bereich angepasst werden. Standardmässig ist die Breite auf 100 Pixel eingestellt.
Verhalten auf Mobilgeräten
Wenn die E-Mail auf einem Mobilgerät angezeigt werden soll, können Sie auswählen, wie der Inhalt angezeigt werden soll, horizontal oder vertikal.
Beispiel: Bei einer E-Mail mit drei horizontalen Bildern wird der Inhalt vertikal angezeigt, wenn diese Option ausgewählt ist:
Hinweis: In einer einzigen Spalte können höchstens 10 Inhaltskomponenten hinzugefügt werden.
Technischer Hinweis:
Wenn Komponenten horizontal zu einer Spalte hinzugefügt werden, werden die Ausrichtungsoptionen der Spalte angewandt, nicht die der Komponente. Insbesondere wird für Schaltflächen die im globalen Stil definierte Schaltflächenausrichtung ausser Kraft gesetzt. Wenn Komponenten eine feste Breite haben, wird diese in der Spalte angewandt. Komponenten mit einer Breite von 100 % werden gleichmässig auf den restlichen Platz aufgeteilt.
Bearbeiten von Inhaltskomponenten
Gehen Sie über eine Komponente, um auf die folgenden Vorgänge zuzugreifen:
— Komponente löschen
— Auf den Eigenschaftsbereich der Komponente zugreifen
— Komponente zur neuen Position verschieben
Klicken Sie mit der rechten Maustaste auf eine Inhaltskomponente, um auf Folgendes zuzugreifen
- Sichtbarkeits-Constraint bearbeiten — Legt ein Constraint für die Komponente fest. Der Dialog Sichtbarkeits-Constraint wird angezeigt.
- Kopieren/einfügen /löschen — ändert das Sichtbarkeits-Constraint.
- Element duplizieren — Erstellt eine Kopie der Komponente direkt unter der ausgewählten Komponente. Wenn ein Sichtbarkeits-Constraint für die Komponente definiert ist, ist dieses auch im Duplikat verfügbar.
- Löschen: Löscht das Element.
- Element sperren/entsperren: — Sperrt und entsperrt die Komponente für das Bearbeiten durch den Benutzer, der eine Journey mithilfe dieser Vorlage erstellt. Diese Option ist nur für Vorlagen, nicht für E-Mails, verfügbar.
- Anzeigen auf — Ermöglicht Ihnen die Auswahl der Geräte, auf denen die Komponente angezeigt wird: alle Geräte, Mobilgeräte oder Desktop-Geräte.
- Inhalt in andere Sprachen kopieren — Ermöglicht das Kopieren des Inhalts sowie des Layouts einer Komponente in eine andere Sprache.(nur wenn andere Sprachen für Ihre Umgebung ausgewählt wurden)
Beispiel:
Wir fügen die folgenden Komponenten zu unserem Design hinzu:
* Fügen Sie im Header ein Bild für das Parana-Logo, Text für das Ausgabedatum und Webseite-Einstiegspunkte hinzu.
* Fügen Sie im Textkörper Text für den Einführungstext und einen Repeater hinzu, der die Elemente dieses Newsletters enthält.
* Fügen Sie im Footer den Abbestellen-Link für Parana und ein Bild für die zulässigen Zahlungsmethoden hinzu.
Das Ergebnis sieht wie folgt aus:
