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

Ayudar a los compradores potenciales a ver de inmediato los beneficios de tu producto es una gran ventaja, especialmente cuando vendes por internet. Aquí no hay un vendedor presente, así que tu marca, tu mensaje y tus elementos visuales deben hacer todo el trabajo. Ese es el poder del slider de antes y después.

Aunque Wix cuenta con una enorme biblioteca de elementos de diseño, el editor estándar no incluye un slider de antes y después personalizable. Pero eso no significa que no tengas opciones. Puedes instalar una aplicación de terceros desde el Wix App Market, insertar un widget externo gratuito o crear uno desde cero con Velo by Wix. A continuación te explicamos cómo funciona cada opción y por qué el widget gratuito es la alternativa que la mayoría debería elegir.

Opción 1: Instalar una extensión del Wix App Market

La vía más evidente es el Wix App Market. Busca “before and after slider”, haz clic una vez y tendrás un comparador de fotos funcional en la página. Sin códigos de inserción, sin modo de desarrollo.

Es después de la instalación cuando aparece el inconveniente. La mayoría de estas apps funcionan con un modelo freemium y tendrás que hacer concesiones en el plan gratuito. El PURPLE Before & After Slider, una de las opciones mejor valoradas con 4,7 estrellas, muestra una marca de agua en el plan gratuito. Eliminarla, junto con desbloquear estilos de flecha personalizados y formas de diseño, cuesta 2,50 $ al mes. No parece mucho al principio, pero se acumula con cada suscripción de aplicación en tu sitio.

El riesgo mayor es el mantenimiento. Se trata de pequeños desarrolladores externos, y cuando uno deja de publicar actualizaciones, tu slider se rompe. Tu portafolio o página de producto es el último lugar donde quieres un elemento roto.

Si aun así quieres probar una aplicación de terceros, aquí te explicamos cómo instalar una:

1. Abre tu sitio en el Editor de Wix y haz clic en Apps en la barra lateral izquierda, luego haz clic en App Market. Busca “before and after slider”.

2. Haz clic en la aplicación que desees y luego en Add to Site. Confirma con Allow and Add.
3. El slider aparecerá en tu página. Haz clic en él, abre Settings, añade tus imágenes de antes y después, ajusta el control deslizante y las etiquetas, y luego haz clic en Publish.

Wix documenta el proceso completo de instalación en su guía del Centro de ayuda para añadir una aplicación a tu sitio.

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

Si quieres tener control total sobre el slider sin una suscripción mensual, omite el App Market e inserta un widget externo gratuito en su lugar. Obtendrás el mismo efecto de deslizar para revelar, más personalización de la que ofrecen los planes de pago de las apps, y sin renovaciones.

El widget de Jotform Before and After Slider está diseñado exactamente para esto. Lo configuras en un editor visual, copias un breve código de inserción y lo pegas en Wix. Los widgets para sitios web de Jotform son gratuitos, sin límite de uso ni requisito de plan, por lo que no aparecerá ninguna solicitud de actualización una vez que tu slider esté activo.

Además, ofrece más que las opciones del App Market. Puedes revelar de forma horizontal o vertical, algo importante si estás mostrando una habitación completa o una foto antes y despues de una persona. Puedes establecer la posición inicial del divisor para que los visitantes vean el encuadre que tú elijas. También puedes añadir hasta tres pares de comparación con navegación integrada, convirtiendo un solo elemento en una galería compacta de casos de estudio en lugar de una única imagen comparativa estática. Para un dentista que muestra los resultados de tres pacientes o un diseñador de interiores que recorre una renovación por fases, esa es la diferencia entre una sola inserción y tres.

Sigue estos pasos para añadir el widget de Jotform a tu sitio de Wix:

1. Abre el widget de Jotform Before and After Slider y añade tu par de imágenes subiendo tus archivos o pegando las URL de las imágenes. Añade también etiquetas de antes y después, así como un pie de foto para cada comparación.

