Die Komponenten sind in den folgenden Kategorien geordnet:

Section-Komponenten dienen für den groben Aufbau des Newsletters. Erstelle eine Section, um diese dann mit Containern, Content-Komponenten, interaktiven Content-Komponenten, Grids und AMP Formularkomponenten zu befüllen.

In den meisten Fällen ist die Section die erste Komponente. Sie ist eine transparente Basis-Komponente. In eine Section können andere Komponenten wie ein Container, ein Image oder ein Text-Element gefüllt werden. Du kannst einer Section eine Hintergrundfarbe, eine Größe und unterschiedliche Spacings verleihen.

Mit der Verwendung von Containern können Content-Elemente wie Texte, Buttons, Images oder Grids noch flexibler und responsiver positioniert werden. Dennoch sollte ein Container innerhalb einer Section liegen. Zu einem Container können dann weitere Komponenten hinzugefügt werden. Es können auch Container in Containern genutzt werden, um beispielsweise weitere Spacings einzubauen.

Ein Section Image hat die gleichen Funktionen wie eine normale Section. Zusätzlich kannst du mit ihr ein großes Hintergrundbild einfügen, das über die gesamte Content-Breite dargestellt wird. Das eignet sich z. B. besonders gut für den Header.

Im Gegensatz zur Section Image, wird bei dieser Komponente das Hintergrundbild auf voller Breite des Newsletters dargestellt.

Content-Komponenten beschreiben Inhalts-basierende Komponenten wie z. B. Texte, Buttons und Images.

Verlinke mithilfe von Buttons auf deine Website oder Landing Page oder andere Links. In den Komponenten-Settings kannst du unterschiedliche Button Types auswählen und diese im Styles-Menü nach deinen Wünschen designen.

Kreiere spannende Headlines und Fließtexte mit der Text-Komponente. Klicke auf einen Text, sodass sich der Richtext Editor öffnet. Hier kannst du u. a. Textformatierungen, Farben, Headline-Schriftformate und -Assignments auswählen. Im Richtext Editor kannst du außerdem einfache HTML-Tabellen erstellen, als Admin den HTML-Code einsehen und bearbeiten sowie Emojis einfügen.

Mithilfe dieser Komponente lassen sich Inhalte durch eine horizontale Linie trennen. Die Länge und Breite sowie Farbe kannst du anpassen. Im Styles-Menü stehen dir drei verschiedene Typen zur Verfügung, welche du designen kannst.

Diese Komponente stellt eine Linie dar, durch die du Inhalte optisch trennen kannst. Im Gegensatz zum Simple Separator kannst du hier in der Mitte der Linie ein Wort oder einen kurzen Text hinzufügen.

Der Separator ist eine horizontale Linie zum Trennen Inhalten. Beim Separator mit Image kannst du ein kleines Bild oder Icon in der Mitte der Linie platzieren.

Füge eine Aufzählungsliste hinzu. Als Bullets können hier hochgeladene individuelle Images oder Icons verwendet werden.

Mit dem Spacer lassen sich kleinere Spacings zwischen Komponenten unkompliziert hinzufügen. Wähle zwischen drei Spacings aus. Die Größen kannst du auch im Styles-Menü definieren.

Um Bilder hinzuzufügen, nutze eine der vielen Image-Komponenten. Mit der Image Block Komponente werden Bilder ausschließlich untereinander dargestellt. Um das Bild zu verlinken, nutze bitte die Komponente Image Block Linked.

Mit dieser Komponente lassen sich Images ausschließlich untereinander darstellen. Es kann ein Link gesetzt werden, welcher geöffnet wird, wenn der User auf das Bild klickt.

Die Komponente ist optimal, um kleinere Bilder nebeneinander darzustellen.

Mit der Komponente kannst du mehrere kleine Bilder nebeneinander darstellen. Die einzelnen Bilder lassen sich verlinken. Dadurch ist sie perfekt geeignet, um u. a. kleine Icons im Footer darzustellen.

Mithilfe von interaktiven Komponenten werden E-Mail-Kampagnen noch spannender und vielseitiger. Nutze den Produkt-Feed, um Produkte aus deinem Online-Shop dynamisch in deine Kampagnen einzubinden.

Eine Slideshow ermöglicht dir, mehrere Bilder einzubinden. Die Bilder werden in einer Galerie dargestellt. Mithilfe von Pfeilen kann innerhalb der versendeten E-Mail zwischen den Images gewechselt werden.

Solltest du eine Kampagne mit viel Text versenden, ist die Komponente hilfreich, um einen Teil des Textes zu verstecken. Durch einen Button mit z. B. „Read More“ kann der Rest des Textes nach Wunsch aufgeklappt werden.

