> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nubea.com.ar/llms.txt
> Use this file to discover all available pages before exploring further.

# Antes y después

> Dos fotos con un divisor que la clienta arrastra para comparar el resultado.

## ¿Cómo funciona?

Subís dos fotos de lo mismo —el antes y el después— y en tu tienda aparecen una
sobre la otra con un divisor en el medio. La clienta lo arrastra y ve el
resultado con sus propios ojos.

Es el bloque para lo que no se explica con una foto sola: cosmética, estética,
limpieza, jardinería, reformas, restauración.

<Note>
  No confundir con el **Comparador de marca**, que es otra cosa: una tabla que
  compara tu producto con una alternativa. Este es visual.
</Note>

## Cargarlo

1. Entrá a **Antes y después** desde el listado de herramientas.
2. Subí las dos fotos. Las dos son obligatorias para publicarlo — con una sola
   no hay nada que comparar.
3. Escribí las etiquetas de cada lado ("Antes" / "Después"). Podés dejarlas
   vacías si las fotos hablan solas.
4. Elegí la **forma** (cuadrada, apaisada o vertical), **cómo se divide**
   (izquierda y derecha, o arriba y abajo) y **dónde arranca el divisor**.
5. Guardá. Mientras editás, la vista previa se arrastra igual que en la tienda.

## Las dos fotos tienen que ser la misma foto

Suena obvio y es lo que más se hace mal: para que la comparación signifique
algo, las dos fotos tienen que estar tomadas **desde el mismo lugar, con la
misma luz y con el mismo encuadre**. Si el después está más cerca o mejor
iluminado, la clienta lo nota y desconfía de las dos.

<Warning>
  Las dos se muestran con la misma forma y se recortan desde el centro. Si una
  es apaisada y la otra vertical, una de las dos va a perder los bordes —
  recortalas iguales antes de subirlas.
</Warning>

## Dónde ponerlo

Arranca **debajo del producto**, que es donde tiene el ancho que necesita: en la
columna del precio cada mitad queda del tamaño de una miniatura y se pierde la
gracia. Podés moverlo, y la vista previa tiene un interruptor de escritorio y
teléfono para verlo angosto antes de publicar.

También podés ponerlo en la **portada** de tu tienda, que es lo natural si tu
negocio es un servicio y no un producto.

## Detalles que quizá no esperabas

* **Se puede usar sin mouse.** El divisor se mueve con las flechas del teclado,
  y con Inicio y Fin va de un extremo al otro. Para quien navega así, es la
  diferencia entre poder ver la comparación o no.
* **En el teléfono no se traba el scroll.** Arrastrar el divisor de lado a lado
  no impide bajar la página con el dedo. Si elegiste el divisor de arriba y
  abajo, en el celular se mueve tomándolo del control: ahí el dedo que sube y
  baja sobre la foto es el que hace scroll, y la página tiene que poder
  seguirlo.
* **Si una foto no carga**, se ve la del después entera en vez de un hueco.