Blocco Carosello

Una galleria di immagini scorrevole con puntini di navigazione e frecce, gestita interamente via CSS.

Come funziona

Il livello cinetico è una macchina a stati basata su pulsanti radio: ogni slide riceve un input radio nascosto che condivide un unico nome di gruppo, un'etichetta renderizzata come puntino, e un frame la cui visibilità è controllata da un selettore fratello :checked ~. Toccando un puntino (o, dove supportato, scorrendo con lo swipe) si seleziona il suo pulsante radio e il frame corrispondente diventa visibile mentre gli altri restano display:none. Il pulsante radio della prima slide parte selezionato, così il blocco si apre sempre sulla prima slide. È lo stesso meccanismo su cui si basano i blocchi Fisarmonica e Gratta e vinci, applicato però a una riga di frame mutuamente esclusivi invece che a interruttori indipendenti.

Dove questa tecnica CSS non viene rispettata (il motore di rendering Word di Outlook, e qualsiasi client che rimuove i blocchi <style> o ignora i selettori fratelli), il blocco ricade su una scheda statica. Quella scheda mostra solo l'immagine e la didascalia della prima slide, più un link "Vedi tutte le N slide" verso la vista live ospitata. La vista live è una vera pagina web, quindi lì ogni slide è a un tap di distanza invece che persa; riutilizza esattamente lo stesso markup :checked, poiché un browser vero lo supporta sempre. Un carosello con una sola slide salta l'intera macchina a stati e viene renderizzato come una singola immagine statica; non c'è nessuna galleria da sfogliare.

Campi configurabili, tutti nel pannello dell'Ispettore del blocco stesso:

• Colore di sfondo — lo sfondo della scheda, indipendente dal tema dell'email.
• Padding — la spaziatura interna del blocco.
• Bordo — larghezza, stile e colore attorno all'intera scheda.
• Raggio del bordo sulla scheda.
• Colore didascalia e dimensione font didascalia — applicati in modo uniforme al testo della didascalia di ogni slide.

Ogni slide (un figlio del carosello, aggiunto/riordinato come qualsiasi altro elemento dell'albero) porta con sé i propri tre campi: un'immagine (scelta dalla tua libreria multimediale), una didascalia, e un URL del link facoltativo. Se impostato, toccando l'immagine della slide si apre quel link, indipendentemente dalla navigazione a puntini usata per spostarsi tra le slide.

Le slide non sono eventi di interazione — un destinatario che sfoglia un carosello non invia nulla, quindi nulla riguardo alla navigazione del carosello compare nella dashboard delle risposte, nell'esportazione CSV o in un webhook di progetto. Il link di una slide, se impostato, è un elemento portatore di link semplice: riceve un'azione "click" instradata attraverso il redirect tracciato del destinatario nello stesso modo di un pulsante o di un'immagine con link, e confluisce nella mappa di calore dei clic del progetto.

Esempi

Un'email di lancio prodotto può usare un carosello per mostrare tre o quattro angolazioni di un nuovo articolo, con ogni slide collegata alla pagina di quella specifica variante — utile ovunque un'unica immagine hero sottovaluti il prodotto. Vedi Ecommerce e lanci prodotto per il pattern più ampio di generare clic direttamente da un invio promozionale. Un digest "novità del mese" può portare una slide per ogni funzionalità o articolo, ciascuna con didascalia e link all'approfondimento completo, così l'intero riepilogo entra in un unico blocco scorribile invece che in una lunga pila verticale. Un recap di evento può sfogliare le foto dell'ultima sessione con didascalie che ne indicano il momento. I destinatari che vogliono vedere tutto toccano semplicemente per scorrere, e chiunque abbia un client che non può animarlo ottiene comunque la foto di copertina e un link al resto.

Come appare il fallback statico

<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>

Questo è ciò che renderizza un client di classe Outlook: la prima slide, la sua didascalia e un link alla vista live ospitata dove è raggiungibile il resto della galleria. In un client che rispetta il livello cinetico, questo stesso markup è presente ma nascosto via CSS, e la macchina a stati radio/puntini prende il sopravvento.

Vedi anche

• Panoramica del riferimento blocchi
• Come funzionano i fallback
• Interazioni e analisi