Wie man mit Stripo eine E-Mail erstellt. Eine Anleitung von A bis Z

Wenn Sie Stripo zum ersten Mal öffnen, fühlen Sie sich vielleicht etwas überfordert und wissen nicht so recht, wo Sie anfangen sollen. Und diese wichtige E-Mail muss bald fertig sein und verschickt werden, denn die Frist rückt immer näher. Es ist an der Zeit, gemeinsam mit uns die wichtigsten Funktionen von Stripo durchzugehen, wobei wir Ihnen erklären, wie Sie Ihre eigene E-Mail von A bis Z erstellen können.

So fängst du mit der Erstellung einer E-Mail an

Es gibt drei Möglichkeiten, wie du mit Stripo deine eigene E-Mail-Vorlage erstellen kannst:

1. Wähle eine leere Vorlage, um bei der Gestaltung deiner E-Mail-Struktur mit Basisblöcken und Modulen völlige Freiheit zu haben (mehr zu Blöcken und Modulen später).
2. Wählen Sie Basisvorlagen, um eine solide Grundlage und einen allgemeinen Überblick darüber zu erhalten, wie Ihre zukünftige E-Mail-Vorlage aussehen könnte.
3. Stöbern Sie in unseren 1650 vorgefertigten E-Mail-Vorlagen, wählen Sie diejenige aus, die Ihnen gefällt, und bearbeiten Sie.

Um eine dieser Optionen auszuwählen, klicken Sie einfach auf die gewünschte Option, sobald Sie sich auf dem Bildschirm „E-Mail-Nachricht“ befinden.

Die Option „Leere E-Mail“ auswählen

Sobald Sie diese Option ausgewählt haben, gelangen Sie zu unserem Editor, wo Ihnen eine einfache E-Mail-Struktur zur Bearbeitung bereitsteht.

Diese Grundstruktur besteht aus drei Hauptteilen der E-Mail: Kopfzeile, Hauptteil und Fußzeile.

Mit dieser Struktur verfügen Sie über volle gestalterische Freiheit, sodass Sie mithilfe unserer Editor-Tools, die wir Ihnen später vorstellen werden, genau die Vorlage erstellen können, die Sie benötigen. Sie können jede Struktur mit den erforderlichen Blöcken füllen, um Ihr E-Mail-Design ganz nach Ihren Wünschen zu gestalten (mehr zu den verschiedenen Blöcken später).

Auswahl einer Basisvorlage

Wenn Sie auf diese Option klicken, gelangen Sie zu diesem Bildschirm, auf dem Sie aus verschiedenen Basisvorlagen wie „Leere Vorlage“ und „Master-Vorlage“ sowie aus verschiedenen Vorlagenlayouts aus Kategorien wählen können, die im E-Mail-Marketing üblich sind (Promo, Trigger, Info usw.). Wenn Sie auf eine Vorlage klicken, gelangen Sie zum Editor, wo Sie mit der Bearbeitung der ausgewählten Vorlage beginnen können.

HTML-Vorlagenoption

Wir haben diese Option gesondert hervorgehoben, da sie für technisch versierte Nutzer gedacht ist, die sich mit der Programmierung von E-Mails auskennen. Das Besondere an dieser Option ist, dass sich durch Anklicken automatisch der Code-Editor öffnet.

Im Grunde genommen wird dir eine leere Arbeitsfläche angezeigt, auf der du mithilfe von Code manuell eine E-Mail von Grund auf erstellen kannst.

Wählen Sie eine der über 1650 vorgefertigten Vorlagen aus

Wenn Ihre E-Mail schon gestern fertig sein sollte und keine Zeit für den Ideenfindungsprozess bleibt, können Sie jederzeit durch unsere umfangreiche Bibliothek mit vorgefertigten Vorlagen stöbern, die von unserem Designteam erstellt wurden. Sie finden eine Vorlage für jeden Anlass, jede Branche oder mit einer Funktion, die Sie für Ihr E-Mail-Marketing-Ziel benötigen. Ihnen stehen sowohl kostenlose als auch Premium-Vorlagen zur Verfügung, und wenn Sie auf eine davon klicken, gelangen Sie zum Editor, wo Sie die notwendigen Änderungen vornehmen können.

1. Allgemeine Stile

Wenn Sie in Stripo eine E-Mail erstellen, sind „Allgemeine Stile & Layouts“ der erste Anlaufpunkt, um die notwendigen Anpassungen vorzunehmen, die die grundlegenden Designregeln für Ihre zukünftige E-Mail-Vorlage festlegen. Das Hauptziel dieser Regeln ist es, alle Elemente einheitlich zu gestalten und diese Designregeln zu übernehmen.

Der Stripe steht an der Spitze der Hierarchie der E-Mail-Elemente; das bedeutet, dass er untergeordnete Elemente enthalten muss. Eine Struktur ist eines davon und ist standardmäßig immer in jedem Stripe vorhanden.

Klicken Sie im Hauptbildschirm des Editors auf die Schaltfläche „Allgemeine Stile“, um das gesamte Menü anzuzeigen. Es ist in vier Abschnitte unterteilt, die allgemeine Optionen für jeden E-Mail-Abschnitt enthalten:

• „Globale Stile & Layouts“ ist Ihre zentrale Einstellungsplattform, über die Sie Designaspekte wie Hintergründe, Ausrichtung, die Option für Inhalte von rechts nach links usw. festlegen können;
• Mit „Stripe-Stile“ können Sie allgemeine Einstellungen festlegen, die für jeden Stripe (Überschriften, Inhaltsstreifen, Fußzeilen und mehr) gelten, den Sie für Ihre Vorlage erstellen, wie z. B. Schriftfamilie, Abstand, Schriftgrößen und vieles mehr;
• „Überschriftenstile“ bietet dieselben Optionen wie „Stripe-Stile“, mit dem einzigen Unterschied, dass sie nur für Ihre Überschriften gelten, sodass Sie deren Aussehen für Ihr gesamtes E-Mail-Design variieren können (falls erforderlich);
• „Button-Stile“ enthält allgemeine Optionen, die für alle Schaltflächen der Vorlage gelten, wie z. B. Schaltflächenfarben, Abstände, Schaltflächengrößen, Schriftarten und mehr.

• Globale Stile & Layouts

In diesem Abschnitt kannst du die wichtigsten Stilregeln festlegen, die für die gesamte E-Mail gelten, und dies ist das Erste, was du anpassen solltest, wenn du deine E-Mail erstellst. Zunächst kannst du die Hintergrundfarbe (oder das Hintergrundbild) für deine gesamte E-Mail festlegen.

Außerdem musst du die Breite des E-Mail-Inhalts und die allgemeine Ausrichtung festlegen, wodurch die Grundform deiner zukünftigen E-Mail entsteht.

Sie können auch optionale Einstellungen vornehmen, wie z. B. Links unterstreichen, Ihr Design responsiv gestalten (Ihre E-Mail passt sich automatisch an, sodass sie auf kleinen Bildschirmen einspaltig angezeigt wird), Ihren gesamten Inhalt auf RTL-Regeln umstellen und Ihre Listen mit der Option „Benutzerdefinierte Listenstile“ anpassen.

Vergessen Sie nicht, auch die allgemeinen Abstände und Ränder anzupassen. Nicht zuletzt gibt es noch die „Standardstile“, die festlegen, ob Sie unsere Standard-CSS-Stile verwenden oder mit Ihren eigenen CSS-Stilen volle Gestaltungsfreiheit genießen möchten.

Der Hintergrund des E-Mail-Inhalts bezeichnet den Hintergrund, der auf den gesamten E-Mail-Bereich angewendet wird. Beim Öffnen auf Desktop-Geräten bedeckt er alle Bereiche der E-Mail-Nachricht, während er auf Mobilgeräten ausgeblendet wird (der rote Hintergrund im folgenden Beispiel). Darüber hinaus können Sie ein Bild als Hintergrundbild festlegen, falls Farben Ihre Designvorstellung nicht ausreichend unterstützen.

Die Breite der E-Mail beträgt standardmäßig 600 Pixel. Dies ist derzeit die gängigste Größe.

Durch diese Einstellungen reduzieren Sie den Zeitaufwand für die Feinabstimmung des E-Mail-Designs erheblich. Sobald Sie diese Parameter festlegen, werden sie auf alle Inhaltselemente in E-Mails angewendet.

Wenn ein Stil, den Sie auf eine einzelne Zeile, einen Container oder einen Block anwenden, von den in den allgemeinen Einstellungen festgelegten Stilen abweicht, hat er Vorrang vor dem allgemeinen Stil.