Binde eine Uhr ein, die zu einem definierten Zeitpunkt ablaufen soll. Der Countdown ist z. B. für Sale-Benachrichtigungen oder Produkt Releases geeignet.

Mit dieser Komponente wird das Produktbild groß dargestellt. Produktname und Preis werden unter dem Image angezeigt. Style diese Komponente unter Product > Large/2 Column.

Füge die Komponente in die Spalten eines 2 Column Grids, um zwei Produkte nebeneinander darzustellen. Preis und Produkttitel werden jeweils unter den Produktimages angezeigt. Style diese Komponente unter Product > Medium.

Füge die Komponente in die Spalten eines 3 Column Grids, um drei Produkte nebeneinander darzustellen. Preis und Produkttitel werden jeweils unter den Produktimages angezeigt. Style diese Komponente unter Product > Small.

Mit der Komponente wird nur das Produktbild dargestellt. Nutze Product Box Large, um Produktnamen und Preis anzuzeigen. Die Komponente kann auch mit einem Column Grid verwendet werden, um zwei oder drei Produkte nebeneinander darzustellen.

Die Produktinformationen werden wie bei einem 2 Column Grid angezeigt. In der linken Spalte wird das Image dargestellt. Auf der rechten Seite stehen die Produktdetails. Die Komponente lässt sich im Styles-Menü über Product > Large/2 Column stylen.

Mithilfe der Grid-Elemente kannst du deine Inhalte horizontal unterteilen.

Mit einem Column Grid werden Inhalte horizontal aufgeteilt. Diese Komponente kann zwei, drei oder vier Spalten. In der jeweiligen Spalte können Content-Komponenten hinzugefügt werden. In der mobilen Ansicht werden die Spalten automatisch untereinander dargestellt.

Wie bei dem Column Grid werden mit dem Column Container die Inhalte in der horizontalen Ebene in Spalten aufgeteilt. Hier kannst du zwischen zwei, drei und vier Spalten wählen. Der Unterschied zum Column Grid liegt darin, dass die Spalten in der mobilen Ansicht nebeneinander dargestellt sind.

Nutze AMP E-Mail-Kampagnen, die die Interaktion und Engagement-Raten steigen. Mit den AMP-Komponenten können User direkt im Postfach mit dem Newsletter interagieren und Formularfelder ausfüllen. Dabei müssen sie nicht auf eine Landing Page weitergeleitet werden. Die Listenfelder müssen dann in der jeweiligen Automation Liste angelegt werden, damit die Daten in JUNE, oder auch einem externen System gesammelt werden.

Um ein AMP-Formular aufzubauen, benötigst du zu Beginn diese Komponente. In dieses Form-Element wird dann jede weitere AMP-Komponente platziert.

Diese Komponente ist ein Eingabefeld. Hier können User einen beliebigen Text oder beispielsweise ihre E-Mail-Adresse hinterlegen.

Die Komponente dient als ein großes Eingabefeld. Beispielsweise für Nachrichten oder Kommentare.

Eine Checkbox stellt ein kleines Quadrat dar, das sich ankreuzen lässt. Deine Subscriber können die Checkboxen nutzen, um eine oder mehrere von dir selbst definierten Optionen auszuwählen.

Wie die Checkbox lässt sich dieses Element ankreuzen. Der Unterschied zur Checkbox ist, dass bei der Radio Group nur eine der von dir gestellten Option ausgewählt werden können. Du kannst diese Komponente beispielsweise nutzen, um das Geschlecht deiner Subscriber abzufragen.

Baue ein Dropdown-Menü mit unterschiedlichen Auswahlmöglichkeiten auf. Somit können User mithilfe des Menüs ihre gewünschte Option auswählen. Du kannst so viele Felder wie du möchtest, hinzufügen. Dies spart im Gegensatz zur Checkbox Komponente Platz ein.

Der Button wird am Ende des Formulars platziert, um alle Eingaben des Users zu speichern und an dein JUNE zu übermitteln.

Erstelle ein kleines Pop-up, das sich öffnet, sobald der User alle Pflichtfelder ausgefüllt hat und den Submit-Button anklickt.

Sobald der User den Submit-Button anklickt, jedoch nicht alle Pflichtfelder ausgefüllt hat, öffnet sich durch diese Komponente ein kleines Pop-up, welches darauf hinweist, dass nicht alle Felder ausgefüllt wurden.

Mit der Komponente kann eine kleine Navigation innerhalb des Formulars gebaut werden. Das hilft, ein langes Formular zu strukturieren und übersichtlich aufzubauen.