Demo-Editor Einloggen →
Design Marketing Vorlagen How-to AMP
~ 8 min gelesen
59031 Aufrufe
bewerten Sie es
23 Juni 2019

So erstellen Sie mit Stripo ein AMP-Karussell für Ihre E-Mails

Stripo / Blog / So erstellen Sie mit Stripo ein AMP-Karussell für Ihre E-Mails

Im März dieses Jahres veröffentlichte Google sein AMP für E-Mails. Und ab dem 2. Juli wird es auch für die G-Suite-Benutzer verfügbar sein und standardmäßig für alle Benutzer von Google Mail „eingeschaltet“ sein.

Wir wissen, dass es dadurch den Empfängern ermöglicht wird, notwendige Artikel in den Einkaufswagen zu legen, den Leuchtkasteneffekt auf Bilder anzuwenden und so weiter und so fort. Und natürlich können alle diese Aktionen jetzt direkt in E-Mails durchgeführt werden.

Dies ist die neue Ära im E-Mail-Marketing, die in der Tat zu großen Veränderungen führt: ESPs müssen jetzt ihre Protokolltypen ändern, Empfänger müssen lernen, dass E-Mails jetzt kleine Versionen von Websites sind und fast so funktional sind wie letztere, und wir als E-Mail-Marketingspezialisten müssen neue Programmierkenntnisse erwerben. Alle diese Änderungen sind so zeitaufwändig.

Die Zeit, die Sie für die E-Mail-Produktion aufwenden, durch die Automatisierung der meisten Bauprozesse zu reduzieren, war schon immer das Hauptziel von Stripo.

Deshalb sind wir bestrebt, die Erstellung von AMP-basierten E-Mails zu automatisieren. Am 18. Juni haben wir unseren Drag-n-Drop-Block „AMP- Karussell“ freigegeben.

Bevor ich zum Leitfaden komme, möchte ich die Vorteile der Erstellung von AMP-E-Mails mit Stripo hervorheben.

Warum Sie AMP-E-Mails mit Stripo erstellen sollten:

  1. Sie müssen keine AMPHTML-Code-Elemente („zum E-Mail-Header“) hinzufügen;
  2. Keine Programmierkenntnisse erforderlich - Sie verwenden ein bereits vorbereitetes Element;
  3. Zeitsparend - Sie fügen einfach die Links zu Ihren Bildern in dieses Inhaltsmodul ein;
  4. Für jedes einzelne Bild in Ihrem AMP-Karussell, das Sie mit uns erstellen, können Sie Links setzen, die den Leser zu den entsprechenden Seiten auf Ihrer Website führen.

Anleitung zum Erstellen von AMP-Karussells mit dem Stripo-Editor:

Der Aufbau eines AMP-Bildkarussells mit Stripo erfolgt in zwei Schritten:

Schritt 1. Bau des AMP-Karussells selbst

  • Ziehen Sie den AMP-Karussellblock in die HTML-E-Mail-Vorlage, mit der Sie arbeiten;

Building AMP Carousel_AMP Block

Sie werden sehen, dass dieses Element das Zeichen „⚡HTML“ in der Nähe hat. Das bedeutet, dass dieses Element nur in AMP-E-Mails angezeigt wird und in E-Mail-Clients, die AMP nicht unterstützen, ausgeblendet wird. Wir müssen einen Fallback für andere Empfänger schaffen. Darüber reden wir später.

AMPHTML-module-in-Email

  • Doppelklicken Sie darauf, um es in der Seitenleiste zu aktivieren;
  • Jetzt müssen Sie in der Seitenleiste den „Display-Button“ umschalten, wenn Sie kleine Vorschaubilder anzeigen möchten;
  • Legen Sie die Breite für diese Vorschaubilder fest;

Building AMP Carousel_Preview Image Button_De

  • Laden Sie Bild 1 für Ihr Slide hoch;
  • Geben Sie ALT-Text ein;
  • Fügen Sie einen Link zum jeweiligen Produkt ein; 

Edit Image Button_De

  • Klicken Sie auf die Schaltfläche „Slide hinzufügen“;