• Stile für „Stripes“ festlegen

Klicken Sie auf „Stripe Styles“, um ein spezielles Untermenü zu öffnen, in dem Sie Ihre allgemeinen Stile für „Stripes“ bearbeiten können.

Beachte bitte, dass durch Klicken auf die einzelnen Schaltflächen ein eigener Bereich geöffnet wird, in dem du die allgemeinen Stile für jeden Stripe-typ anpassen kannst, den du in deiner Vorlage erstellst. Probiere verschiedene Einstellungen aus und nimm die erforderlichen Anpassungen vor, damit dein Design einheitlich bleibt, ganz gleich, welchen Streifen du hinzufügen möchtest.

• Überschriften festlegen

Klicken Sie auf „Überschriftenstile“, um dieses kleine Menü zu öffnen, in dem Sie alle erforderlichen allgemeinen Optionen für Ihre Überschriften festlegen können. Dieses Menü ist etwas übersichtlicher als das vorherige, und alle Einstellungen gelten für alle von Ihnen erstellten Überschriften.

• Schaltflächen-Einstellungen

Zu guter Letzt gibt es noch die Schaltflächenstile. Klicken Sie auf diesen Abschnitt, um ihn zu öffnen, und legen Sie die gewünschten Stile für alle Schaltflächen fest, die Sie für Ihre E-Mail-Vorlage hinzufügen und erstellen.

2. Kopfzeile erstellen

Die Kopfzeile einer E-Mail ist das erste Element, das der Empfänger sieht. Sie enthält in der Regel das Markenlogo und das Menü.

Zunächst müssen Sie also entscheiden, wie Ihre Kopfzeile aussehen soll. Es gibt viele verschiedene Arten von Kopfzeilendesigns.
Am beliebtesten im E-Commerce ist jedoch die Anordnung, bei der das Logo oben und das Menü direkt daneben platziert ist.

Um diese Kopfzeile nachzubilden, benötigt man lediglich eine Zeile mit zwei Containern für den Inhalt.

• So fügen Sie mit Stripo ein Logo in Ihre E-Mails ein

Zunächst müssen Sie in Ihrer leeren Vorlage eine zweispaltige Struktur vorbereiten. Sobald Sie bereit sind, bewegen Sie den Mauszeiger über den ersten Container und klicken Sie auf die Schaltfläche „Bild“ oder ziehen Sie den Bildblock per Drag & Drop in die erste Spalte.

Sobald Sie darauf klicken, erscheint dieses Bildgalerie-Menü, in dem Sie Ihr eigenes Bild hinzufügen oder aus den von unseren Designern erstellten Vorlagen in verschiedenen Kategorien (Jahreszeiten, Dekorationen, Bildarchiv und mehr) auswählen können.

Nach dem Hinzufügen können Sie einen Hyperlink einfügen, der Ihre Empfänger auf Ihre Website weiterleitet, den Alternativtext sowie die genaue Größe des Logos festlegen und weitere Optionen anpassen, um das gewünschte Logo zu erstellen.

Wenn Sie einen Hintergrund für den Stripe festlegen möchten, in dem sich Ihr Logo und Ihr Menü befinden, achten Sie darauf, eine URL zum Logo-Bild im PNG-Format mit transparentem Hintergrund zu verwenden.

Warum sollten Sie das Logo mit einem Link versehen? Oft klicken Empfänger darauf, um schneller auf Ihre Website zu gelangen.

Warum sollte man dem Logo einen Alt-Text hinzufügen? Erstens, um die Anti-Spam-Filter zu passieren; zweitens, um den Empfängern Informationen darüber zu geben, worum es in dem Bild geht, falls sie Bilder in E-Mails nicht sehen können; drittens, um die Best Practices für die Barrierefreiheit von E-Mails einzuhalten.

• So fügen Sie mit Stripo ein Menü zu Ihren E-Mails hinzu

Um ein Menü in Ihre Überschrift einzufügen, ziehen Sie einfach einen Menüblock per Drag & Drop in den Container direkt neben Ihrem Logo.

Wenn Sie auf den hinzugefügten Block klicken, öffnen Sie die Optionen des Menüblocks, in denen Sie zahlreiche Anpassungen vornehmen können, um den Inhalt und das Design des Menüs zu bearbeiten.

Wählen Sie zunächst die Art Ihres Menüs aus: Soll es nur aus Textlinks bestehen, nur aus Symbolen (mit dahinterliegenden Links) oder aus beidem? Legen Sie außerdem die gewünschte Anzahl an Menüpunkten fest, indem Sie diese im Zähler „Anzahl der Menüpunkte“ erhöhen oder verringern.

Nun ist es an der Zeit, die einzelnen Menüpunkte festzulegen. Geben Sie ihnen Namen, fügen Sie die erforderlichen Links hinzu und legen Sie fest, ob sie auf verschiedenen Geräten ausgeblendet werden sollen oder nicht. Wenn Sie einen Menüpunkt löschen möchten, klicken Sie einfach auf das Papierkorb-Symbol. Beachten Sie, dass Sie alle Felder für alle Menüpunkte ausfüllen müssen.

Jetzt musst du nur noch die allgemeinen Einstellungen des Menüblocks anpassen, z. B. festlegen, ob er an den Container angepasst werden soll oder nicht, sowie Abstände und Ränder festlegen – und schon bist du fertig.

3. Mit Text arbeiten

Als Nächstes steht der Text auf unserer Liste. Mit Stripo ist es ganz einfach, Texte in Ihre E-Mails einzufügen.

• So fügen Sie mit Stripo Text in Ihre E-Mails ein

Wenn Sie über eine Struktur mit Containern verfügen, können Sie ganz einfach Text hinzufügen, indem Sie mit der Maus darüber fahren und auf die Schaltfläche „Text“ klicken oder einen Textblock darin einfügen.

Sobald du den Text hinzugefügt hast, erscheint ein Textplatzhalter, den du löschen und durch deinen eigenen Text ersetzen kannst. Außerdem verfügt unser Textblock über ein eigenes Optionsmenü, in dem du deinen Text anpassen kannst.

Sie haben bereits unter „Allgemeine Stile“ Stile für Stripes und Überschriften festgelegt, sodass diese Stile automatisch übernommen werden. Wenn Sie jedoch einen eigenen Stil für Ihren Text erstellen möchten, können Sie hier Absatzstile, allgemeine Textstile (fett, kursiv, unterstrichen und mehr) sowie die Ausrichtung und Einrückungen für jeden hier erstellten Text festlegen.

Außerdem kannst du, wenn du auf die Registerkarte „Stile“ klickst, Schriftart, Schriftgröße, Farbe, Zeilenhöhe und Hintergründe für diesen speziellen Textblock ändern.

• So fügen Sie mit Stripo Links in den Text ein

Wenn Sie Links in den Text einfügen möchten, markieren Sie die entsprechenden Wörter (oder legen Sie den Link für den gesamten Text fest), klicken Sie auf die Schaltfläche „Link“ und fügen Sie Ihren Link in das dafür vorgesehene Feld ein.

Wichtiger Hinweis:

Wir empfehlen Ihnen, die Worttrennung in Ihren E-Mails zu aktivieren, wenn Sie Links nicht in Schaltflächen einbinden oder wenn einige Wörter sehr lang sind. Wenn Ihre E-Mail beispielsweise auf Deutsch verfasst ist, sollten Sie die Option zur Worttrennung aktivieren. So vermeiden Sie horizontales Scrollen auf Mobilgeräten. Klicken Sie einfach auf diese Schaltfläche, um die Funktion zu aktivieren. Beachten Sie bitte, dass diese Option bei chinesischen, koreanischen und japanischen Texten nicht funktioniert.

• Weitere Inhalte zu Ihrem Textblock hinzufügen

Bei Bedarf können Sie Ihrem Textblock auch andere Inhalte hinzufügen, beispielsweise Bilder, Emojis, Sonderzeichen, Tabellen sowie Aufzählungs- und Nummerierungslisten.

Jeder Textblock verfügt im Bereich „Einfügen“ über eigene Schaltflächen, die jeweils ein kleines Untermenü öffnen, in dem Sie den gewünschten Inhalt einfügen können.

• Rechts-nach-links-Text

