Cómo añadir un slider de antes y después en Webflow

Un slider de antes y después es una de las formas más rápidas de mostrar los resultados de tu trabajo. Lo único que tiene que hacer el visitante es arrastrar el divisor para revelar el efecto de tu rediseño, renovación o retoque. No necesita quedarse mirando una imagen comparativa lado a lado ni jugar a encontrar las diferencias: los resultados están ahí, justo delante de sus ojos.

Tanto si diriges una agencia como si eres freelance, diseñador, fotógrafo, artista, contratista o cualquier otra persona que quiera lucir su trabajo, un comparador de imágenes antes y después es una forma estupenda de hacerlo. Desafortunadamente, a pesar de ser uno de los creadores de sitios web más avanzados (y uno de los más populares entre diseñadores), Webflow no cuenta con un slider de antes y después nativo. Si quieres añadir uno, tienes tres opciones: instalar un “cloneable” de la comunidad, incrustar un widget gratuito alojado externamente o crear uno desde cero usando el motor de interacciones nativas de Webflow (IX2).

A continuación exploramos cada una de estas opciones.

Opción 1: Usar un cloneable de Webflow

Tu primer instinto probablemente sea buscar en el escaparate Made in Webflow o en un sitio como Flowbase algún “cloneable”. Aunque puede funcionar, no está exento de complicaciones.

La gran desventaja es que quedas atado a la forma de hacer las cosas de otra persona. Tienes que ceñirte estrictamente a la arquitectura y las convenciones de nomenclatura del cloneable. Esto puede incluir depender de atributos personalizados, reglas CSS y posicionamiento absoluto. Si algo de esto falla, simplemente no funcionará. Si lo añades al final de tu diseño, es posible que tengas que replantear algunos de los otros elementos.

Pero si estás decidido a seguir esta ruta, aquí tienes cómo añadir un cloneable:

1. Encuentra un cloneable de slider de antes y después que se mantenga activamente y tenga una licencia que te permita usarlo. Clónalo en tu propio proyecto.

2. Sustituye las imágenes por las tuyas. No reorganices los divs anidados, no cambies el nombre de nada ni intentes ordenar las cosas: eso podría romper el slider.
3. Publica tu sitio y pruébalo. Asegúrate de que funciona tanto en escritorio como en dispositivos móviles. Si has cambiado algo por error, el JavaScript podría no ejecutarse correctamente en determinadas circunstancias.

En resumen, este método funciona, pero resulta muy tedioso para un componente visual tan sencillo, y es probable que no tengas tanto control como te gustaría. Cada rediseño que hagas debe ceñirse al cableado original, a menos que quieras reescribir el script que lo controla.

Opción 2: Usar un widget de control deslizante gratuito y sin código (recomendado)

Si quieres evitar lidiar con bloques div anidados, configurar atributos personalizados y, si algo sale mal, depurar JavaScript escrito por otra persona, la forma más sencilla es usar un widget incrustado alojado externamente, como el widget comparador de imágenes antes y después de Jotform. Es muy fácil de configurar y resuelve muchos de los problemas asociados a los cloneables.

Así es como puedes añadir un slider de antes y después a Webflow con Jotform:

1. Dirígete al widget comparador de imágenes antes y después de Jotform e inicia sesión en tu cuenta de Jotform. Si aún no tienes una, puedes registrarte durante el proceso de configuración. Es gratis.

2. Dale un título a tu widget y añade tus pares de comparación de imágenes. Puedes subir imágenes directamente o añadirlas desde una URL. Si lo deseas, también puedes agregar un pie de foto a cada par de imágenes y cambiar sus etiquetas. A continuación, configura si el usuario debe arrastrar el control deslizante para ver el antes y después, o si se activa al pasar el cursor por encima. Cuando hayas terminado, haz clic en Continuar.

3. Ahora es el momento de personalizar el estilo de tu slider. Puedes configurar sus colores, marca, tipografía y apariencia. Cuando estés satisfecho con el resultado, haz clic en Continuar de nuevo.

4. Por último, configura el diseño. Selecciona si quieres un slider horizontal o vertical, dónde se sitúa la posición inicial del divisor, qué ancho deseas que tenga y si se muestra en dispositivos móviles, en escritorio o en ambos. Luego haz clic en Pruébalo en tu sitio web gratis.

5. Haz clic en Copiar código para copiar el código de incrustación en tu portapapeles y luego vuelve a tu sitio de Webflow.

6. Abre el menú Add y selecciona Code Embed. Pega el código de incrustación y posiciona el bloque en tu sitio. Haz clic en Publish y estará activo en tu web. Así de sencillo.

Como puedes ver, la opción gratuita sin código es mucho más sencilla que la del cloneable. Es más fácil de personalizar, no hay que preocuparse por atributos personalizados, nombres de clase estrictos ni JavaScript, y simplemente funciona. Si quieres cambiar algo, vuelve a Jotform y edita los ajustes de tu slider de antes y después.

Opción 3: Construirlo manualmente usando Webflow Interactions

Para los puristas de Webflow que quieren control total y no desean usar JavaScript escrito por otras personas ni un widget externo, es posible construir un slider usando el motor de interacciones nativas de Webflow, IX2. Crear un slider de código personalizado en Webflow es, con diferencia, el método más avanzado y complicado, pero te permite controlar exactamente cómo se ve y cómo se comporta.

Para construir tu propio slider de comparación de imágenes en Webflow usando IX2, necesitas apilar dos imágenes en un contenedor con posición relativa, cada una dentro de su propio bloque div. Para la imagen superior, el bloque div actúa como máscara.

A continuación, para la interacción de antes y después en Webflow, necesitas crear una interacción de movimiento del ratón (Mouse Move Interaction). Configura el Trigger como Mouse X y el objetivo como el div de máscara. Establece la propiedad animada en Width y haz que oscile entre 0 y 100 por ciento. De esta forma, el movimiento del ratón en el eje X controla la superposición entre las dos imágenes.

Por supuesto, si quieres un divisor entre las dos imágenes, tienes que crearlo tú mismo. Y conseguir que se sincronice perfectamente con el movimiento del ratón requiere habilidades avanzadas de animación en Webflow.

Aunque las herramientas integradas de Webflow pueden funcionar, conseguir que todo quede perfecto requiere muchos ajustes y un conocimiento profundo de cómo usar Webflow. Además, tienes que configurar una animación diferente si quieres que funcione en dispositivos móviles. Lo que ganas en control, lo pierdes en comodidad.

Mejora tu sitio Webflow con widgets inteligentes y sin código

La forma más rápida, sencilla y cómoda de añadir un slider de antes y después en Webflow es con el widget comparador de imágenes antes y después de Jotform. No tiene ninguna de las desventajas de usar un cloneable de comparación de imágenes de Webflow y es mucho más simple que crear uno propio con IX2. Usar una opción robusta y sin servidor te ahorra muchas horas de desarrollo y garantiza un diseño responsive sólido en todo momento.

Además, Jotform cuenta con una variedad de otros widgets gratuitos para sitios web capaces de llevar tu web al siguiente nivel. Si quieres añadir reseñas de Google, controles de accesibilidad, un sencillo botón de volver arriba o decenas de otras funcionalidades útiles, explora el directorio. También puedes usar la integración de Jotform con Webflow para conectar las potentes herramientas de recopilación de datos de Jotform directamente a tu sitio.