Building AMP Carousel_Add Slide Button

  • Machen Sie dasselbe mit den anderen Bildern;
  • Überprüfen Sie, ob die Größen aller Bilder übereinstimmen. Wenn dies nicht der Fall ist, schneiden Sie sie mit unserem Bildbearbeitungsprogramm zu;
  • Fertig! 

Bauen Sie jetzt ein AMP-Karussell mit Stripo

Wichtig zu beachten:

Ich habe 16 Slides hinzugefügt und sie haben alle in Gmail über mehrere Geräte hinweg ziemlich gut funktioniert. 

Schritt 2. Einen Fallback für andere Empfänger schaffen

Nun, da alle unsere Empfänger, die Gmail verwenden, dieses Karussell sehen werden, müssen wir an diejenigen denken, die andere E-Mail-Clients bevorzugen.

Das gerade erstellte AMP-Karussell funktioniert standardmäßig gut auf Desktops in Gmail. 

Für Andere müssen wir einen Fallback schaffen. 

In diesem Fall gibt es zwei Arten von Fallback:

Art 1: Interaktives Karussell

Wird nur von Apple-Geräten und Yahoo! Mail unterstützt.

  • Bauen Sie mit FreshInbox ein normales Inhaltskarussell auf;
  • Kopieren Sie den Einbettungscode;
  • Ziehen Sie den HTML-Block in Ihre E-Mail-Vorlage;
  • Doppelklicken Sie darauf, um den Code-Editor zu aktivieren;
  • Im Code-Editor, fügen Sie den Code ein;
  • Schließen Sie den Code-Editor;  

The-Close-the-Code-Editor-Button_Building-AMP-Emails-with-Stripo

  • Doppelklicken Sie auf dieses Modul direkt in der Vorlage, um die Seitenleiste zu aktivieren;
  • In der Seitenleiste, in der Zeile „Einschließen“, wählen Sie bitte die Option „HTML“. Dadurch stellen Sie sicher, dass dieses Inhaltsmodul nur in den E-Mail-Clients angezeigt wird, die AMP für E-Mails nicht unterstützen.

Include in HTML_De

Das bedeutet, dass jeder E-Mail-Client entscheidet, welche Version Ihres Karussells er zeigen möchte!

Wichtig zu beachten:

Wenn der E-Mail-Client eines Empfängers diese Art von Interaktivität nicht unterstützt, sieht er nur das erste Bild.

Für weitere Informationen zum Aufbau eines interaktiven Bildkarussells, lesen Sie bitte diesen Blogbeitrag.

Art 2. Statische Produktinhaltsmodule

  • Ziehen Sie eine 2-spaltige Struktur in Ihre E-Mail-Vorlage;
  • Platzieren Sie den Bildblock in die erste Spalte;
  • Laden Sie ein Bild hoch, das notwendig ist;
  • Platzieren Sie den Textblock in die zweite Spalte;
  • Bringen Sie diesen Text in eine passende Schriftart;
  • In der Seitenleiste, im Abschnitt „Einschließen“, wählen Sie bitte die Option „HTML“. Wie gesagt, indem Sie dies tun, stellen Sie sicher, dass dieses Inhaltsmodul nur in den E-Mail-Clients angezeigt wird, die AMP für E-Mails nicht unterstützen.  

Product-Content-Modules_Building-AMP-Emails

Sie können Ihrer E-Mail so viele Produktmodule hinzufügen, wie Sie benötigen. Für weitere Informationen darüber, wie Sie beim Erstellen ähnlicher E-Mail-Elemente Zeit sparen können, lesen Sie bitte diesen Blogbeitrag im Abschnitt „Kopieren und Verschieben von Elementen“.

Wichtig zu beachten:

Wenn Sie die Option „In HTML einbinden“ wählen, wird das ausgewählte Element in den E-Mail-Clients angezeigt, die nur den traditionellen HTML-Mime-Typ unterstützen.

Wenn Sie die Option „In AMPHTML einbinden“ (⚡HTML) wählen, wird das ausgewählte Element in den E-Mail-Clients angezeigt, die den MIME-Typ AMPHTML (text-x-amphtml) unterstützen.

Wenn keines von beiden für ein bestimmtes E-Mail-Element festgelegt ist, wird dieses Element über alle Geräte und alle E-Mail-Clients angezeigt.

