Algunas cosas son más fáciles de mostrar que de contar: una foto retocada, una habitación después de una remodelación, un diseño antes y después de una limpieza. El Comparación de imágenes widget adentro Complementos maestros para Elementor apila dos imágenes y deja caer un asa arrastrable entre ellas, para que los visitantes se deslicen y revelen la diferencia ellos mismos.
Cargas una imagen anterior y una imagen posterior, agregas etiquetas, eliges una división vertical u horizontal y luego peinas el identificador y las etiquetas para que coincidan con tu sitio. Esta guía cubre todas las configuraciones del widget.
Qué hace el widget de comparación de imágenes #
El widget muestra dos imágenes en el mismo fotograma, una encima de la otra, con un identificador deslizante en el medio. Arrastre el identificador y borrará entre la imagen de antes y después. Puede etiquetar cada lado, voltear la división de izquierda a derecha a arriba y abajo y decidir si el identificador sigue a un arrastrar, un clic o flotar.
Hay dos pestañas con las que trabajar. Contenido contiene las dos imágenes, las etiquetas y el comportamiento del control deslizante. Estilo controla el diseño, las etiquetas superpuestas y el identificador. Las opciones habituales de Elementor Advanced se encuentran junto a ellas.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- Dos imágenes alineadas, del mismo tamaño y encuadre, por lo que la diapositiva se lee como una sola escena.
Cómo agregar el widget de comparación de imágenes #
En el editor Elementor, abra el Elementos panel y búsqueda Comparación de imágenes, o desplácese hasta la sección Complementos maestros (los widgets llevan una insignia MA violeta). Arrástrelo a su página y se cargará con dos imágenes de muestra y un control deslizante que puede comenzar a editar de inmediato.
Cargue las dos imágenes #
Abre el Contenido pestaña. El Imágenes la sección tiene un Antes y un Después tab, y cada uno establece su propia imagen, etiqueta y resolución.
- Pestañas Antes/Después: cambie entre los dos lados para configurar cada imagen.
- Elige una imagen: elija la imagen de ese lado de la biblioteca multimedia.
- Etiqueta: un breve título para el equipo, como Antes del trabajo o Resultados finales.
- Resolución de imagen: el tamaño servido, como Completo o Grande.
Elija cada imagen de la biblioteca #
Hacer clic Elige una imagen y se abre la biblioteca multimedia de WordPress. Configure la imagen de antes en la pestaña Antes, luego cambie a la pestaña Después y elija la segunda. Lo fácil de olvidar: la pestaña en la que se encuentra decide de qué lado está cambiando, así que compruébela antes de presionar Seleccionar.
Establece las etiquetas #
Escribe un Etiqueta en cada pestaña y el widget lo imprime como una superposición en ese lado de la imagen. La etiqueta anterior se encuentra en un lado y la etiqueta posterior en el otro, para que los visitantes sepan cuál es cuál sin que usted lo explique.
Ajuste la configuración del control deslizante #
Abre el Ajustes sección sobre cómo se comporta el control deslizante. Aquí es donde configuras la posición inicial, la dirección de la división y qué mueve el mango.
- Raport vizibil (%): donde comienza el mango, para que puedas abrir en el lado anterior o posterior.
- Superposición: mostrar u ocultar las etiquetas de antes y después.
- Mueveți manilla: arrastre o deslice, haga clic o coloque el cursor para mover el control deslizante.
Cambia la orientación #
El Orientación alternar voltea la división de vertical a horizontal. Vertical ofrece un barrido de izquierda a derecha. Horizontal apila la imagen anterior en la parte superior y la siguiente a continuación, con un identificador de arriba a abajo, que generalmente se lee mejor para fotografías altas.
Diseñe el diseño, el identificador y las etiquetas #
Abre el Estilo pestaña. Hay secciones para Estilo de diseño, Superposición, Manejar, y Etiqueta, entonces el control deslizante coincide con su diseño en lugar del aspecto predeterminado.
- Estilo de diseño: tipo de borde, radio y sombra de cuadro alrededor de todo el control deslizante.
- Manejar: el color, tamaño y estilo del control de arrastre.
- Etiqueta: color por lado, tipografía, fondo, borde y espaciado de los subtítulos.
Casos de uso comunes #
- Edición de fotografías mostrando una toma cruda junto a la versión retocada.
- Hogar y renovación antes y después de una remodelación o limpieza.
- Diseño y desarrollo diseño antiguo versus rediseño.
- Salud y fitness tiros de progreso uno al lado del otro.
- Productos un artículo sencillo junto al resultado terminado o diseñado.
Consejos para trabajar con el widget de comparación de imágenes #
- Coincide con las dos imágenes. Mismo tamaño, ángulo y recorte, por lo que la diapositiva se lee como una escena, no como dos fotos atascadas.
- Establezca la relación inicial. Abra parcialmente con Visible Ratio para que los visitantes puedan saber que hay algo que arrastrar.
- Mantenga las etiquetas cortas. Antes y después, o dos palabras, se sientan más limpias sobre la imagen que una oración completa.
- Elige el gatillo correcto. El arrastre se adapta al escritorio. Hover se siente rápido pero puede tomar a los usuarios táctiles con la guardia baja, así que pruébelo en un teléfono antes de realizar el envío.
- Utilice horizontal para tiros altos. Una división de arriba a abajo funciona mejor para imágenes de retrato que una toallita estrecha de izquierda a derecha.
Mira el vídeo tutorial #
¿prefieres seguirlo en la pantalla? El video tutorial a continuación recorre el elemento Comparación de imágenes de principio a fin y muestra cómo funcionan las imágenes, las etiquetas, la configuración del control deslizante y el estilo en el editor Elementor.
Preguntas frecuentes #
¿cuál es el widget de comparación de imágenes en complementos maestros?
Es un widget de Elementor que apila una imagen de antes y una de después con un identificador arrastrable entre ellas. Los visitantes deslizan el identificador para borrar de una imagen a otra, con etiquetas opcionales en cada lado, todo configurado desde el panel Elementor sin código.
¿Cómo agrego etiquetas de antes y después?
Abra la sección Imágenes y escriba una etiqueta en la pestaña Antes y Después. Cada etiqueta se imprime como una superposición en su lado de la imagen. Puede mostrarlos u ocultarlos con el interruptor Superposición en Configuración y diseñarlos en la sección Etiqueta de la pestaña Estilo.
¿Puedo hacer que el control deslizante sea vertical u horizontal?
Sí. La sección Configuración tiene un interruptor de Orientación. El valor predeterminado es una división vertical de izquierda a derecha; cámbielo y las imágenes se apilan arriba y abajo con una manija arriba y abajo. Horizontal funciona bien para imágenes de retrato o capturas de pantalla altas.
¿cómo mueven los visitantes el control deslizante de comparación?
El menú desplegable Mover manija en Configuración establece el disparador. El identificador puede seguir a un mouse arrastrando o deslizando el dedo, moviéndose al hacer clic o realizando un seguimiento del desplazamiento. Arrastrar es la opción más común en el escritorio, mientras que hacer clic es la opción más segura para las pantallas táctiles.
¿Necesito imágenes del mismo tamaño?
Para obtener el mejor resultado, sí. Las dos imágenes se ubican en el mismo marco, por lo que hacer coincidir el tamaño, el ángulo y el recorte hace que la diapositiva se lea como una sola escena. Si las imágenes difieren, establezca una resolución de imagen fija para que ambas se sirvan en las mismas dimensiones.
Envolviendo #
El widget de comparación de imágenes convierte dos imágenes en un antes y un después interactivo: cargue las dos imágenes, agregue etiquetas, establezca la orientación y el identificador, luego diseñe el control deslizante para que coincida. Para widgets relacionados, consulte el Widget de hotspot de imagen y el Widget de efectos de desplazamiento de imagen, navega por completo Widgets y extensiones de complementos maestros, y comprueba el página de precios por lo que incluye cada plan.
