Slider

Mit dem Email Builder können Sie einen Slider (oder Karussell) in E-Mails aufnehmen, um diese interaktiver zu gestalten: Die Empfänger können durch Inhalte (Bilder, Texte, Buttons) scrollen, um mehr zu entdecken, ohne den Umfang der E-Mail zu vergrößern.

Wie gewohnt empfiehlt es sich, einen Fallback-Inhalt zu konfigurieren, der in Umgebungen angezeigt wird, die dieses Format nicht unterstützen.

Einen Slider hinzufügen

Schritt 1: Fügen Sie das Slider-Element hinzu

Klicken Sie im Designbereich auf die Registerkarte „Elemente“ und ziehen Sie dann das Slider-Element in den gewünschten Abschnitt oder die Gruppe.

Schritt 2: Konfigurieren Sie die Haupteinstellungen

Geben Sie eine Breite und Höhe (in Pixeln) an. Diese Werte gelten für den gesamten Slider und die darin enthaltenen Slides. Sie sind für jede Ansicht anpassbar, Desktop, Tablet und Mobil.

Achten Sie insbesondere auf die Höhe und testen Sie, wie der Slider angezeigt wird, um zu vermeiden, dass Inhalte auf mobilen Geräten abgeschnitten werden. Nutzen Sie unbedingt den Spiegel-Link, um die Anzeige in verschiedenen Bildschirm-Simulationen zu überprüfen (insbesondere auf kleinen und großen mobilen Bildschirmen).

Die Desktop-Proportionen sollten auch auf mobilen Geräten beibehalten werden, um die Lesbarkeit zu verbessern. Auch sollten Sie eine etwas höhere Sliderhöhe als notwendig festlegen, um alle Inhalte anzuzeigen. Mit anderen Worten, lassen Sie etwas Platz (oben und unten) für den Inhalt der Slides, um verschiedene Bildschirmdarstellungen zu berücksichtigen.

Es gibt auch die Möglichkeit, den Slider auf Tablets oder Mobilgeräten auszublenden.

Einen Slider anpassen

Schritt 1: Wählen Sie den Hintergrund

Wenn gewünscht, können Sie eine Hintergrundfarbe festlegen oder ein Hintergrundbild zum Slider hinzufügen. Dieser wird auf allen Slides sichtbar sein.

Schritt 2: Legen Sie die Anzahl der Slides fest

Standardmäßig enthält ein Slider nur 1 Slide, und Sie können maximal 8 Slides enthalten. Um einen Slide hinzuzufügen, klicken Sie auf die Schaltfläche „Slide hinzufügen“ oder das "Duplizieren“-Symbol.

Ein Slide funktioniert wie ein Gruppenelement. Beachten Sie, dass jeder zusätzliche Slide den Umfang des Codes erhöht. Behalten Sie dies während der Qualitätskontrolle im Auge.

Nach der Auswahl des Sliders können Sie den Inhalt der Slides anzeigen,

  • entweder mit den Markierungen „1“, „2“ usw., die im Design sichtbar sind,
  • oder durch Klicken auf die Slide-Namen im linken Bearbeitungsbereich.

Die Anzahl der Slides auf Mobilgeräten entspricht der Anzahl der Slides auf dem Desktop.

Schritt 3: Fügen Sie Inhalte zu den Slides hinzu

Das Gestalten eines Slides ähnelt der Gestaltung einer Gruppe: Sie können für jeden Slide unterschiedliche Strukturen und Inhalte erstellen.

Konkret können Sie Folgendes in Ihre Slides aufnehmen:

  • Gruppen,
  • Gruppen mit Spalten,
  • Trenner,
  • Bilder,
  • Texte,
  • Buttons,
  • Hintergründe,
  • Code,
  • Und sogar Videos.
Attention