Mit diesen einfachen Schritten haben wir ein einfaches AMP-Karussell gebaut - Sie haben Bilder ohne Beschreibung verwendet. Es funktioniert am besten, wenn Sie ein paar Artikel der gleichen Art oder das gleiche Produkt aus verschiedenen Blickwinkeln zeigen.

Aber was, wenn Sie ein komplexes Karussell mit informativeren Bildern und "Fake"-Buttons darüber brauchen? Sie können es immer noch mit Stripo erstellen, da unser Editor es erlaubt, Text zu Bildern hinzuzufügen und mehrere Filter anzuwenden ;)

Erstellung eines AMP-Karussells mit Beschreibung und „Buttons“ über Bildern

Also, zuerst einmal müssen Sie ein normales AMP-Karussell erstellen, wie im obigen Abschnitt beschrieben. Kommen wir nun zum Design der Slides:

a) Text auf Bilder schreiben

  • Sobald Sie das Bild hochgeladen haben, öffnen Sie die Bildbearbeitung;

Edit Image Button_De

  • Wählen Sie in der Seitenleiste der Bildbearbeitung die Option „ATEXT“, um Text auf Ihren Bildern zu platzieren. Die Bildbearbeitung bietet über 1000 Schriften;  

Photo Editor_De

  • Wählen Sie die Schriftart und -farbe;
  • Klicken Sie in der rechten oberen Ecke der Bildbearbeitung den „Anwenden”-Button, um diese Parameter zu sichern.

b) Einen CTA- „Button“ auf Ihren Bildern platzieren

  • Zuerst müssen Sie diesen Button vorbereiten - das Bildformat sollte SVG oder ein anderes mit transparentem Hintergrund sein;
  • Klicken Sie in der linken oberen Ecke in der Seitenleiste den Button „Öffnen“;
  • Wählen Sie die Option „Overlay-Bild”;

Embedded Photo Editor_Adding Second Image_De

  • Laden Sie Ihr Button-Bild hoch;
  • Platzieren Sie es genau dort, wo Sie es auf Ihrem Slide sehen möchten;
  • Stellen Sie die Größen ein;
  • Klicken Sie auf den Button „Speichern“, um die Änderungen, die Sie am Slide vorgenommen haben, zu speichern.

Embedded Photo Editor Save Button_De

Hier ist nun also, was wir soeben gemeinsam erstellt haben:

Welche E-Mail-Clients unterstützen AMP heute?

  • Gmail Desktop — funktioniert bereits;
  • Mail.ru — funktioniert bereits.

Yahoo, AOL und Outlook werden es bald haben.

Schlussworte

Wir haben gerade 2 AMP-Karussells gebaut, ohne den HTML-Code Editor zu öffnen. Alle Slides jeder Art zeigen den Empfängern Ihre Produkte aus verschiedenen Blickwinkeln oder die neuesten Artikel aus Ihrer Kollektion. Und jedes Slide, führt die Empfänger zu den entsprechenden Seiten Ihrer Website, sobald es angeklickt wird. Dies ist eine gute Möglichkeit, Ihre E-Mails zu beleben, besser mit Ihrem Publikum zu interagieren und E-Mails funktionaler zu gestalten.

Um zu erfahren, wie Sie Ihre AMP-E-Mails vorab ansehen und exportieren können, lesen Sie bitte die entsprechenden Abschnitte in unserem Blogbeitrag.

Die Erstellung von AMP-basierten E-Mails kann ein Kinderspiel sein, wenn Sie den Stripo E-Mail-Vorlagengenerator verwenden ;)

Bitte beachten Sie, dass Sie bei Google auf die Whitelist gesetzt werden müssen, um AMP-E-Mails versenden zu können.

Probieren Sie Stripo aus

Elly Peers vor 2 Jahren

How does this look / functon in other non-AMP compatible email providers? Like older Outlooks for exmaple? Thanks

Hanna Kuznietsova kommentiert Elly Peers vor 2 Jahren