2. Configura la dirección de revelado, la posición inicial del divisor y el estilo de interacción (arrastrar, clic o pasar el cursor). Ajusta el ancho, la proporción de la imagen, el radio de las esquinas, el tamaño del divisor y los colores para que coincidan con tu sitio. Activa la pantalla completa si los visitantes necesitan inspeccionar los detalles.

3. Copia el código de inserción.

4. En el Editor de Wix, haz clic en + Add y selecciona Embed Code. Pega tu fragmento de código, redimensiona el elemento y haz clic en Publish.

La guía de Wix para insertar un sitio o widget cubre las limitaciones del elemento, incluido el requisito de que tu código de inserción utilice HTTPS.

Opción 3: Crear un slider personalizado con Velo by Wix

Si prefieres no depender de una aplicación de terceros ni de una inserción externa, puedes programar el slider tú mismo con Velo by Wix. El enfoque consiste en superponer tus dos imágenes en el editor, añadir un elemento de línea o caja como control deslizante, activar el modo de desarrollo y escribir JavaScript que revele más o menos de la imagen superior a medida que el visitante arrastra.

Aquí viene el inconveniente. El código de página de Velo no puede rastrear un puntero mientras se mueve por un elemento. Los controladores de eventos disponibles en los elementos estándar de Wix cubren clics, enfoque, entrada y salida de un elemento, y visibilidad en el viewport. No hay un controlador de movimiento del ratón ni soporte para eventos táctiles. Un slider de arrastre necesita ambos.

La ruta ideal es escribir JavaScript DOM convencional dentro de un elemento HTML iFrame y usar Velo solo para pasar datos. En ese punto estarás utilizando el mismo mecanismo de inserción que la Opción 2, salvo que tú eres el responsable del código, del comportamiento responsive y de cada error.

Si quieres intentarlo, sigue estos pasos:

1. En el Editor de Wix, haz clic en Dev Mode en la barra superior y activa el modo de desarrollo. En Wix Studio, haz clic en Start Coding en la barra lateral izquierda.

2. Añade un elemento Embed HTML donde quieras colocar el slider, con el tamaño ajustado a las dimensiones de tu imagen.

3. Escribe el marcado, los estilos y la gestión de eventos de puntero de tu slider comparativo dentro de ese elemento, probando tanto el arrastre con ratón como el deslizamiento táctil en cada punto de corte responsive.

Mejora tu sitio de Wix con widgets inteligentes y sin código

El widget de Jotform Before and After Slider es la forma más rápida de mostrar tus transformaciones de antes y después sin aumentar tu factura mensual de software ni depurar eventos táctiles en Velo. Configúralo una vez, pega el código y sigue adelante.

Además, es uno de los más de 150 widgets gratuitos para sitios web que ofrece Jotform. Algunos otros que combinan bien con un portafolio o un sitio de servicios incluyen

• Google Reviews: Coloca las valoraciones de tus clientes junto al trabajo en sí, para que la prueba y el reconocimiento convivan en la misma página.
• FAQ: Responde a las preguntas de “¿cuánto tiempo tarda?” y “¿cuánto cuesta?” antes de que el visitante se vaya a enviarte un correo.
• Popup: Captura el email de alguien que recorrió toda tu galería pero aún no estaba listo para reservar.
• Back to Top: Vale la pena añadirlo cuando tu página de portafolio es lo suficientemente larga como para que volver arriba se convierta en una tarea tediosa.

Cada uno se instala a través del mismo elemento Embed HTML que usaste para el slider, así que añadir un segundo o tercer widget solo lleva unos minutos.

Si todavía estás construyendo tu sitio, nuestra guía para crear un sitio web en Wix cubre la plataforma de principio a fin, y la página de integración de Jotform con Wix te explica cómo añadir formularios de contacto y reservas. Explora el directorio completo de widgets y descubre qué le falta a tu sitio.