Wenn Sie E-Mails für ein internationales Publikum erstellen, dessen Muttersprachen auf RTL-Texten basieren, ist es unerlässlich, den Text Ihrer E-Mails entsprechend anzupassen. Wir verfügen über eine spezielle RTL-Funktion, die wir bereits erwähnt haben. Klicken Sie auf „Allgemeine Stile“ und aktivieren Sie die Option „Textrichtung: Rechts-nach-links“.

Danach wird Ihr gesamter Text an die RTL-Regeln angepasst.

Erfahren Sie mehr über diese Funktion in unserem speziellen Artikel.

• Übersetzungen

Das Erstellen von E-Mail-Kampagnen für ein internationales Publikum kann zu einer echten Herausforderung werden – und je mehr Sprachen Sie abdecken müssen, desto größer ist diese Herausforderung. Das Übersetzen Ihrer E-Mails ist eine mühsame Aufgabe, die viel Ihrer wertvollen Zeit in Anspruch nehmen kann. Wir bieten eine integrierte Übersetzungsfunktion, die Ihnen das Leben erleichtert.

Klicken Sie auf diese Schaltfläche, um unser Übersetzungsmenü zu öffnen.

Wählen Sie die Sprache aus, in die Ihre E-Mail übersetzt werden soll.

Sobald du deine Sprachen ausgewählt hast, klicke auf die Schaltfläche „Übersetzen“.

Nach wenigen Sekunden steht Ihnen eine vollständig übersetzte Version der E-Mail zur Verfügung, die Sie anpassen und für Ihre Kampagnen verwenden können.

4. Personalisierung von E-Mail-Inhalten

E-Mails mit personalisiertem Text sind ein guter Ansatz, um sich von der Konkurrenz abzuheben und Ihre Marke näher an Ihre Publikum heranzuführen

Fügen Sie wie im folgenden Beispiel Platzhalter in die Anrede und in die E-Mail-Fußzeile ein, um die E-Mail-Adresse des Empfängers anzugeben, und sprechen Sie den Empfänger in automatisierten E-Mails stets mit seinem Namen an.

Mit dem Stripo-E-Mail-Vorlagen-Generator können Sie Platzhalter in jeden Textabschnitt der E-Mail-Vorlage einfügen.

• So fügen Sie mit Stripo Platzhalter in E-Mails ein

Um einen Platzhalter einzufügen, klicken Sie auf Ihren Textblock. Im Bereich „Einfügen“ finden Sie eine Dropdown-Liste zum Hinzufügen von Platzhaltern.

Sobald Sie darauf klicken, öffnet sich das gesamte Menü, in dem Sie je nach Ihren Personalisierungsanforderungen, den von Ihnen verwendeten E-Mail-Anbietern und den in den Projekteinstellungen festgelegten Einstellungen das gewünschte Merge-Tag auswählen können.

Sobald du dein Merge-Tag ausgewählt hast (in unserem Beispiel ist es ein Vornamen-Tag), erscheint es im Textblock, wo du weiteren Text hinzufügen kannst, um dein Tag mit einer passenden, personalisierten Nachricht zu ergänzen.

Ihr E-Mail-Versandsystem ersetzt diesen Parameter durch den Vornamen jedes Empfängers. Wenn der Vorname (oder ein anderer Parameter) nicht angegeben ist, lässt Ihr E-Mail-Versandsystem dieses Feld leer.

Weitere Informationen zu Merge-Tags finden Sie in unserem Hilfeartikel.

5. Bilder hinzufügen

Bilder sind die Grundlage jeder E-Mail. Ganz gleich, wie überzeugend Ihr Text auch sein mag – Bilder sollten auf jeden Fall vorhanden sein, da sie Emotionen ansprechen, indem sie unsere Produkte im besten Licht präsentieren.

• So fügen Sie mit Stripo ein Bild in E-Mails ein

Erstellen Sie zunächst eine neue Struktur mit der erforderlichen Anzahl an Spalten in Ihrer HTML-E-Mail-Vorlage. Ziehen Sie anschließend den Bildblock per Drag & Drop in den gewünschten Container oder klicken Sie auf die Option „Bild“, wenn Sie mit der Maus über den Container fahren.

Sobald Sie den Block platziert haben, stehen Ihnen mehrere Möglichkeiten zur Verfügung, Bilder zu Ihrer Vorlage hinzuzufügen.

1. Ein Bild ablegen oder hochladen

Hier können Sie das Bild, das Sie für Ihre Kampagne verwenden möchten, einfach per Drag & Drop ablegen oder es von Ihrem Computer hochladen, indem Sie auf den Drag-&-Drop-Bereich klicken.

2. Externe URL einfügens

Wenn Sie das Bild nicht auf Ihrem Computer gespeichert haben, können Sie gerne einen Link zu diesem Bild im Internet einfügen.

Klicken Sie auf die Option „URL einfügen“ im Drag-and-Drop-Feld, um dieses Menü zu öffnen. Fügen Sie anschließend den Link in Ihre E-Mail ein und wählen Sie aus, ob Sie ihn in Ihrer Bildergalerie speichern oder als externes Bild belassen möchten (beachten Sie, dass externe Bilder aus Ihrer Vorlage verschwinden können, sobald sie in der ursprünglichen Quelle verschoben oder gelöscht werden).

3. Verwenden Sie Bilder aus Ihrer Bildergalerie

Wenn Sie Bilder hochladen oder in die Galerie herunterladen, wie im obigen Beispiel gezeigt, werden Ihre Bilder in Ihrer persönlichen Galerie gespeichert. Sie sehen diese unten, und wenn Sie auf eines davon klicken, wird das Bild automatisch an den Block angehängt.

Die Bilder sind hier nach Datum sortiert, vom neuesten bis zum ältesten. Sollte die Liste der Bilder zu lang sein, kannst du nach dem Namen suchen.

Um ein Bild in deiner aktuellen HTML-E-Mail-Vorlage zu verwenden, klicke auf das gewünschte Bild – es erscheint dann automatisch in deiner E-Mail.

4. Nutzung von Fotostock und unserer Bilddatenbank

Alle bei Stripo verfügbaren Bilder sind völlig kostenlos, sodass Sie sich die Bilder aussuchen können, die Ihnen gefallen, und sie für Ihre eigenen Designs verwenden können. Darüber hinaus steht Ihnen eine große Auswahl an Fotostock-Bildern zur Verfügung. Klicken Sie auf das gewünschte Menü, um unsere Bibliothek zu durchsuchen und sich die Bilder selbst anzusehen.

5. Bilder mit GenAI erstellen

Sie können auch ein individuelles Bild für Ihr Banner erstellen, indem Sie auf die Option „KI-Bild“ klicken. Es öffnet sich ein spezielles Menü, in dem Sie Ihre Eingabe hinzufügen können, um die Kreativität von GenAI anzuregen, verschiedene Optionen wie KI-Modell, Stil und Abmessungen festlegen und das gewünschte Bild erstellen können.

6. Bilder bearbeiten

Im vorherigen Abschnitt haben wir gezeigt, wie man Bilder hochlädt und speichert.

Aber wie kann man sie mit Stripo bearbeiten?

In diesem Abschnitt zeigen wir Ihnen, wie Sie Bilder bearbeiten können, die Sie für Produktkarten, Signaturen, Logos, die Vorstellung von Diskussionsteilnehmern, bevorstehende Veranstaltungen usw. verwenden.

• So bearbeiten Sie Bilder mit Stripo

Nachdem Sie das Bild hochgeladen haben, klicken Sie darauf und dann in den Einstellungen des Bildblocks auf die Schaltfläche „Bild bearbeiten“.

Es erscheint ein neuer Mini-Editor, in dem du dein Bild auf vielfältige Weise bearbeiten kannst, zum Beispiel:

• Filter hinzufügen und Farben anpassen;
• Bilder zuschneiden, in der Größe anpassen und umformen;
• auf Bilder zeichnen, Formen, Texte, Sticker und Rahmen hinzufügen;
• abgerundete Ecken erstellen, Hintergründe hinzufügen und Bilder zusammenfügen.

7. Banner erstellen

Man sagt, das Banner sei das Aushängeschild Ihres Newsletters. Daher sollten Sie sich besonders viel Mühe bei der Gestaltung geben.

Unter einem Banner versteht man in der Regel ein Bild, das bei Ihrer Zielgruppe Emotionen weckt, ergänzt durch einen passenden Text, der über diesem Bild platziert wird.

• So erstellen Sie mit Stripo ein E-Mail-Banner

Erstellen Sie zunächst eine einspaltige Struktur für Ihr zukünftiges E-Mail-Banner. Ziehen Sie anschließend unseren Banner-Block per Drag & Drop in diese Struktur.