Hello, Elly. Thank you for your question. If your ESP or a recipient's email client is not on the list, he or she will see just the traditional HTML version of your email. And AMP element will be just cut off. List of ESPs that currently support AMP: 1. eSputnik — via the API method only. The SMTP method will be added soon; 2. Amazon SES and PinPoint — via the API method only; 3. SparkPost — via the SMTP and API methods; 4. SendGrid — via the API method only; As for email clients, only two do support AMP today: Gmail; Mail.ru. Outlook says they are about to release AMP support this summer. In this blog post, we show how to build and add a fallback in your email to make sure all recipients see your promo emails. Thank you. Hope this helps.

Sie könnten interessiert sein an

vorherige nächste
4 Tage · 18 min gelesen
Beste Schriftarten für E-Mails: Tipps und Tricks zur Verwendung

Eines der größten Probleme bei der Erstellung von E-Mails ist die Wahl der richtigen Schriftart. Gewicht, Höhe, Breite, Farbe, Form, Abstände... Ist das alles wichtig? Ja, das tut es, aber eines der wichtigsten Dinge ist die Wahl einer lesbaren Schriftart. In diesem Beitrag zeigen wir Ihnen, wie Sie die beste professionelle Schriftart für E-Mails auswählen. Gestalten Sie elegante E-Mails mit Stripo im Handumdrehen mit unseren vorgefertigten Vorlagen Durchsuchen   HTML-Schriftarten für E-Mails: Zu beachtende allgemeine Regeln Es gibt drei Grundregeln,...

Design Vorlagen
Greatest Examples of GIF animations in Emails_Cover Image
27 Oktober 2021 · 10 min gelesen
16 großartige Beispiele für animierte GIFs in E-Mails

GIFs in E-Mails sind von großem Nutzen, wenn Sie Ihr Produkt präsentieren, die Aufmerksamkeit der Nutzer auf bestimmte Elemente lenken oder einfach nur Ihren Text etwas ausschmücken möchten. In diesem Artikel haben wir einige der besten Beispiele für E-Mail-GIF-Animationen zusammengestellt. Beispiele für animierte GIFs in E-Mails Hier ist eine Zusammenstellung der besten Beispiele mit GIFs in E-Mails. Jedes GIF erfüllt seine Aufgabe. 1. Adidas (Quelle: E-Mail von Adidas) Adidas verwendet E-Mail-Animationen, um zu zeigen, welche Farboptionen sie haben. Sieht ordentlich...

Design Marketing
08 April 2021 · 17 min gelesen
14 besten E-Mail-Signatur-Design-Beispiele

Gute E-Mail-Signaturen helfen uns, unser Unternehmen aufzubauen und einen guten Eindruck bei den Kunden zu hinterlassen. Da dies das letzte Element ist, das Menschen in E-Mails sehen, sollten wir unsere persönlichen Signaturen kreativ und einprägsam gestalten. Lassen Sie uns die besten Beispiele für E-Mail-Signaturen und ihre angemessene Verwendung in E-Mails und Newsletter-Vorlagen für E-Mails untersuchen. Es sollte erwähnt werden, dass alle Arten von Unternehmen professionelle E-Mail-Signaturen mit detaillierten Kontaktinformationen benötigen. Verwenden Sie diese Vorlage bei der Gestaltung einer E-Mail-Signatur Verwenden...

Design Marketing Vorlagen
banner9
11 September 2020 · 15 min gelesen
Die 10 besten kostenlosen Erstellungstools für E-Mail-Vorlagen 2021

Erstellungstools für E-Mail-Vorlagen scheinen irgendwie alle ähnlich zu sein? Sie sind nun unsicher, welches Sie wählen sollen, um die besten E-Mail-Vorlagen zu erstellen? Klar, es gibt schließlich eine ganze Menge von ihnen. Wir werden viele von ihnen auf ihre Unterscheidungsmerkmale hin untersuchen. Ich werde versuchen, die gleiche Vorlage in jedem der Editoren mit den gleichen Mediendateien zu erstellen. Mal sehen, ob die Erstellungstools sich unterscheiden. Für die Untersuchung haben wir Stripo.email und seine Wettbewerber ausgesucht: BEE Free, CampaignMonitor, EDM Designer,...

Design Marketing Vorlagen
Seien Sie immer auf dem Laufenden in Bezug auf aktuelle E-Mail-Marketing-Nachrichten, Leitfäden, Artikel und How-To's