mailinapp
Documentation menu

Karussell-Block

Eine durchwischbare Bildergalerie, vollständig durch CSS gesteuert — kein JavaScript, funktioniert also in jedem Client, der die zugrunde liegende :checked-Technik unterstützt, und degradiert überall sonst zu einem einzelnen klaren Bild.

Wie es funktioniert

Die kinetische Stufe ist eine Zustandsmaschine aus Radio-Buttons: Jede Folie erhält ein verstecktes Radio-Eingabefeld, das sich einen Gruppennamen teilt, ein als Punkt gerendertes Label und einen Rahmen, dessen Sichtbarkeit durch einen :checked ~-Geschwister-Selektor gesteuert wird. Ein Tap auf einen Punkt (oder, wo unterstützt, Wischen) aktiviert dessen Radio-Feld, und der zugehörige Rahmen wird sichtbar, während die anderen display:none bleiben. Das Radio-Feld der ersten Folie ist zu Beginn aktiviert, sodass der Block stets bei der ersten Folie öffnet. Das ist derselbe Mechanismus, auf dem auch die Blöcke Akkordeon und Rubbelkarte aufbauen, hier nur auf eine Reihe sich gegenseitig ausschließender Rahmen angewendet statt auf unabhängige Umschalter.

Wird diese CSS-Technik nicht unterstützt (die Word-Rendering-Engine von Outlook und jeder Client, der <style>-Blöcke entfernt oder Geschwister-Selektoren ignoriert), fällt der Block auf eine statische Karte zurück. Diese Karte zeigt nur das Bild und die Bildunterschrift der ersten Folie, plus einen Link „Alle N Folien ansehen“ zur gehosteten Live-Ansicht. Die Live-Ansicht ist eine echte Webseite, dort ist also jede Folie nur einen Tap entfernt statt verloren zu gehen; sie verwendet exakt dasselbe :checked-Markup, da ein echter Browser dieses stets unterstützt. Ein Karussell mit nur einer Folie überspringt die gesamte Zustandsmaschine und rendert als einzelnes statisches Bild; es gibt dann keine Galerie zum Durchblättern.

Konfigurierbare Felder, alle im eigenen Inspektor-Panel des Blocks:

  • Hintergrundfarbe — der eigene Hintergrund der Karte, unabhängig vom Theme der E-Mail.
  • Innenabstand — der innere Abstand des Blocks.
  • Rahmen — Breite, Stil und Farbe rund um die gesamte Karte.
  • Eckenradius der Karte.
  • Bildunterschrift-Farbe und Bildunterschrift-Schriftgröße — einheitlich auf den Bildunterschrift-Text jeder Folie angewendet.

Jede Folie (ein Kind-Element des Karussells, hinzugefügt/neu geordnet wie jedes andere Baum-Element) trägt ihre eigenen drei Felder: ein Bild (ausgewählt aus Ihrer Mediathek), eine Bildunterschrift und eine optionale Link-URL. Ist diese gesetzt, öffnet ein Tap auf das Bild der Folie diesen Link, unabhängig von der Punkt-Navigation, die zum Wechseln zwischen Folien dient.

Folien sind keine Interaktionsereignisse — ein Empfänger, der durch ein Karussell blättert, übermittelt nichts, daher erscheint nichts über die Karussell-Navigation im Antworten-Dashboard, im CSV-Export oder in einem Projekt-Webhook. Der eigene Link einer Folie, falls gesetzt, ist ein einfaches linktragendes Element: Er erhält eine "click"-Aktion, geleitet über den nachverfolgten Redirect des Empfängers, genau wie eine Schaltfläche oder ein verlinktes Bild, und fließt in die Klick-Heatmap des Projekts ein.

Beispiele

Subject

New arrivals just landed

Eine Produkteinführungs-E-Mail kann ein Karussell verwenden, um drei oder vier Ansichten eines neuen Artikels zu zeigen, wobei jede Folie zur Seite dieser bestimmten Variante verlinkt — nützlich überall dort, wo ein einzelnes Hero-Bild ein Produkt unterverkauft. Siehe E-Commerce & Produkteinführungen für das breitere Muster, Klicks direkt aus einer Werbe-Sendung heraus zu erzeugen. Eine „Was gibt's Neues diesen Monat“-Digest-E-Mail kann eine Folie pro Funktion oder Artikel tragen, jeweils mit Bildunterschrift versehen und zum vollständigen Beitrag verlinkt, sodass die gesamte Zusammenfassung in einen einzigen überschaubaren Block passt statt in einen langen vertikalen Stapel. Ein Veranstaltungsrückblick kann durch Fotos der letzten Session blättern, mit Bildunterschriften, die den jeweiligen Moment benennen. Empfänger, die alles sehen möchten, tippen sich einfach durch, und jeder, dessen Client es nicht animieren kann, erhält dennoch das Titelfoto und einen Link zum Rest.

So sieht der statische Fallback aus

<div style="margin:12px 0;background-color:transparent">
  <div class="carousel-fallback">
    <div class="lv-frame lv-frame-0">
      <a href="https://example.com/product-a">
        <img src="https://cdn.example.com/slide1.jpg" alt="Slide 1" style="width:100%;max-width:100%">
      </a>
      <p style="margin:8px 0 0;font-size:14px;color:#374151">Slide 1</p>
    </div>
    <p style="margin:8px 0 0;font-size:13px">
      <a href="https://mailinapp.com/v/eyJhbGci..." style="color:#4f46e5">See all 4 slides &rarr;</a>
    </p>
  </div>
</div>

Das ist es, was ein Client der Outlook-Klasse rendert: die erste Folie, ihre Bildunterschrift und ein Link zur gehosteten Live-Ansicht, wo der Rest der Galerie erreichbar ist. In einem Client, der die kinetische Stufe unterstützt, ist dasselbe Markup vorhanden, aber per CSS ausgeblendet, und die Radio-/Punkt-Zustandsmaschine übernimmt stattdessen.

Siehe auch