Wenn Sie auf diesen Block klicken, öffnet sich ein Menü, über das Sie ein Bild zu Ihrem Banner hinzufügen können. Die Vorgehensweise entspricht der, die wir bereits im Abschnitt „Bilder hinzufügen“ beschrieben haben.

Sobald Sie Ihr Bild hinzugefügt haben, steht Ihnen der Einstellungsbereich für den Banner-Block zur Verfügung. Dort können Sie die Größe Ihres Banners ändern, es zuschneiden, einen Link hinzufügen, um es anklickbar zu machen, den gesamten Banner-Block auf verschiedenen Geräten ausblenden, Alternativtext hinzufügen sowie Ränder festlegen und den Block in verschiedene E-Mail-Versionen einbinden.

Und vergiss nicht die Option „Stile“, in der du die Drehung deines Bannerbildes, die Hintergrundfarbe oder einen Filter festlegen kannst.

Darüber hinaus verfügt dieser Block über eigene Optionen zum Hinzufügen von Texten und Bildern über deinem Banner. Andere Optionen sind ausgegraut, da sie sich noch in der Entwicklung befinden und noch nicht verfügbar sind.

Wenn Sie auf die Schaltfläche „Text“ klicken, wird ein bearbeitbares Textelement hinzugefügt, in das Sie den gewünschten Text eingeben können. Für diesen Text steht Ihnen ein spezielles Optionsmenü zur Verfügung, in dem Sie Schriftarten, Stil, Deckkraft, Drehung und vieles mehr auswählen können. Sie können die Position Ihres Textelements auch ändern oder es drehen, indem Sie auf die weißen Punkte in den Ecken und am oberen Rand des quadratischen Rahmens klicken und diese ziehen.

Wenn Sie auf die Bildschaltfläche klicken, öffnet sich dasselbe Menü zum Hinzufügen von Bildern.

Sobald das Bild hinzugefügt wurde, verfügt es ebenfalls über ein eigenes Optionsmenü, das dem des gesamten Banners entspricht. So können Sie das weitere Bild ganz nach Ihrem Stil und Ihren Anforderungen bearbeiten.

8. Bild-Rollover-Effekt

Der Bild-Rollover-Effekt hilft Ihnen, Ihre Kunden zu unterhalten und zu begeistern. Außerdem sparen Sie wertvollen Platz in E-Mails, da Sie Produktdetails hinter dem Foto verbergen können. Sie können auch kleine Spiele mit den Empfängern veranstalten, indem Sie sie beispielsweise nach dem Gutschein „suchen“ lassen. Es gibt viele Gründe, warum Sie Ihren E-Mails einen Bild-Rollover-Effekt hinzufügen sollten.

Aber wie können Sie einen solchen Effekt eigentlich erstellen? Diese Technik wurde von unseren Programmierern entwickelt und an unser System sowie – was noch wichtiger ist – an die gängigen E-Mail-Clients angepasst.

• So erstellen Sie einen Bild-Rollover-Effekt mit Stripo

Das Erstellen von Rollover-Bildern ist ganz einfach. Fügen Sie zunächst Ihr Bild an der gewünschten Stelle in der E-Mail ein und klicken Sie darauf, um die Einstellungen zu öffnen. Dort finden Sie die Option „Rollover-Effekt“.

Wenn Sie auf diese Option klicken, öffnet sich ein weiteres Menü zum Hinzufügen eines Bildes, in dem Sie das Bild auswählen können, das beim Bewegen des Mauszeigers angezeigt werden soll.

Sobald das Bild hinzugefügt wurde, kannst du es genauso wie jedes andere Bild in Stripo ersetzen oder bearbeiten.

Wichtiger Hinweis: Diese Funktion wird nur von Yahoo! Mail, Ukr.net, AOL, Gmail, iCloud Mail, Outlook 2003, Outlook für Mac und macOS Apple Mail (nur Desktop) unterstützt. Außerdem müssen Ihre Bilder pixelgenau dieselbe Größe haben.

9. Videos in E-Mails einfügen

Stripo bietet zwei Möglichkeiten, Videos in Ihre E-Mail-Vorlagen einzufügen:

1. Einfügen von Videos mithilfe unseres speziellen Video-Blocks.
2. Einbetten von Videos über Code.

(Quelle: E-Mail von Charity: Water)

Wir stellen Ihnen beide Möglichkeiten vor, damit Sie besser entscheiden können, welche für Sie am besten geeignet ist.

• Weg 1: Einfügen eines Videos mit dem Video-Block

Dies ist eine absolut sichere Methode zum Einbinden von Videos, da sie in allen E-Mail-Programmen und auf allen Geräten einwandfrei funktioniert.

Ziehen Sie zunächst unseren Video-Block per Drag & Drop in eine beliebige Struktur und klicken Sie auf diesen Block.

Sobald du darauf klickst, wird ein spezielles Optionsmenü für diesen Block angezeigt, in dem du alle erforderlichen Anpassungen vornehmen kannst.

Das Wichtigste ist, dass Sie in die entsprechenden Felder einen Link zu dem Video einfügen, das Sie hinzufügen möchten. Sobald Sie dies getan haben, ruft unser Editor automatisch das Video und dessen Miniaturansicht ab und erstellt einen Alternativtext auf der Grundlage des Videotitels (Sie können den Alternativtext bei Bedarf noch ändern).

Du kannst das Vorschaubild jederzeit über unser Steuerelement „Benutzerdefiniertes Vorschaubild“ ändern, das die vertraute Oberfläche zum Hinzufügen von Bildern öffnet. Darüber hinaus kannst du über das Steuerelement „Stile für die Wiedergabetaste“ das Aussehen der Wiedergabetaste anpassen oder diese ganz ausblenden. Vergiss nicht, die Größe des Blocks anzupassen und festzulegen, ob das Vorschaubild responsiv sein soll oder nicht (ein responsives Bild passt seine Größe automatisch an die Bildschirmgröße an, auf der es angezeigt wird).

• Weg 2: Einbetten von Videos

Ein eingebettetes Video ist ein Video, das direkt in E-Mails abgespielt wird. Die Empfänger müssen nicht auf eine andere Website wechseln, um das Video anzusehen.

Stripo stellt seinen Nutzern einen universellen Code zur Verfügung, mit dem Sie allen Ihren Abonnenten das Video bereitstellen können, das Sie teilen möchten.

Wir empfehlen, die folgende Reihenfolge einzuhalten:

1. Betten Sie diesen Code in eine E-Mail-Vorlage ein.
2. Passen Sie den Code an, indem Sie Ihre URL-Links einfügen.

So betten Sie ein Video in Stripo ein

Hier verwenden wir unseren HTML-Block, der für die bequeme Arbeit mit E-Mail-Code erstellt wurde. Ziehen Sie diesen Block per Drag & Drop an eine beliebige Stelle in Ihrer Vorlage.

Klicken Sie darauf, um unseren integrierten Code-Editor zu öffnen, der Ihnen zeigt, was hinter den Kulissen Ihrer E-Mail-Vorlage steckt.

Kopiere nun diesen Code zum Einbetten eines Videos:

<video class="adapt-img" controls="controls" poster="https://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" width="100%" height="313">

<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm">



<!-- fallback -->



<a href="https://www.youtube.com/watch?v=ryqOEPk51Lg/" class="esd-frame-element esd-hover-element esdev-disable-select">

<img class="adapt-img" src="https://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" alt="" width="100%" height="313"></a>

</video>

Füge ihn hier ein (ersetze also einfach diesen Platzhaltertext) und klicke auf „Code anwenden“:

Nach dem Einfügen sehen Sie ein einfaches Layout eines eingebetteten Videoplayers mit unserem Beispielvideo.

Jetzt musst du nur noch die Links durch deine eigenen ersetzen, damit dein Video abgespielt wird. Alle Links, die du ändern musst, findest du hier:

