mailinapp
Documentation menu

Bloque de carrusel

Una galería de imágenes deslizable, impulsada enteramente por CSS — sin JavaScript, así que funciona en todo cliente que admita la técnica :checked subyacente, y se degrada a una sola imagen clara en cualquier otro lugar.

Cómo funciona

El nivel cinético es una máquina de estados de botones de opción: cada diapositiva recibe una entrada de radio oculta que comparte un nombre de grupo, una etiqueta renderizada como un punto, y un marco cuya visibilidad se controla mediante un selector hermano :checked ~. Al tocar un punto (o, donde se admite, al deslizar) se marca su radio y el marco correspondiente se vuelve visible mientras los demás permanecen en display:none. El radio de la primera diapositiva comienza marcado, así que el bloque siempre se abre en la diapositiva uno. Este es el mismo mecanismo sobre el que se construyen los bloques de acordeón y rasca y gana, solo que aplicado a una fila de marcos mutuamente excluyentes en lugar de alternancias independientes.

Donde esa técnica de CSS no se respeta (el motor de renderizado de Word de Outlook, y cualquier cliente que elimina los bloques <style> o ignora los selectores hermanos), el bloque recurre a una tarjeta estática. Esa tarjeta muestra solo la imagen y el pie de foto de la primera diapositiva, más un enlace "Ver las N diapositivas" hacia la vista en vivo alojada. La vista en vivo es una página web real, así que ahí cada diapositiva está a un toque de distancia en lugar de perderse; reutiliza exactamente el mismo marcado :checked, ya que un navegador real siempre lo admite. Un carrusel con una sola diapositiva se salta toda la máquina de estados y se renderiza como una única imagen estática; no hay galería que recorrer.

Campos configurables, todos en el propio panel de inspector del bloque:

  • Color de fondo — el fondo propio de la tarjeta, independiente del tema del correo.
  • Relleno — el espaciado interno del bloque.
  • Borde — ancho, estilo y color alrededor de toda la tarjeta.
  • Radio de borde en la tarjeta.
  • Color de pie de foto y tamaño de fuente de pie de foto — aplicados de forma uniforme al texto del pie de foto de cada diapositiva.

Cada diapositiva (un hijo del carrusel, agregado/reordenado como cualquier otro elemento del árbol) lleva sus propios tres campos: una imagen (elegida desde tu biblioteca multimedia), un pie de foto, y una URL de enlace opcional. Si está definida, tocar la imagen de la diapositiva abre ese enlace, independientemente de la navegación por puntos usada para moverse entre diapositivas.

Las diapositivas no son eventos de interacción — un destinatario que recorre un carrusel no envía nada, así que nada sobre la navegación del carrusel aparece en el panel de respuestas, la exportación CSV, ni un webhook de proyecto. El propio enlace de una diapositiva, si está definido, es un elemento simple con enlace: recibe una acción "click" enrutada a través de la redirección rastreada del destinatario de la misma forma que un botón o una imagen enlazada, y se suma al mapa de calor de clics del proyecto.

Ejemplos

Subject

New arrivals just landed

Un correo de lanzamiento de producto puede usar un carrusel para mostrar tres o cuatro ángulos de un artículo nuevo, cada diapositiva enlazando a la página de esa variante específica — útil en cualquier lugar donde una sola imagen destacada subestime el producto. Mira Comercio electrónico y lanzamientos de producto para el patrón más amplio de dirigir clics directamente desde un envío promocional. Un resumen de "novedades este mes" puede llevar una diapositiva por función o artículo, cada una con pie de foto y enlazada a la nota completa, así todo el resumen cabe en un solo bloque escaneable en lugar de una larga pila vertical. Un resumen de evento puede recorrer fotos de la última sesión con pies de foto que nombran el momento. Los destinatarios que quieran verlo todo simplemente lo recorren, y cualquiera cuyo cliente no pueda animarlo igual obtiene la foto de portada y un enlace al resto.

Cómo se ve la alternativa estática

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

Esto es lo que renderiza un cliente de la clase de Outlook: la primera diapositiva, su pie de foto, y un enlace a la vista en vivo alojada donde se puede llegar al resto de la galería. En un cliente que respeta el nivel cinético, este mismo marcado está presente pero oculto por CSS, y la máquina de estados de radios/puntos toma el control en su lugar.

Relacionado