La sección Before and after superpone dos imágenes con un separador. Los compradores arrastran el separador para ver más de una imagen o de la otra. Úsala para mostrar resultados (antes y después), dos colores o dos acabados de un producto.
Añadir la sección
- Abre el constructor y ve a la página que quieras. Funciona en las páginas de inicio, producto, aterrizaje, colección y colecciones, hasta 3 por página.
- En la pestaña Sections, haz clic en Add new section y elige Before and after en el grupo Content.
- Haz clic en el bloque Before and after que contiene, elige tus dos imágenes y haz clic en Publish.
El bloque Before and after
Este bloque contiene las dos imágenes. Siempre está en la sección y no se puede quitar.
- Before image y After image: las dos fotos. Usa fotos tomadas desde el mismo ángulo, para que coincidan.
- Before label y After label: una etiqueta corta en la esquina de cada imagen, como "Antes" y "Después", o "Negro" y "Blanco". Déjala vacía para ocultarla.
- Direction: Horizontal usa un separador que los compradores arrastran a izquierda y derecha. Vertical usa un separador que arrastran hacia arriba y hacia abajo.
- Ratio: la forma del marco. Auto sigue a la imagen de antes, o elige Portrait, Square o Landscape. Las dos imágenes se recortan al mismo marco.
- Divider position: dónde empieza el separador, del 5% al 95%. Al 50%, los compradores ven la mitad de cada imagen.
- Show a hint when it comes into view: el separador se mueve un poco solo, para que los compradores vean que pueden arrastrarlo.
- Follow the mouse on desktop: en ordenadores, el separador sigue al ratón sin hacer clic. En los móviles los compradores siempre arrastran.
- Use parent color scheme: el separador, el tirador y las etiquetas usan los colores de la sección. Desactívalo para elegir otro Color scheme.
Ajustes de la sección y título
Añade hasta 2 bloques Text, 1 Divider y 1 Group para un título y un texto corto.
- Direction: Vertical pone el título encima de las imágenes, Horizontal lo pone a su lado.
- Stack vertically on mobile: activado por defecto, para que las imágenes ocupen todo el ancho del móvil.
- Position y Alignment, Section width, Color scheme, Padding y una pestaña Custom CSS.
En la página de producto
El mismo bloque Before and after también puede ir dentro de las secciones Product info y Landing info, y dentro de las pestañas desplegables, para que la comparación quede junto al botón de compra. Consulta ¿Cómo añado pestañas desplegables, fechas de entrega, una guía de tallas, insignias o imágenes de antes y después a mi página de producto?
Bueno saberlo
- En tu tienda en vivo, la comparación solo aparece cuando has elegido las dos imágenes. Hasta entonces, el constructor muestra imágenes de ejemplo.
- Los compradores también pueden mover el separador con el teclado.
- Los compradores que activaron la reducción de movimiento en su dispositivo no ven el movimiento de la pista.
- ¿Las imágenes se ven cortadas? Elige el Ratio más parecido a tus fotos, o usa fotos con la misma forma.
- Usa solo fotos reales de resultados reales.