1. Der erste Link ist ein Miniaturbild. Zwar können einige Geräte anhand eines MP4-Videos ein Miniaturbild generieren, doch wird dieses Bild auf dem iPhone X und auf Geräten mit Retina-Displays nicht angezeigt. Fügen Sie diesen Link hinter dem Attribut „Poster“ ein.
2. Die nächsten beiden Links sind Links zu unseren Videodateien in den Formaten .MP4 und .WebM. Links zu YouTube oder Vimeo funktionieren hier nicht. Ersetzen Sie die Links, die hinter dem Attribut „source src“ stehen, durch Ihre eigenen Links.
3. Die beiden anderen Links, die auf das Wort „fallback“ folgen, sind Links zu einem YouTube-Video und dessen Vorschaubild. Dies ist unser Fallback für E-Mail-Clients, die eingebettete Videos nicht unterstützen. Laden Sie Ihr Video auf YouTube oder Vimeo hoch und laden Sie das zweite Bild hoch, das als Miniaturbild verwendet wird. Ersetzen Sie die Links, die auf die Attribute „href“ und „src“ folgen, durch Ihre eigenen.

​10. Hinzufügen von CTA-Schaltflächen

Eine Schaltfläche ist im Grunde genommen ein ansprechend gestalteter URL-Link. Sie sollte gut sichtbar sein, und ihr Text muss klar und prägnant sein.

Bisher haben Sie die Stile für alle Ihre Schaltflächen im Bereich „Allgemeine Stile“ festgelegt. Wenn Sie jedoch einer neuen Schaltfläche einen einzigartigen Look verleihen möchten, gehen Sie wie folgt vor.

• So erstellen Sie einen CTA-Button mit Stripo

Die Erstellung eines CTA-Buttons ist ganz einfach. Ziehen Sie einen Button-Block per Drag & Drop an eine beliebige Stelle in Ihrer Vorlage.

Klicken Sie anschließend auf diese Schaltfläche, um die Einstellungen zu öffnen, in denen Sie alle erforderlichen Anpassungen vornehmen können.

Das Wichtigste bei jedem CTA sind ein verlinkter Link und eine ansprechende Botschaft, die Aufmerksamkeit erregt und einen Grund zum Klicken auf die Schaltfläche vermittelt. Fügen Sie den gewünschten Link und den Schaltflächentext in die entsprechenden Felder ein.

Als Nächstes sollten Sie die Ausrichtung Ihrer CTA-Schaltfläche und deren Höhe anpassen (Sie können die genaue Höhe für jede Schaltfläche in der E-Mail festlegen), ein Symbol hinzufügen und entscheiden, ob diese Schaltfläche auf verschiedenen Geräten ausgeblendet werden soll oder nicht.

In den Grundeinstellungen können Sie außerdem Abstände und Ränder festlegen, Ihren CTA in verschiedene E-Mail-Versionen einfügen und einen Anker-Link hinzufügen.

Um das Design Ihrer CTA-Schaltfläche anzupassen, klicken Sie auf den Abschnitt „Stile“, um ein neues Einstellungsmenü zu öffnen, in dem Sie alle Designoptionen vornehmen können. Sie können die Farben der Schaltfläche und die Schriftarten (Größe, Farbe, Textstile innerhalb der Schaltfläche) ändern, die Schaltfläche so einstellen, dass sie sich dem gesamten Container anpasst, eine Hintergrundfarbe oder ein Hintergrundbild hinzufügen, verschiedene Rahmen festlegen und vieles mehr.

• Option für Hover-Schaltflächen

Wenn Sie einen Hover-Effekt auf Ihre Schaltflächen anwenden möchten, müssen Sie in den allgemeinen Einstellungen die Option „Hover-Schaltflächenstile“ aktivieren. Dadurch ändern alle Schaltflächen ihr Aussehen, sobald Sie mit der Maus darüberfahren. In diesem Bereich können Sie die Stile des Hover-Effekts feinabstimmen, beispielsweise die Farben der Schaltflächen, die Schriftarten und die Rahmen.

So können Hover-Schaltflächen aussehen.

11. Erstellen von Produktinhaltsmodulen

Nun, dieser Abschnitt ist recht komplex, da er eine Reihe von Blöcken und Elementen enthält.

