Comparación de imágenes
Una imagen vale más que mil palabras, pero una comparación no tiene precio. El elemento Comparación de imágenes le permite mostrar cambios, actualizaciones o diferencias con un control deslizante interactivo. Coloque dos imágenes una al lado de la otra y permita a los visitantes arrastrar un identificador para revelar el “después” sobre el “antes”. Perfecto para renovaciones, resultados de acondicionamiento físico, cambios de imagen de productos o cualquier historia visual de progreso. Con control total sobre el identificador, las etiquetas y la superposición, puede crear una comparación profesional y convincente que interactúe y convenza en segundos.
Control deslizante interactivo de arrastrar y revelar
La magia está en la interacción. Cargue sus imágenes “Antes” y “Después”, luego establezca la relación visible inicial ñan como comenzando en 50% para mostrar ambas por igual. Los usuarios pueden hacer clic y arrastrar el mango para deslizarlo entre las dos imágenes, dándoles control directo sobre la revelación. Elija la Orientación (horizontal o vertical) y configure la interacción en Arrastrar con el mouse o deslizar el dedo. Es una forma inmersiva de demostrar el cambio.
- Control intuitivo: los usuarios arrastran un identificador para comparar interactivamente las dos imágenes.
- Orientación flexible: cree controles deslizantes de comparación horizontales (izquierda/derecha) o verticales (arriba/abajo).
- Punto de partida ajustable: establezca la división inicial (p. ej., 30% antes, 70% después) para resaltar el resultado.
Etiquetas transparentes y superpuestas personalizables
Asegúrate de que los espectadores entiendan lo que están viendo. Habilite la superposición para mostrar las etiquetas “Antes” y “Después” directamente en las imágenes. Personalice completamente estas etiquetas: cambie el texto, la tipografía, los colores y el fondo. Incluso puedes usar un degradado para la superposición. Estilee los estados Normal y Hover por separado y controle el relleno, los márgenes y los bordes de la superposición para lograr una apariencia pulida e integrada.
- Texto de etiqueta personalizado: cambie “Antes/Después” a algo como “Antiguo/Nuevo”, “Original/Mejorado”, etc.
- Fondo superpuesto elegante: utilice colores sólidos, degradados o incluso imágenes para los fondos de las etiquetas.
- Contexto visual claro: asegúrese de que los espectadores nunca se pregunten qué imagen es cuál.
Estilismo profesional de manijas y contenedores
El control deslizante debe parecer parte de su diseño, no una herramienta genérica. Personalice completamente el mango: cambie el color y el tamaño de su barra, diseñe el cuadro de arrastre con íconos, colores y fondos, y agregue Box Shadow y Border Radius. Luego, diseñe el contenedor principal (estilo de diseño) con bordes, acolchado y sombras. Cada elemento 'gemelo desde el mango hasta las etiquetas y el contenedor 'gemelo se puede adaptar a su marca.
- Diseño de manija de arrastre: diseñe la barra deslizante y la caja arrastrable con íconos, colores y efectos flotantes.
- Esmalte de contenedores: agregue bordes, sombras y espacios al widget para que encaje perfectamente en su diseño.
- Toque responsivo: el identificador está diseñado para ser fácil de agarrar y arrastrar tanto en dispositivos de escritorio como con pantalla táctil.
Preguntas frecuentes para comparar imágenes
¿Puedo usar esto para comparar más de dos imágenes?
No, este elemento está diseñado específicamente para una comparación directa, una al lado de la otra, de dos imágenes. Es perfecto para escenarios de antes/después. Para mostrar múltiples imágenes o estados, considere usar un control deslizante de galería o un carrusel de imágenes.
¿Cómo funciona esto en los teléfonos móviles?
¡perfectamente! El control deslizante es totalmente táctil. Los usuarios pueden deslizar el dedo hacia la izquierda/derecha (o hacia arriba/abajo) para mover el identificador. El elemento responde y puede ajustar configuraciones como el tamaño de la etiqueta y el tamaño del identificador para dispositivos móviles en el modo de edición responsiva de Elementor.
¿Puedo cambiar el texto de las etiquetas?
Absolutamente. Puede cambiar el texto predeterminado “Antes” y “Después” a cualquier cosa que desee directamente en la configuración de Contenido. Esto le permite personalizar las etiquetas para cualquier escenario, como “Día/Noche”, “Sin/Con” o “Producto A/Producto B.”
¿Cuál es el mejor uso para la orientación vertical?
Los controles deslizantes verticales son excelentes para comparar imágenes altas, como retratos de cuerpo entero, fachadas de edificios o cualquier transformación “arriba versus abajo”. También es una elección visual única que puede hacer que su comparación se destaque en una página de contenido horizontal.
¿El uso de dos imágenes de alta resolución ralentizará mi página?
Puede, si las imágenes son muy grandes. Utilice la configuración Resolución de imagen sabiamente (por ejemplo, “Grande” en lugar de 'Completa') y siempre optimice sus imágenes para la web antes de cargarlas. El elemento en sí es liviano, pero el tamaño del archivo de imagen es el factor principal para el rendimiento.
¿puedo iniciar el control deslizante con la imagen "Después" prácticamente oculta?
Sí, utiliza la configuración Relación visible. Si la configura al 90%, la imagen “Antes” ocupará el 90% del espacio, ocultando la mayor parte de la imagen “Después” hasta que el usuario arrastre el identificador. Esto es genial para crear una revelación sorpresa.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
Duplicador de publicaciones/páginas
