¿Está buscando el mejor deslizador de imágenes de antes y después para su sitio web? ¡No se preocupe más! Porque tenemos la solución adecuada para ti. Hoy, vamos a mostrarte cómo puedes hacer uno fácilmente usando Elementor.

Un deslizador de imágenes antes y después crea un pase de diapositivas colocando dos imágenes similares una al lado de la otra. Con una barra deslizante, puede arrastrarla hacia delante y hacia atrás para ver las dos imágenes comparadas. Después de todo, es una forma interesante de mostrar productos recién llegados, el crecimiento de su empresa o significados especiales. No sólo hace que sus visitantes se sientan atraídos, sino que también muestra los efectos de su producto o servicio. De hecho, ¡es una herramienta bastante buena!

Por lo general, la gente utiliza herramientas de edición de fotos para hacer este tipo de efecto. Pero con un simple Comparar imágenes widget, puede lograr fácilmente esta hazaña. Tenga en cuenta que, la empresa Element Pack ha desarrollado este widget. Este widget es un deslizador de imágenes totalmente funcional que te ayuda a mostrar 2 versiones diferentes de la misma imagen. Además, puedes utilizarlo como quieras.

Basta de cháchara. ¡Vamos a ello!

Insertar y Personalizar el Deslizador de Imagen Antes y Después

Insertar widget

En primer lugar, vaya a su página web en la que desea utilizar este control deslizante. Como estamos haciendo esto usando elementor, asegúrese de instalar Elementor y Element Pack Lite plugins en su tablero de instrumentos. Sin embargo, no hablaremos de los procedimientos de instalación en este blog.

Aunque no merece la pena mencionarlo, a los principiantes les puede resultar difícil. Basta con buscar el Comparar imágenes en el menú de widgets. Cuando lo veas (tiene ElementPack en él), arrástrelo y suéltelo en una sección del editor.

Personalizar el diseño del deslizador de imágenes

Una vez que lo suelte, verá la configuración por defecto del deslizador al principio. Sin embargo, esta es la Diseño en la sección Contenido ficha. Puede elegir cualquier tipo de imagen para el deslizador de imágenes para mostrarla aquí.

Cambiemos las imágenes. Para empezar, seleccionemos las normales.

Una vez insertada una imagen, puede cambiar su tamaño de Tamaño de la imagen opción. Generalmente, cuanto mayor sea la imagen, más espacio ocupará. Para una imagen con una altura de 1000 píxeles pero una anchura de sólo 500 píxeles, aumentará la longitud del deslizador en 1000 píxeles.

Además, puedes cambiar las etiquetas 'Después' y 'Antes' desde aquí. Vamos a hablar de esta parte más tarde y pasar a la siguiente sección.

Ajustes de interfaz

Ir a Pestaña Contenido> Adicional

En Más información en también se conoce como configuración de la interfaz. Desde aquí, podemos cambiar la orientación de la barra deslizante a Vertical u Horizontal. También, puede cambiar el 'antes de la imagen' visibilidad. En Superposición El conmutador activa/desactiva la superposición en todo el deslizador de imágenes antes y después.

Una vez más, hay algunas cosas de las que hablar en esta sección. Observe que, puede añadir un círculo en el centro de la barra deslizante. También, puede agregar un efecto de desenfoque al círculo.

Otra cosa interesante es que tienes la opción de suavizar el deslizamiento de la barra deslizante. Activar el conmutador ¿Alisado? para suavizar el deslizamiento. Sin embargo, puede ajustar la sensibilidad de la barra deslizante de la imagen con el botón de desplazamiento situado debajo.