(Quelle: E-Mail von M&M's)

Normalerweise bestehen solche Produktkarten aus einer Produktvorschau, einer kurzen Beschreibung, dem Preis und einem CTA-Schaltfläche.

Einige Marken, wie beispielsweise M&M’s, fügen vor der Produktpräsentation eine kurze Einleitung ein, während andere die Produktwerbung direkt unter dem Banner oder dem Video platzieren; die Entscheidung liegt ganz bei Ihnen.

Um eine ähnliche Produktkarte zu erstellen, beginnen Sie mit einer 2-spaltigen Struktur, fügen Sie einen Bildblock in eine beliebige Spalte ein und nehmen Sie die erforderlichen Änderungen vor.

Füge anschließend direkt neben deinem Bild einen Textblock in die Struktur ein. Füge deinen Text ein und passe Formatierung, Schriftarten und andere Details an.

Denken Sie daran, dass Sie mehrere Blöcke direkt nebeneinander einfügen können, um weitere Informationen hinzuzufügen und Ihre Produktkarten ganz nach Ihren Wünschen zu gestalten.

Sobald die Texte fertig sind, fügen Sie direkt darunter einen Schaltflächenblock ein. Fügen Sie die erforderlichen Links hinzu und passen Sie ihn mithilfe der integrierten Optionen an Ihren Stil an.

Sie haben volle kreative Freiheit, und Produktkarten lassen sich ganz einfach erstellen, da sie aus einfachen, bearbeitbaren Blöcken bestehen.

Wenn du ein oder zwei weitere Module ähnlich wie dieses erstellen möchtest, musst du mit der Maus über die von dir erstellte Produktkarte fahren und auf die Schaltfläche „Duplizieren“ klicken.

Anschließend erscheint direkt unter dem Original eine kopierte Version dieser Produktkarte. Diese kannst du nun ebenfalls bearbeiten, um weitere Produktkarten zu erstellen.

12. Countdown-Timer für E-Mails erstellen

Countdown-Timer in E-Mails erzeugen ein Gefühl der Dringlichkeit, informieren die Empfänger über die Dauer eines Sonderangebots oder lassen sie wissen, wie bald ein bestimmtes Ereignis beginnt.

(Quelle: E-Mail von Malooka)

Sie können einen Timer direkt im Editor erstellen, gestalten und zu Ihrer HTML-E-Mail-Vorlage hinzufügen.

• So erstellen und fügen Sie mit Stripo einen Countdown-Timer in E-Mails ein

Um Ihren eigenen Timer zu erstellen, ziehen Sie unseren speziellen Timer-Block per Drag & Drop in einen beliebigen Container und klicken Sie darauf.

Anschließend erscheint ein Einstellungsmenü mit einem Kalender, der sich automatisch öffnet, sodass du das richtige Datum und die richtige Uhrzeit für deinen Countdown auswählen kannst.

Sobald du Datum und Uhrzeit eingestellt hast, beginnt der Timer automatisch mit dem Countdown. Jetzt ist es an der Zeit, einige Anpassungen vorzunehmen.

Sie können die genaue Zeitzone für Ihren Timer einstellen, um es Ihrem Publikum, das in verschiedenen Ländern und Zeitzonen lebt, bequemer zu machen. Darüber hinaus können Sie verschiedene Links zu Ihrem Timer hinzufügen, um ihn zu teilen, anzupassen oder die Klickbarkeit zu verbessern, damit Ihr Publikum auf die gewünschten Seiten weitergeleitet wird.

Mit „Tage anzeigen“ und „Digitale Bezeichnungen“ können Sie festlegen, ob Sie Tage auf Ihrem Timer anzeigen möchten und ob allgemeine Bezeichnungen wie Stunden, Minuten und Sekunden erscheinen sollen (sobald diese Option deaktiviert ist, werden nur noch Ziffern angezeigt).

Du kannst außerdem die Groß-/Kleinschreibung deiner Beschriftungen ändern, die richtige Sprache auswählen und ein Trennzeichen eingeben, das zu deinem Stil passt. Und vergiss nicht die Option „Ablaufbild“: Damit kannst du ein beliebiges Bild hinzufügen, das den Empfängern angezeigt wird, sobald der Countdown bei Null angelangt ist.

Die Optionen unter „Stile“ sind sehr umfangreich und ermöglichen es dir, das Aussehen der Ziffern, Beschriftungen und Trennzeichen anzupassen, damit der Timer zu deinem Gesamtdesign passt.

13. Ein Trennzeichen einfügen

Ein Trennzeichen, auch als Trennlinie bezeichnet, trägt weder zur Steigerung der Konversionsrate noch zu anderen Zielen bei. Es handelt sich lediglich um ein dekoratives Element, das E-Mails strukturierter erscheinen lässt und dazu beiträgt, dass der Inhalt der E-Mail besser und übersichtlicher wahrgenommen wird.

• So fügen Sie mit Stripo einen Trennzeichen in E-Mails ein

Das Hinzufügen eines Trennzeichens zu Ihrer E-Mail ist ganz einfach. Ziehen Sie einfach die 1-Spalten-Struktur in Ihre HTML-E-Mail-Vorlage und legen Sie dann den Trennzeichen-Block innerhalb dieser Struktur ab.

Klicken Sie auf diesen Block, um seine Einstellungen zu öffnen. Hier können Sie zwischen zwei Optionen wählen, wie Ihr Spacer aussehen soll: als reguläre Linie oder als unsichtbarer Abstand. Außerdem können Sie dessen Breite, Stil, Farbe, Rahmen und Ausrichtung festlegen.

Beachten Sie, dass alle von Ihnen hinzugefügten Spacer ihre Hintergrundfarben aus den Optionen unter „Allgemeine Stile“ übernehmen. Wenn Sie diese also ändern möchten, müssen Sie dies manuell für jeden hinzugefügten Spacer über die Option „Block-Hintergrundfarbe“ tun.

Legen Sie hier die genauen Abstände fest, fügen Sie einen Anker-Link hinzu (falls erforderlich) und wählen Sie aus, ob Ihr Trennzeichen in verschiedenen E-Mail-Versionen angezeigt oder ausgeblendet werden soll.

14. Einfügen von Social-Media-Symbolen

Symbole für soziale Netzwerke, auch Social-Media-Symbole genannt, können an beliebiger Stelle platziert werden: im Menü, in der Fußzeile oder irgendwo in der Mitte einer E-Mail – ganz wie es Ihnen am besten passt.

• So fügen Sie mit Stripo Social-Media-Symbole hinzu

Das Hinzufügen von Social-Media-Symbolen ist ganz einfach, da wir dafür einen speziellen Block bereitstellen, den Sie verwenden können. Ziehen Sie den Block „Social Networks“ per Drag & Drop in Ihre Vorlage und klicken Sie darauf, um die Einstellungen zu öffnen.

Standardmäßig ist ein Social-Media-Symbol aktiviert. Um weitere Social-Media-Symbole hinzuzufügen, klicke auf die Plus-Schaltfläche und wähle eines aus der Dropdown-Liste aus (da du die Social-Media-Symbole einzeln hinzufügen musst, musst du diesen Vorgang mehrmals wiederholen, um alle gewünschten Symbole hinzuzufügen).

Sobald sie hinzugefügt wurden, erscheinen sie im Design, und du musst nur noch die Links zu deinen Social-Media-Kanälen in die entsprechenden Eingabefelder einfügen. Wenn du eines der Social-Media-Symbole löschen möchtest, klicke einfach auf das Papierkorb-Symbol neben dem Symbol, das du löschen möchtest.

Über dieses Dropdown-Menü kannst du auch das Aussehen aller deiner Symbole ändern, indem du eine der vielen Designoptionen auswählst.

Vergessen Sie auch nicht die zusätzlichen Anpassungsmöglichkeiten, die für den gesamten Block „Soziale Netzwerke“ gelten, wie beispielsweise die Größe der Symbole, der Abstand zwischen ihnen, die Titel, die Hintergrundfarbe und vieles mehr. Mit diesen Optionen können Sie die Details Ihres Social-Media-Blocks genau auf das Gesamtdesign und die gewünschten Elementgrößen abstimmen.

Du kannst auch in den Projekteinstellungen festlegen, welche Social-Media-Symbole in deinem Social-Block angezeigt werden sollen, sobald du ihn hinzufügst. Gehe in deinem Konto zu „Einstellungen“, dann zu „Arbeitsbereich“ und anschließend zu „Projekte & Gruppen“ und wähle das gewünschte Projekt aus.

Klicken Sie anschließend auf die Registerkarte „Soziale Netzwerke“. Hier können Sie die gewünschten Social-Media-Plattformen einrichten, indem Sie diese hinzufügen und jeweils einen Link zu ihnen verknüpfen.

Wähle aus einer großen Auswahl an Social-Media-Symbolen und richte deinen Social-Block ganz nach deinen Wünschen ein.

15. E-Mail-Fußzeile erstellen

Die E-Mail-Fußzeile enthält in der Regel Kontaktinformationen wie Ihre Website-Adresse, den Grund für die Kontaktaufnahme mit den Empfängern, Links zu Ihren Social-Media-Konten, die hinter den Social-Media-Symbolen verborgen sind, den Abmeldelink sowie den Namen der für den Newsletter verantwortlichen Person. Letzteres ist optional, alle davor stehenden Elemente sind jedoch obligatorisch.

• So erstellen Sie eine E-Mail-Fußzeile mit Stripo

Dies ist ein zusammengesetztes Element von E-Mails. Um eine solche Fußzeile zu erstellen, müssen Sie eine Struktur mit der gewünschten Anzahl an Spalten per Drag & Drop einfügen, die erforderliche Anzahl an Textblöcken hinzufügen, Ihre Texte einfügen und diese bearbeiten. Fügen Sie anschließend einen Block für soziale Netzwerke hinzu und passen Sie ihn an Ihre Anforderungen hinsichtlich der sozialen Medien an, die Sie bewerben möchten.  

16. Hintergrundfarbe und -bild

Hintergründe, die auf einzelne Container/Stripes (auch bekannt als Zeilen) angewendet werden, helfen dir dabei, die Aufmerksamkeit der Empfänger auf bestimmte Elemente zu lenken. Hintergründe, die auf die gesamte E-Mail angewendet werden, verleihen deinem Design ein einheitliches und abgerundetes Erscheinungsbild. Du hast deine Hauptfarbe für den Hintergrund bereits zuvor festgelegt, aber hier findest du eine kurze Anleitung, wie du sie für ein einzelnes Designelement der E-Mail einrichtest.

In diesem Beispiel werden wir einer Struktur eine Hintergrundfarbe zuweisen.

• So legen Sie eine Hintergrundfarbe für eine Struktur fest

Klicken Sie zunächst auf ein beliebiges Element in der Struktur und rufen Sie die Optionen unter „Stile“ auf (es ist wichtig, dass Sie genau auf die Struktur klicken, da durch einen Klick auf den Container die Containereinstellungen geöffnet werden, was in diesem Fall nicht gewünscht ist).

Klicken Sie auf die Option „Hintergrundfarbe“, um eine Farbpalette zu öffnen, in der Sie die gewünschte Hintergrundfarbe für Ihre Struktur auswählen können.

Wenn Sie die genaue Farbnummer kennen, können Sie diese in dieses Eingabefeld einfügen.

Um die Farbe für den gesamten E-Mail-Hintergrund festzulegen, gehen Sie zu den Einstellungen unter „Allgemeine Stile“ und „Layout“ und passen Sie die Option „Allgemeine Hintergrundfarbe“ an.

• So legen Sie ein Hintergrundbild für die gesamte E-Mail fest

Das Hintergrundbild wird nur auf Desktop-Geräten angezeigt. Auf Mobilgeräten wird es nicht angezeigt. Klicken Sie unter „Allgemeine Stile und Layout“ auf die Option „Hintergrundbild“. Es öffnet sich ein bekanntes Menü zum Hinzufügen von Bildern. Wählen Sie ein Bild aus der Bilddatenbank aus oder laden Sie eines von Ihrem Gerät hoch, um dieses Bild als Hintergrund für Ihre E-Mail festzulegen.

Dein Hintergrundbild ist beigefügt, wird jedoch standardmäßig positioniert. Du musst daher einige Anpassungen vornehmen, damit es zu deiner Designvorstellung passt.

Sie können Ihr Hintergrundbild so einstellen, dass es sich über die gesamte E-Mail wiederholt, seine horizontale und vertikale Position ändern sowie die genaue Breite und Höhe festlegen.

17. Betreffzeilen und Vorkopfzeilen schreiben

Um eine Betreffzeile und eine Vorkopfzeile hinzuzufügen, gehen Sie zu den Nachrichteneinstellungen und füllen Sie die beiden entsprechenden Felder aus.

Sie können beliebigen Text hinzufügen und Ihre Botschaft mit Emojis unterstreichen.

Das Gleiche gilt für Vorkopfzeilen, mit der zusätzlichen Möglichkeit, diese mit Leerzeichen aufzufüllen.

Wenn Sie keine Zeit haben, Betreffzeilen selbst zu verfassen, können Sie jederzeit auf die Funktionen von GenAI zurückgreifen und auf die Schaltfläche „Mit KI verbessern“ klicken. Dort können Sie eine beschreibende Eingabeaufforderung verfassen, um die Kreativität der KI zu nutzen und innerhalb von Sekunden eine perfekte Betreffzeile oder einen perfekten Vorkopfzeilen zu generieren.

18. Anpassung Ihrer E-Mail an mobile Geräte

Alle Designänderungen, einschließlich Abmessungen und Abstände, werden standardmäßig auf die Desktop-Version der E-Mail angewendet. Sie können jedoch jede Einstellung auch speziell für die mobile Version der E-Mail anpassen.

Um in diesen Modus zu wechseln und die mobile Version der E-Mail zu gestalten, klicken Sie auf diese Schaltfläche.

Nach dem Anklicken werden diese Stileinstellungen (und vieles mehr für jedes der E-Mail-Elemente)

Wird zu Folgendem:

Darüber hinaus wird im Editor die mobile Version der E-Mail so angezeigt, wie sie auf diesen Geräten erscheinen wird.

Außerdem kannst du auf Mobilgeräten verschiedene Elemente ausblenden, wenn sie deine Designvorstellung für Mobilgeräte beeinträchtigen, während die Darstellung auf Mobilgeräten dennoch hervorragend aussieht. So erhältst du zwei verschiedene E-Mail-Versionen: eine für den Desktop mit allen Designelementen und eine für Mobilgeräte, bei der einige Elemente ausgeblendet sind (oder umgekehrt).

Und vergiss nicht die Option „Containerumkehr“, die die Position von Containern auf Mobilgeräten ändert (zuerst muss die Option „Responsive Struktur“ auf diese Struktur angewendet werden, erst dann kannst du „Containerumkehr“ verwenden).

So sieht es aus.

19. Vorschau und Testen Ihrer E-Mails

Sehen Sie sich Ihre E-Mails immer in der Vorschau an und testen Sie sie, bevor Sie sie an die Empfänger versenden. In Stripo haben Sie die Möglichkeit, Ihre Vorlagen ganz einfach in der Vorschau anzusehen und zu testen, bevor Sie Ihre E-Mail-Entwürfe veröffentlichen. 

• So zeigen Sie eine Vorschau Ihrer E-Mail in Stripo an

Wenn Sie mit der Gestaltung Ihrer Vorlage fertig sind, klicken Sie auf die Schaltfläche „Vorschau“ oberhalb der Vorlage.

Hier sehen Sie unseren Vorschaumodus, in dem Sie sich ansehen können, wie Ihre Vorlage auf Desktop- und Mobilgeräten dargestellt wird.

Sie können Ihre E-Mail auch im hellen und im dunklen Design anzeigen, indem Sie auf diese Schaltflächen klicken.

• So versenden Sie eine Test-E-Mail mit Stripo

Eine weitere Möglichkeit, Ihre E-Mail zu testen, besteht darin, sie einfach an Ihren Posteingang zu senden, um zu sehen, wie sie unter realen Bedingungen in E-Mail-Clients aussieht. Klicken Sie auf die Schaltfläche „Testen“, um dieses kleine Fenster zu öffnen.

Füge die für den Test benötigten E-Mail-Adressen in das entsprechende Feld ein und klicke auf die Schaltfläche „Test senden“. Sobald dies geschehen ist, erhältst du eine Test-E-Mail, die du überprüfen kannst.

• So testen Sie E-Mails in allen gängigen Umgebungen

Nachdem Sie nun eine Vorschau der Mobil- und Desktop-Versionen Ihrer E-Mails angesehen und sich selbst eine Test-E-Mail gesendet haben, um alle möglichen kleinen Probleme zu erkennen und zu beheben, sollten Sie diese E-Mail auch genau so sehen, wie sie Ihren Abonnenten angezeigt wird, um sicherzustellen, dass Sie eine E-Mail mit korrektem Layout versenden. 

Dank unserer Integration mit Email on Acid können Sie Ihre E-Mails nun direkt in Stripo in gängigen Kombinationen aus E-Mail-Clients und Geräten in der Vorschau anzeigen.

Klicken Sie im selben Testmenü auf den Abschnitt „E-Mail-Clients“ und dann auf die Schaltfläche „Test ausführen“.

Sie starten den Test Ihrer Vorlage auf verschiedenen Geräten und Plattformen. Sobald der Test abgeschlossen ist, können Sie auf die einzelnen Ergebnisse klicken, um sie genauer anzusehen.

Wählen Sie genau die Plattformen aus, auf denen Sie Ihre E-Mail testen möchten, und sehen Sie sich an, wie Ihre Vorlage sowohl im hellen als auch im dunklen Design aussieht. Stellen Sie sicher, dass Ihre E-Mail einwandfrei dargestellt wird, unabhängig davon, auf welchem Gerät oder in welchem E-Mail-Programm sie geöffnet wird.

20. Barrierefreiheitstests für E-Mails

Vergessen Sie nicht, die Barrierefreiheit zu testen, da die Wahrscheinlichkeit hoch ist, dass sich unter Ihren Empfängern Menschen mit Sehbehinderungen befinden. Ihr Design muss daher entsprechend darauf ausgelegt sein. Klicken Sie im Menü „Testvorlage“ auf den Abschnitt „Barrierefreiheit“ und anschließend auf „Test durchführen“.

Deine Vorlage wird einem kurzen Test unterzogen, der dir zeigt, was du in Bezug auf die Barrierefreiheit bereits gut umgesetzt hast und welche Mängel noch behoben werden müssen.

Wählen Sie eine bestimmte Sehbehinderung aus, anhand derer Sie Ihre E-Mail testen möchten, überprüfen Sie die Ergebnisse und passen Sie Ihr Design entsprechend an.

• So testen Sie die Einhaltung von Anti-Spam-Richtlinien bei E-Mails 

Es wäre schade, den gesamten Designprozess zu durchlaufen und dann, sobald Sie Ihre E-Mail versenden, im Spam-Ordner zu landen. Um dies zu vermeiden, können Sie Ihre E-Mail auf die Einhaltung von Anti-Spam-Richtlinien testen.

Klicken Sie auf den Abschnitt „Spam“ und dann auf die Schaltfläche „Prüfung starten“.

Ihre Vorlage wird umgehend mit gängigen Spamfiltern getestet, und Sie erhalten einige weitere kleine Ergebnisse, die ebenfalls Einfluss darauf haben, ob Ihre E-Mail als Spam markiert wird oder nicht.

Beachten Sie, dass jede mit Stripo erstellte E-Mail Code enthält, der vollständig für Screenreader angepasst ist, sodass Sie sich darüber keine Gedanken machen müssen.

21. Optimierung Ihrer E-Mail für das dunkle Design

Dunkle Designs sind heutzutage allgegenwärtig und lassen sich einfach nicht ignorieren. Daher ist es unerlässlich, dass Sie Ihr E-Mail-Design an dunkle Designs anpassen. Bilder, Schriftarten, Gestaltungselemente, Symbole und andere Designelemente können bei Verwendung des dunklen Designs völlig anders aussehen, daher sollten Sie darauf vorbereitet sein.

In Stripo können Sie sowohl helle als auch dunkle Designs mithilfe unserer Option „Anzeigebedingungen“ simulieren. Klicken Sie hier, um unsere Option zur Designsimulation zu sehen. Standardmäßig wird jede E-Mail im hellen Design erstellt.

Sobald du diese Einstellung geändert hast, kannst du genau sehen, wie deine E-Mail im dunklen Design aussehen wird, sodass du dein Design entsprechend anpassen kannst.

22. Anwendbare Anzeigebedingungen

Mit Anzeigebedingungen können Sie personalisierte E-Mails erstellen, indem Sie je nach bestimmten Bedingungen unterschiedliche Inhalte anzeigen. Nehmen wir beispielsweise eine E-Mail mit Sonderangeboten für Herren- und Damensneaker. Sie können diese beiden Blöcke in derselben E-Mail einrichten, aber unterschiedliche Anzeigebedingungen für sie festlegen, sodass Männer nur die für sie bestimmten Angebote sehen, während Frauen nur die für sie bestimmten Angebote sehen.

Erfahren Sie mehr über Anzeigebedingungen in unserem Hilfe-Artikel.

23. Zusammenarbeit mit Tools für die Teamarbeit

Sie müssen Ihre E-Mails nicht immer alleine erstellen. Arbeiten Sie mit Ihren Kollegen zusammen und erstellen Sie E-Mails gemeinsam in Echtzeit. Ihre Kollegen können Ihnen bei der Bearbeitung helfen und direkt neben Ihnen eigene Anpassungen am Design vornehmen. Außerdem können sie wertvolle Kommentare mit Feedback hinterlassen, auf die Sie eingehen können.

In unserem speziellen Artikel-Leitfaden erfahren Sie, wie das im Detail funktioniert.

24. Interaktive Inhalte einbinden 

Um Ihre E-Mail noch einzigartiger zu gestalten, können Sie mithilfe unserer speziellen Blöcke interaktive Inhalte hinzufügen. Sie können beispielsweise den Karussell-Block einfügen, wenn Sie eine Bildergalerie mit mehreren Bildern erstellen möchten.

Möchten Sie Platz in Ihrer E-Mail sparen? Nutzen Sie unseren Akkordeon-Block, der die darin enthaltenen Informationen ein- und ausklappen lässt.

Möchten Sie die Meinung Ihrer Zielgruppe erfahren? Fügen Sie unseren Formular-Block hinzu, in den die Empfänger ihre Antworten eingeben können, sodass Sie sehen können, welche Antwort aus welcher E-Mail Sie erhalten haben.

Der Hauptvorteil interaktiver Inhalte besteht darin, dass sie vollständig innerhalb der E-Mail funktionieren. Der Empfänger muss nicht auf eine Webseite eines Drittanbieters weitergeleitet werden. Das macht Ihre E-Mails viel ansprechender und interaktiver. 

Wichtiger Hinweis: Beachten Sie, dass nicht alle E-Mail-Clients interaktive Inhalte unterstützen. Wenn Sie beispielsweise E-Mails an Outlook senden, werden dort (noch) keine interaktiven Inhalte unterstützt.

Wenn Sie das Engagement in Ihren E-Mails steigern möchten, können Sie mit unserem Generator für interaktive Module noch mehr Interaktivität hinzufügen. Er bietet eine Reihe interaktiver Funktionen wie Glücksräder, Quizze, NPS-Fragebögen und vieles mehr, aus denen Sie wählen können. Und das Beste daran ist: Sie müssen kein technisch versierter Marketer sein, um diese interaktiven Module zu erstellen. Alles wird über eine intuitive Benutzeroberfläche erstellt, und Sie können das erstellte interaktive Modul ganz einfach speichern und herunterladen, um es für Ihre E-Mails zu verwenden.

25. E-Mail-Elemente als Module speichern

Sie können alle Arten von Inhalten zur späteren Verwendung in Ihrer persönlichen Bibliothek speichern: Elemente, Blöcke, Container, Module und Stripes.

Um ein Element zu speichern, müssen Sie lediglich mit der Maus darüber fahren und dann hier auf die Schaltfläche „Als Modul speichern“ klicken.

Das System fordert Sie im Einstellungsfenster auf, diesem Element einen Namen zu geben, um die Suche zu erleichtern.

Wenn Sie Module auf diese Weise speichern, können Sie ganze E-Mails erstellen, indem Sie Module einfach per Drag & Drop in Ihre Vorlage ziehen.

Wir empfehlen, die folgenden Elemente zu speichern und wiederzuverwenden: Kopf- und Fußzeilen, Kontaktinformationen sowie Container mit intelligenten Elementen. Erstere bleiben unverändert; bei letzteren müssen Sie einen neuen Link einfügen.

Stripo-Module bieten noch viel mehr Funktionen, die Ihnen das Leben erleichtern. Lesen Sie mehr darüber in unserem Artikel, in dem wir jede Modulfunktion im Detail erklären.

26. E-Mail an Ihren E-Mail-Anbieter senden

Sobald Ihre E-Mail fertiggestellt ist (also getestet und optimiert), können Sie sie ganz einfach an Ihren E-Mail-Anbieter senden. Stripo ist mit mehr als 90 E-Mail-Anbietern sowie E-Mail-Clients wie Gmail und Outlook, verschiedenen Anwendungen und vielem mehr integriert.

Das bedeutet, dass Sie Ihre E-Mails mit nur einem Klick in eines dieser Formate übertragen können. Sollten diese Optionen nicht ausreichen, laden Sie Ihre E-Mail als HTML/AMPHTML, PDF-Datei oder Bild herunter.

• So exportieren Sie Ihre E-Mail aus Stripo

Klicken Sie auf die Schaltfläche „Exportieren“ oberhalb der Vorlage.

Klicken Sie anschließend im sich öffnenden Menü auf den Bereich „E-Mail-Anbieter“, um die gesamte Auswahl an integrierten E-Mail-Dienstanbietern anzuzeigen.

Klicken Sie auf eine beliebige E-Mail-Anbieter-Option, um die Einstellungen vor dem Export zu öffnen, geben Sie die erforderlichen Informationen ein, und schon sind Sie fertig.

Der gleiche Vorgang gilt für den Export in Anwendungen und als Dateien (klicken Sie einfach auf die entsprechenden Menüabschnitte).

Tipps und Funktionen, um den Aufwand für die E-Mail-Erstellung mit Stripo deutlich zu reduzieren

So viele E-Mails, so wenig Zeit – das bedeutet, dass Sie Abstriche machen oder einen effizienten Prozess für das E-Mail-Design schaffen müssen. Wir bieten mehrere Funktionen, die Ihnen dabei helfen.

• Schaltflächen „Rückgängig“ und „Wiederherstellen“

Diese einfachen Schaltflächen helfen Ihnen, eine vorherige Aktion rückgängig zu machen oder von den rückgängig gemachten Aktionen zum aktuellen Stand Ihres E-Mail-Designs zurückzukehren.

So müssen Sie ein E-Mail-Element nicht noch einmal von Grund auf neu erstellen und haben mehr Spielraum zum Experimentieren mit dem Design.

• Versionsverlauf

So können wir sehen, wer wann Änderungen an unseren E-Mails vorgenommen hat. Und was noch wichtiger ist: Wir können jede beliebige Version Ihrer E-Mail wiederherstellen.

Dadurch müssen wir eine E-Mail nicht von Grund auf neu erstellen (falls Ihnen die zuletzt vorgenommenen Änderungen an der E-Mail nicht gefallen).

Sobald Sie auf diese „magische“ Schaltfläche klicken, werden Ihnen alle Versionen der E-Mail, alle Daten sowie die Namen derjenigen angezeigt, die die Änderungen vorgenommen haben.

• Duplizieren und Verschieben

Dies ist eine sehr praktische und schnelle Möglichkeit, ähnliche Elemente in E-Mails zu verwenden.

Wenn Sie beispielsweise eine Inhaltsstruktur entworfen haben, die perfekt zu Ihrer E-Mail passt, und diese in der gesamten E-Mail verwenden möchten, müssen Sie sie nicht immer wieder neu erstellen. Klicken Sie einfach auf die Schaltfläche „Duplizieren“, um eine Kopie dieser Struktur zu erstellen.

Anschließend klickst du auf die Schaltfläche „Verschieben“ und ziehst das kopierte Element an die gewünschte Stelle in deiner Vorlage. Das war’s schon.

• Vorlagen speichern und wiederverwenden

Das ist wahrscheinlich mein Lieblingsfeature. Wenn Sie täglich ähnliche E-Mails versenden müssen und nur einige Informationen darin aktualisieren, wie z. B. den Text oder das Banner, kopieren Sie einfach Ihre vorherige E-Mail. Und bearbeiten Sie die Elemente, die geändert werden müssen. Voilà!

• Erstellen einer einfachen E-Mail mit dem KI-Assistenten

Wenn du schnell ein grundlegendes Layout für deine E-Mail benötigst, kannst du jederzeit unseren KI-Assistenten nutzen. Du kannst eine kurze Beschreibung eingeben, worum es in deiner E-Mail geht und welche Elemente enthalten sein sollen, und dann auf die Schaltfläche „Generieren“ klicken.

Sobald dies erledigt ist, kannst du das Grundlayout optimieren und diese Vorlage speichern, um daran weiterzuarbeiten und auf dieser Grundlage eine vollständige E-Mail zu gestalten.

Zusammenfassung

Wie Sie sehen, verfügen Sie über alle notwendigen Werkzeuge, um eine E-Mail von Grund auf neu zu erstellen – und noch viel mehr. Wir hoffen, dass dieser Artikel Ihnen beim Einstieg hilft und eine perfekte Grundlage für zukünftige reibungslose E-Mail-Design-Prozesse mit Stripo schafft.