Control deslizante de imagen Antes y Después de Elementor: widget de comparación gratuito
La comparación de imágenes es un widget de complementos maestros gratuito que apila una imagen de antes y una de después en un cuadro con un identificador entre ellos. Los visitantes arrastran o deslizan el identificador para revelar el cambio. Agregue una etiqueta a cada lado, elija Horizontal (izquierda y derecha) o Vertical (arriba y abajo), establezca dónde comienza el identificador y diseñe el identificador, las etiquetas y la superposición. Ni Elementor ni Elementor Pro gratuitos tienen un control deslizante de antes y después, por lo que este widget llena ese espacio en Elementor gratuito.
Cómo agregar un control deslizante Antes y Después en Elementor
Necesita Elementor y el complemento gratuito Master Addons de WordPress.org.
- Compruebe que la comparación de imágenes esté activada en Complementos maestros, widgets.
- En el editor Elementor, busque Comparación de imágenes y arrástrelo a la página.
- En la pestaña Antes, elija la primera imagen y etiqueta, luego haga lo mismo en la pestaña Después.
- En Configuración, establezca la relación visible y elija Horizontal o Vertical.
- Mantenga Move Handle en Mouse Drag/Swipe para teléfonos o use una opción Pro en páginas centradas en escritorio.
- Pegue el estilo del identificador y las etiquetas en la pestaña Estilo, luego pruebe el control deslizante en un teléfono.
Para obtener consejos y ejemplos de diseño, lea el guía deslizante antes y después. Cada configuración aparece en el Configuración del widget de comparación de imágenes.
Arrastra y desliza el control deslizante Antes y Después
Sube el Antes y Después imágenes, cada una con su propia Etiqueta y Resolución de Imagen. En Ajustes, Relación visible (%) establece dónde comienza el identificador, Orientación es Horizontal (el valor predeterminado) o Vertical, y Superposición muestra u oculta las etiquetas. Mover manija ¿mouse Drag/Swipe está en el complemento gratuito. Master Addons Pro agrega Mouse Move, donde el identificador sigue al cursor, y Mouse Click.
- Arrastre y deslice el trabajo en pantallas táctiles y de escritorio.
- Inicie el identificador descentrado para resaltar el resultado.
- Utilice imágenes con las mismas dimensiones de píxeles para que los dos lados se alineen.
Etiquetas transparentes y superpuestas personalizables
Encender Superposición para mostrar las etiquetas Antes y Después en las imágenes. La sección de estilo Overlay tiene fondos Normal y Hover. El Etiqueta la sección estiliza cada lado por separado con color, tipografía, borde, radio del borde, margen y relleno, para que puedas cambiar “Antes” y “Después” a “Antiguo” y “Nuevo” o cualquier otra palabra.
- Texto de etiqueta personalizado en cualquier idioma.
- Estilos separados para las etiquetas de antes y después.
- Un fondo superpuesto diferente al flotar.
Estilismo profesional de manijas y contenedores
El Manejar la sección establece el color y el tamaño del manillar, el ancho y alto del manillar, y el color del icono, el borde y el radio del borde para Normal y Hover. Estilo de diseño agrega un borde, relleno y margen alrededor de todo el control deslizante. Border Radius y Box Shadow en el contenedor son opciones de Master Addons Pro.
- Combina el color del mango con tu marca.
- Una barra delgada con un asa redonda para una apariencia limpia.
- Esquinas redondeadas y una sombra en el contenedor con Pro.
Comparación de imágenes: gratis frente a profesional
Elementor no tiene ningún widget de antes y después en su complemento gratuito o Pro. Esto es lo que incluye el widget de complementos maestros gratuitos y lo que agrega Pro.
| Característica | Gratis | Complementos maestros Pro |
|---|---|---|
| Imágenes de antes y después con etiquetas | Sí | Sí |
| Orientación horizontal y vertical | Sí | Sí |
| Punto de partida de la relación visible | Sí | Sí |
| Mango de arrastre/deslizamiento del mouse | Sí | Sí |
| Manijas Mouse Move y Mouse Click | No | Sí |
| Estilo de manijas, etiquetas y superposiciones | Sí | Sí |
| Radio del borde del contenedor y sombra de caja | No | Sí |
Para la mayoría de los controles deslizantes de antes y después, la versión gratuita es suficiente. Pro tiene sentido cuando quieres que el identificador siga el cursor o necesitas esquinas redondeadas y una sombra sin CSS personalizado. Para fijar notas en una imagen, consulte Punto de acceso de imagen (Pro).
Preguntas frecuentes para comparar imágenes
¿el widget de comparación de imágenes es gratuito?
Sí. El widget es gratuito con arrastrar y deslizar, etiquetas, ambas orientaciones y estilo de identificador. Master Addons Pro agrega manijas Mouse Move y Mouse Click y radio del borde del contenedor y sombra de caja.
¿Funciona en teléfonos?
Sí, con la manija gratuita de arrastrar/deslizar el mouse. Los visitantes deslizan el dedo para mover el divisor. La opción Pro Mouse Move depende del desplazamiento, por lo que no funciona en pantallas táctiles.
¿elementor tiene un control deslizante de antes y después?
No. Ni Elementor ni Elementor Pro gratuitos incluyen una comparación de imágenes o un widget de antes y después, por lo que necesitas un complemento como este.
¿cuándo debo utilizar la orientación vertical?
Utilice Vertical para imágenes altas, como retratos de cuerpo entero, fachadas de edificios o capturas de pantalla largas. La imagen anterior se encuentra en la parte superior y la imagen posterior debajo, con un asa hacia arriba y hacia abajo.
¿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 comparar más de dos imágenes?
No. Cada widget compara dos imágenes. Para más pares, agregue un widget por par o muestre varias imágenes en el Carrusel de imágenes.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