Die Anfangshöhe eines Sliders passt möglicherweise nicht zu den Elementen, die Sie zu den Slides hinzugefügt haben. Erwägen Sie, die Sliderhöhe entsprechend anzupassen (siehe "Haupteinstellungen konfigurieren“).

Schritt 4: Richten Sie Übergänge ein

Für die Slide-Übergänge haben Sie zwei Optionen:

  • Klick-Übergang: Der Benutzer steuert den Übergang. Er kann auf die Pfeile oder die Fortschrittsmarkierungen klicken, um von einem Slide zum nächsten zu wechseln.
  • Automatischer Übergang: Die Slides wechseln automatisch ohne Benutzereingabe. Sie brauchen nur die Anzeigedauer für jeden Slide festzulegen.

Im automatischen Modus werden Pfeile und Fortschrittsmarkierungen nicht angezeigt, und ihre Einstellungen im linken Panel sind deaktiviert.

Schritt 5: Konfigurieren Sie Navigationspfeile

Pfeile (oder Chevron-Symbole) sind sichtbar, um zwischen den Slides zu navigieren. Es gibt zwei Optionen:

  • Vordefinierte Pfeile: Wählen Sie einen grafischen Stil aus 3 Pfeil-Designs und 3 Farboptionen.
  • Benutzerdefinierte Pfeile: Sie können Ihre eigenen Bilder für die linken und rechten Pfeile hochladen, wobei die folgenden Richtlinien beachtet werden sollten: Bilder sollten maximal 50x50 Pixel groß sein, im .JPEG- oder .PNG-Format.

Sie können auch die Position der Pfeile auswählen:

  • Pfeile, die links und rechts der Slides sichtbar sind,
  • Pfeile, die unter den Slides sichtbar sind.

Wenn Sie die Bilder für die Email-Builder-Pfeile hosten möchten, exportieren Sie einfach die E-Mail und rufen Sie die Bilder aus dem Exportarchiv ab. Sobald sie auf Ihrem Server/Router gehostet sind, geben Sie die Hosting-URL im „Benutzerdefiniert“-Bereich ein.

Schritt 6: Konfigurieren Sie Fortschrittsmarkierungen

Die Fortschrittsmarkierungen sind die grafischen Elemente unter dem Slider, die dem Benutzer anzeigen, welchen Slide er gerade ansieht und wie viele Slides insgesamt vorhanden sind. Diese Markierungen können auf Desktop, Tablet und/oder Mobilgeräten ausgeblendet werden.

Es gibt zwei Optionen:

  • Vordefinierte Markierungen: Wählen Sie einen grafischen Stil aus zwei vordefinierten Markierungsdesigns und drei Farben.
  • Benutzerdefinierte Markierungen: Laden Sie Ihre eigenen Bilder für die aktiven und inaktiven Markierungen hoch und beachten Sie diese Richtlinien: maximal 20x20 Pixel, im .JPEG- oder .PNG-Format.
Info

Wenn Sie die vom Email Builder bereitgestellten Fortschrittsmarkierungsbilder hosten möchten, exportieren Sie einfach die E-Mail und rufen Sie diese Elemente aus dem Exportarchiv ab. Sobald sie auf Ihrem Server/Router gehostet sind, geben Sie die Hosting-URL im „Benutzerdefiniert“-Bereich ein.

Schritt 7: Richten Sie Fallback-Inhalte ein

Wenn die E-Mail-Umgebung interaktive Inhalte nicht unterstützt, ist es wichtig, Fallback-Inhalte zu definieren, die angezeigt werden. Der Email Builder stellt sicher, dass der Inhalt in jeder Situation angezeigt wird.

Es gibt zwei Fallback-Optionen:

  • Vordefinierte Fallback-Inhalte: Wählen Sie einen der Slides (mit seiner Struktur, seinen Elementen, Links usw.), der anstelle des Sliders angezeigt wird.
  • Benutzerdefinierte Fallback-Inhalte: Sie können ein Ersatzbild, alternativen Text und einen Link auswählen.

Wie kompatibel sind Slider in E-Mails?

Hier sind die Kompatibilitätsumgebungen für die Slider des Email Builders:

Best practices

Wenn möglich, legen Sie Fallback-Inhalte fest, indem Sie zu Beginn einen Einführungs-Slide oder am Ende einen Abschluss-Slide hinzufügen, der die Informationen enthält, die angezeigt werden sollen, wenn der interaktive Slider nicht sichtbar ist. Wählen Sie dann einfach diesen zusätzlichen Slide als Fallback (siehe „Fallback-Inhalte einrichten“).

Legen Sie die Sliderhöhe etwas höher als notwendig fest, um verschiedene Bildschirmgrößen zu berücksichtigen (siehe „Haupteinstellungen konfigurieren“).

Begrenzen Sie auf Mobilgeräten den Inhalt, um einen Slider zu vermeiden, der zu viel vertikalen Platz einnimmt, was die Navigation zwischen den Slides beeinträchtigen kann.

Anwendungsfälle

Obwohl der Kreativität keine Grenzen gesetzt sind, hier einige häufige Anwendungsfälle, die von Email-Builder-Nutzern beobachtet wurden:

  • Ein Produkt präsentieren und zusätzliche Inhalte in den Slides enthüllen,
  • Ein Hotel mit Bildern von Zimmern vorstellen,
  • Ein Outfit (Oberteile, Hosen und Schuhe) mit mehreren übereinander gestapelten Slidern präsentieren: Ein "Cadavre exquis"-Konzept.

Bonus: Unsere Live-Session!

Sehen Sie sich diesen Anwenderbericht von Lacoste an, um zu erfahren, wie Sie Slider in E-Mails integrieren können.