Las imágenes estáticas una al lado de la otra no le hacen justicia a su trabajo. Una edición de fotografías, una renovación del hogar, una transformación de productos, todos merecen algo mejor que dos fotografías una al lado de la otra. Un control deslizante de comparación de imágenes Elementor soluciona eso. Los visitantes arrastran un identificador a través de la imagen para revelar las versiones de antes y después, y esa interacción las mantiene en su página por más tiempo.
He estado usando el widget de comparación de imágenes de complementos maestros en las páginas de destino de los clientes y constantemente obtiene más participación que las capturas de pantalla estáticas. Este tutorial cubre la configuración, la personalización y algunas cosas que vale la pena saber antes de publicar. El widget es gratuito, se encuentra dentro del panel de Elementor como cualquier otro widget y puedes ejecutarlo en aproximadamente dos minutos.
Lo que cubre esta guía:
- Qué es un control deslizante de comparación de imágenes
- ¿quién necesita un control deslizante de antes/después
- Lo que obtienes con el widget gratuito
- Cómo crear uno (paso a paso)
- Consejos para una mejor comparación
- Solución de problemas comunes
- Complementos maestros versus alternativas
- Por qué Master Addons
- Empezar
- Preguntas frecuentes
¿qué es un control deslizante de comparación de imágenes?
Un control deslizante de comparación de imágenes superpone dos imágenes entre sí con un divisor arrastrable entre ellas. Los usuarios lo deslizan hacia la izquierda y hacia la derecha (o hacia arriba y hacia abajo) para revelar una imagen sobre la otra. Estableces una imagen de “antes” y una imagen de “después” en el editor, y el widget maneja el resto.
Probablemente los hayas visto en portafolios de fotografías, sitios web dentales o páginas de bienes raíces que muestran proyectos de renovación. En lugar de mirar pasivamente dos fotos separadas, los visitantes interactúan físicamente con la comparación. Esa interacción aumenta el tiempo en la página, lo que ayuda a su SEO y reduce las tasas de rebote.
¿quién necesita un control deslizante Antes y Después en Elementor?
Cualquiera que quiera mostrar una transformación. Estos son los casos de uso con los que me encuentro con más frecuencia:
Diseñadores Web y Agencias
Los rediseños de sitios web se ven geniales en un control deslizante de comparación. Dejar que un cliente potencial se arrastre entre el diseño antiguo y el nuevo genera más confianza que una captura de pantalla plana. Puedes combinar esto con el Widget de efectos de desplazamiento de imagen si desea variedad visual adicional en las páginas del portafolio.
Fotógrafos y editores de fotografías
Probablemente el ajuste más natural. Si realiza trabajos de retoque, gradación de color o restauración, un control deslizante de comparación de imágenes permite a los clientes potenciales ver exactamente lo que puede hacer. Archivo sin formato a la izquierda, versión editada a la derecha. Dice más de lo que podría decir cualquier título.
Tiendas de comercio electrónico
¿Vender productos de limpieza, cuidado de la piel o cualquier cosa con resultados visibles? A antes y después de la comparación de imágenes en la página de su producto es más convincente que un párrafo de copia. He visto este trabajo particularmente bien para productos cosméticos y de mejoras para el hogar donde la diferencia visual es dramática.
Bienes Raíces y Arquitectura
Los proyectos de renovación coinciden naturalmente. Tome una foto antes de que comience el trabajo, tome otra cuando esté terminado, coloque ambas en el widget de comparación. Su cartera se vuelve más interactiva y los visitantes tienden a dedicar más tiempo a explorar sus proyectos.
Comercializadores digitales
Paneles de análisis, rendimiento publicitario, gráficos de tráfico de sitios web. Muestre los resultados de “antes de trabajar con nosotros” y “después de trabajar con nosotros” con un control deslizante de arrastrar para comparar. Funciona mejor que pegar dos capturas de pantalla en un estudio de caso.
Widget de comparación de imágenes de complementos maestros: lo que obtienes
Hay varias formas de agregar un antes y después del control deslizante en Elementor. Algunos requieren complementos independientes, otros necesitan código personalizado y otros están bloqueados detrás de suscripciones de complementos premium. Los complementos maestros incluyen el Widget de comparación de imágenes en la versión gratuita. Vale la pena señalar porque la mayoría de los complementos de la competencia (Ultimate Addons, PowerPack, The Plus Addons) colocan esta función detrás de un muro de pago.
El widget incluye:
- Integración de Elementor nativo: Arrastre y suelte desde el panel Elementor. Sin códigos cortos, sin página de configuración separada. Instalar desde el Repo de complementos de WordPress y aparece en tu lista de widgets de inmediato.
- De uso gratuito: El widget de comparación de imágenes forma parte de la versión gratuita. No se requiere licencia Pro.
- Multiple stiluri de control: Mango deslizante (arrastrar), movimiento del mouse (pasar el cursor) o hacer clic. Se admiten orientaciones de comparación tanto horizontales como verticales.
- Etiquetas personalizadas: Cambie el texto “Antes” y “Después” a lo que desee, en cualquier idioma. Los colores de las etiquetas, la tipografía y la posición son ajustables.
- Responsivo: Funciona en computadoras de escritorio, tabletas y dispositivos móviles. Los gestos táctiles y deslizantes funcionan en dispositivos móviles.
Los complementos maestros tienen Más de 80 widgets y extensiones total. El widget de comparación de imágenes aparece mucho en la página de destino y en los proyectos de cartera.
Cómo crear un control deslizante Antes y Después en Elementor (paso a paso)
Antes de empezar, necesitas ambos Elementor y complementos maestros instalados y activados. Ambos son gratis. Ir a Complementos > Agregar nuevo, busque el nombre de cada complemento, instálelo y actívelo.
Paso 1: habilite el widget de comparación de imágenes
El widget de comparación de imágenes está habilitado de forma predeterminada. Si ha desactivado algunos widgets para mantener su panel ajustado, verifique que todavía esté encendido. Ir a Complementos maestros > Complementos y extensiones en su panel de WordPress y confirme que la comparación de imágenes está activada. El Documentación de comparación de imágenes tiene todos los detalles de configuración. Mientras estás en ese panel, es posible que notes otros widgets que vale la pena activar, como Titular animado o Control deslizante de galería.
Paso 2: abre una página en Elementor
Crea una página nueva o abre una existente con Elementor. He creado una nueva página de inicio para este tutorial, pero el control deslizante de comparación se coloca en cualquier página existente de la misma manera.
Paso 3: agregue el widget de comparación de imágenes
En el panel Elementor de la izquierda, busque “Comparación de imágenes” (verá el ícono de Complementos maestros al lado). Arrastre el widget a su página donde quiera que aparezca el control deslizante.
Paso 4: cargue sus imágenes de antes y después
Haz clic en el widget y verás dos campos de carga de imagen: uno para la imagen anterior y otro para la imagen posterior. Cargue ambos y la vista previa se actualiza inmediatamente con el identificador del divisor en el centro.
Întâlnire rapidă: ambas imágenes deben tener las mismas dimensiones. Si uno es 1200×800 y el otro es 900×600, el diseño lucirá apagado. Recortarlos al mismo tamaño antes de cargarlos. Esto hace subir a la gente más que cualquier otra cosa.
Paso 5: personalice el texto de la etiqueta
Las etiquetas predeterminadas dicen “Antes” y “Después”, pero puedes cambiarlas por cualquier cosa. ¿Vender un producto? Utilice “Sin” y “Con.” ¿Mostrando una renovación? Pruebe el “Día 1” y el “Terminado”. Los campos de etiqueta aceptan cualquier texto, incluidos caracteres que no estén en inglés, por lo que la localización no es un problema.
Paso 6: configure la configuración del control deslizante
En la pestaña Contenido, hay algunas configuraciones más que vale la pena ajustar:
- Orientación: Cambie entre comparación horizontal (izquierda/derecha) y vertical (arriba/abajo). Horizontal es el valor predeterminado y funciona en la mayoría de los casos.
- Raport de vizibilitate: Controles donde comienza el divisor. Configure al 50% para una división centrada o muévalo para mostrar más de una imagen inicialmente.
- Superposición: Habilite o deshabilite una superposición de color en las imágenes.
- Tipul de manchi: Elija entre arrastrar el mouse o pasar el mouse para comparar. Arrastrar requiere que el visitante haga clic y arrastre. Hover revela el movimiento del mouse, que se siente más fluido pero puede desorientar algunos diseños.
Paso 7: diseña el control deslizante
Cambie a la pestaña Estilo para personalizar la visualización. Puede cambiar el color del divisor, agregar un borde alrededor del contenedor de comparación, ajustar la tipografía de la etiqueta (familia de fuentes, tamaño, peso), agregar sombras de caja y el espaciado de control. Pase un par de minutos aquí para que coincida con el diseño de su sitio. Hay suficiente control para que no termines con un control deslizante de aspecto genérico.
Pulsa Publicar y tu antes después del control deslizante está en vivo. Aproximadamente dos minutos de principio a fin, suponiendo que sus imágenes estén listas.
Consejos para una mejor comparación de imágenes
El widget maneja el aspecto técnico, pero la comparación en sí es tan buena como su configuración. Algunas cosas que he aprendido al crearlos en sitios de clientes:
Haga coincidir las dimensiones de su imagen
Ya mencioné esto, pero es el error que veo con más frecuencia. Si su imagen anterior es 1920×1080 y su imagen posterior es 800×600, el control deslizante la obligará a alinearse y el resultado se verá distorsionado. Recorta ambas imágenes exactamente con las mismas dimensiones de píxeles antes de cargarlas. Cada vez.
Mantenga la composición similar
Tome ambas fotos desde el mismo ángulo, la misma distancia, el mismo encuadre. Si tu foto anterior es una toma amplia y la posterior es un primer plano, el contraste no aterriza como deseas. El control deslizante se ve mejor cuando la única diferencia entre las dos imágenes es el cambio real.
Centrar la Transformación
Coloque el cambio más visible cerca del centro de la imagen. Ahí es donde comienza el divisor, por lo que es lo primero que la gente nota cuando interactúa con el control deslizante. Si el cambio está hacia un lado, ajuste la relación de visibilidad para llamar la atención sobre él.
No te excedas
Una comparación sólida por sección de página es suficiente. He visto páginas con cinco o seis controles deslizantes apilados uno encima del otro, y eso reduce el impacto. Elija su mejor par de antes y después y presente ese. Si tiene múltiples comparaciones, organícelas en a Galería de imágenes filtrables o Carrusel de imágenes en cambio.
Agregue un CTA cercano
Si la comparación se encuentra en una página de ventas o cartera, suelte un botón de llamada a la acción justo debajo. Alguien que acaba de superar una transformación impresionante ya está comprometido. Un botón “Obtener una cotización gratuita” o “Comprar ahora” tiende a realizar una buena conversión.
Solución de problemas: cuando el control deslizante no se está comportando
La mayoría de las configuraciones simplemente funcionan, pero algunas cosas hacen que la gente se enoje. Aquí se explica cómo arreglar los que me preguntan.
- El control deslizante no aparece. Nueve de cada diez veces el widget se deshabilitó. Ir a Complementos maestros, luego complementos y extensionesy confirme que la comparación de imágenes esté activada. Si está activado y aún falta, borre su caché (LiteSpeed, WP Rocket o Cloudflare) para que una copia antigua de la página deje de funcionar.
- El mango no se arrastra. Casi siempre se trata de un conflicto de JavaScript o un complemento de almacenamiento en caché que combina o difiere el script del widget. Excluya los scripts de complementos maestros de JS, combine y posponga, borre el caché y pruebe nuevamente.
- Las dos imágenes parecen estiradas o desalineadas. Son dimensiones diferentes. Recortar ambas a dimensiones de píxeles idénticas y volver a cargarlas, esta es la causa más común.
- Funciona en escritorio pero no en móvil. Verifique que ningún contenedor principal tenga un estilo oculto de desbordamiento que recorte el área táctil y que no haya nada sobre el control deslizante que atrape el deslizamiento. Touch funciona desde el primer momento, por lo que una falla al deslizar es casi siempre un problema de diseño o índice z.
- Se cortan las etiquetas de antes y después. Acorte el texto de la etiqueta o reduzca el tamaño de fuente de la etiqueta debajo de la pestaña Estilo; Las etiquetas muy largas pueden extenderse fuera de la imagen en pantallas pequeñas.
Si ninguno de estos lo soluciona, publique los detalles en el Foro de soporte de complementos maestros con su tema y complementos activos, generalmente es un conflicto que se fija rápidamente.
Widget de comparación de imágenes versus alternativas
Un vistazo rápido a cómo se comparan los complementos maestros con otros control deslizante de comparación de imágenes de WordPress opciones para Elementor:
| Característica | Complementos maestros | Complementos definitivos (EAU) | Kit de elementos | Paquete de energía |
|---|---|---|---|---|
| Widget gratuito de comparación de imágenes | Sí | No (solo profesionales) | Sí | No (solo profesionales) |
| Horizontal + vertical | Sí | Sí | Sí | Sí |
| Texto de etiqueta personalizado | Sí | Sí | Sí | Sí |
| Modo de suspensión del mouse | Sí | Sí | No | Sí |
| Controlul ratio de vizibilitate | Sí | Sí | No | Sí |
| Toque/deslizamiento móvil | Sí | Sí | Sí | Sí |
| Widgets totales en complemento | 80+ | 40+ | 90+ | 60+ |
La gran diferencia es la disponibilidad gratuita. Si no desea pagar por un complemento Pro solo para obtener un control deslizante de antes y después, Master Addons y ElementsKit son sus opciones. Los complementos maestros también incluyen técnicas de superposición de texto y efectos de desplazamiento de imagen en el nivel gratuito, obtienes un conjunto más amplio de herramientas de imagen sin necesidad de actualizar.
¿por qué agregar complementos maestros para la comparación de imágenes?
El widget de comparación de imágenes es uno de más de 80 elementos y extensiones Complementos maestros para Elementor. Muchos usuarios lo instalan para un widget y terminan usando varios otros en el mismo proyecto. Así es como comencé con él también.
Más allá de los widgets individuales, obtienes un Creador de temas para encabezados, pies de página y páginas de archivo personalizados. Hay un Creador de ventanas emergentes con intención de salida y activadores de desplazamiento. Y a Biblioteca de plantillas con secciones prediseñadas puedes importar con un solo clic.
V3.0.0 es notablemente más rápido que las versiones anteriores, el complemento se mantiene activamente y se ejecuta en más de 40.000 sitios de WordPress. Complementos maestros Pro agrega el modo Widget Builder, White Label y soporte premium si los necesita en el futuro.
Comience
Configurando un antes y después del control deslizante de comparación de imágenes en Elementor se tarda un par de minutos con complementos maestros. Sin código, sin compra de complementos premium, sin complemento de comparación separado para instalar. El widget es gratuito, funciona con cualquier configuración de Elementor y la personalización cubre todo, desde el texto de la etiqueta hasta el color del divisor.
Descarga complementos maestros gratis y pruebe el widget de comparación de imágenes en su próximo proyecto. Si necesita más en sus compilaciones de Elementor, consulte los planes Pro.
Lectura relacionada: Tutorial del carrusel de imágenes de Elementor | Complementos de galería filtrables de Elementor | 25 técnicas de texto sobre imagen de Elementor
¿prefieres mirar? Aquí hay un tutorial rápido en Elementor:
Preguntas frecuentes
¿cómo agrego un control deslizante de antes y después en Elementor?
Instale complementos maestros (gratis), abra su página en Elementor, busque el widget Comparación de imágenes en el panel y arrástrelo a su página. Cargue sus imágenes de antes y después, ajuste las etiquetas si lo desea y publique. Tarda unos dos minutos.
¿existe un widget de comparación de imágenes gratuito para Elementor?
Sí. Master Addons incluye un widget gratuito de comparación de imágenes con modos horizontales/verticales, etiquetas personalizadas, controles de arrastre y desplazamiento y opciones de estilo completo. No se necesita actualización Pro.
¿cuál es el mejor complemento deslizante antes y después para WordPress?
Para los usuarios de Elementor, Master Addons es una sólida opción gratuita con integración nativa y múltiples estilos de control. Si no está en Elementor, complementos independientes como BEAF (Before After Gallery) funcionan con Gutenberg y otros creadores.
¿Cómo crear imágenes de antes y después sin codificación?
Utilice Elementor con el widget Master Addons Image Comparation. Arrástrelo a su página, cargue dos imágenes, configure los ajustes desde el panel visual. No se necesita código en ningún momento.
¿puedo utilizar el control deslizante de comparación de imágenes en el móvil?
Sí. El widget responde y admite gestos táctiles. Los visitantes deslizan el divisor con el dedo para comparar imágenes, lo mismo que arrastrarlas en el escritorio.
¿Qué tamaño deben tener las imágenes de antes y después?
Ambas imágenes deben tener exactamente las mismas dimensiones. 1200×800 o 1920×1080 son opciones comunes. Los tamaños no coincidentes hacen que el control deslizante los alinee por fuerza, lo que distorsiona la comparación.
¿Cómo hago una comparación de imágenes horizontales y verticales?
En la configuración del widget, busque la opción Orientación en la pestaña Contenido. Cambie entre horizontal (divisor izquierdo/derecho) y vertical (divisor superior/inferior). Horizontal es el predeterminado.
¿un control deslizante de comparación de imágenes ralentiza mi página?
No es significativo, siempre y cuando sus imágenes estén optimizadas. El script del widget es liviano; el peso real son las dos imágenes mismas. Consérvelos como WebP comprimido al tamaño que realmente muestran y consérvelos cada uno alrededor de 150 KB o menos, y el control deslizante agrega un tiempo de carga insignificante.
¿Por qué el control deslizante de comparación de imágenes no funciona después de mi publicación?
Casi siempre almacenamiento en caché o un conflicto de scripts. Purgue el caché de su página (LiteSpeed, Cloudflare o WP Rocket) y vuelva a cargarla. Si el identificador aún no se arrastra, excluya Master Addons JavaScript de cualquier configuración combinada o diferida, borre el caché y vuelva a probar. Otro widget de comparación de imágenes recientemente deshabilitado en el panel de extensiones y complementos de complementos maestros es la otra causa común.
