La forma más sencilla de agregar el control deslizante antes y después de su sitio web

Las imágenes antes y luego se utilizan ampliamente para fines de marketing en una amplia gama de industrias. No hay palabras que describan mejor el efecto que tiene un determinado proceso que una imagen que se ve exactamente cómo se veía alguien o algo y después de ese proceso. Incluso en los negocios que no gira en los productos cuyos efectos son visibles, puede usar esta función de manera humorística. Supongamos que conduce un restaurante: puede mostrar cómo se ve una persona antes de comer en su palacio y lo emocionado que se ve después de probar sus manjares. Las posibilidades antes y después de proporcionar el control deslizante en términos de representar sus beneficios y beneficios de sus productos/servicios son ilimitados. Todo depende de tu imaginación.
Al agregar el efecto de paralaje a sus páginas, hace que su sitio se vea moderno, la diapositiva antes y después de que sea difícil olvidar, porque las imágenes dicen más de 1000 palabras. Además, puede agregar esta función a su sitio por completo de forma gratuita y de uno. En este artículo, le mostraremos cómo crear un control deslizante antes y después de los populares complementos de complemento Free Qi complementos para el elemento. Manténgase en fase para leer más sobre:
Agregar el control deslizante antes y después con suplementos Qi para Elementor
Explorando opciones avanzadas

Agregar el control deslizante antes y después con suplementos Qi para Elementor
Los complementos de Qi para Elementor es una herramienta intuitiva y gratuita que le permite agregar una amplia gama de elementos hermosos a su sitio web. Viene con una interfaz muy práctica, fácil de usar y para principiantes y usuarios avanzados, es fácil de usar. Lo que es particularmente bueno de Qi es el hecho de que, además de tantas funciones útiles, también le da un toque de elegancia contemporánea. Si tiene alguna pregunta al respecto, asegúrese de verificar el enlace que proporcionamos anteriormente y puede escribirnos en la sección de comentarios.
Debido a que este es un complemento elemental, asegúrese de pasar al editor primario al crear una nueva publicación. Todos los widgets de complementos QI se mostrarán cuidadosamente en el menú de izquierda. Simplemente desplácese el menú hacia abajo para encontrarlos. Widget Slider antes y después de proporcionar una forma simple y efectiva de mostrar dos imágenes en el mismo cuadro. Encuéntralo en el menú en la barra lateral izquierda, escribiendo el nombre del widget en el campo de búsqueda o navegando por los widgets del menú.

Para agregar la diapositiva de comparación antes/después, tire y coloque el elemento elemental en el lugar deseado. Cuando se agrega el widget, todas las configuraciones estarán en el lado izquierdo y en las pestañas de contenido y estilo son todas las opciones relacionadas con la diapositiva.

Ahora tiene que agregar las imágenes antes y después de la diapositiva. En primer lugar, agregue la imagen de antemano: pase el cursor sobre el campo de la imagen y la opción de elección se mostrará o haga clic solo en el icono más en el medio del campo.

Puede elegir una imagen de la biblioteca de medios o puede cargar una imagen en su biblioteca de medios si es necesario. Simplemente tire y coloque la foto seleccionada y en la biblioteca de medios si aún no está allí, luego seleccione y elija. De la diapositiva. Puede escribir una instrucción aquí, o un mensaje más cautivador, depende de usted y el estilo de su sitio. También puede elegir si desea que el texto esté alineado vertical u horizontalmente. Si desea ajustar el lugar donde aparecerá el borde entre la imagen antes y después de la imagen de glaster, puede ingresar el valor de compensación deseado en el campo. El valor predeterminado es del 50%, lo que significa que el borde predeterminado está justo en el medio de la imagen. Así es como puede verse el control deslizante si ajusta el desplazamiento:

Ahora, es hora de un ajuste más fino de la diapositiva deslizante hacia adelante. Veamos qué puede personalizar para que la diapositiva se vea cómo debería verse. Haga clic en la pestaña Estilo para explorar más opciones.

Si desea mover el mango circular en el centro de la imagen, use el control deslizante para ajustar el valor del mango superior. Verá cambios en vivo de inmediato, para que pueda decidir fácilmente qué funciona mejor para usted.

También puede hacer clic en el color del texto Nabdle para crear el tono de color para el texto en el círculo, elija la fuente de texto de la misma manera. Finalmente puede personalizar el color del círculo de la misma manera. Explorando opciones avanzadas

En la pestaña Avanzada, encontrará más opciones para que la diapositiva sea más atractiva y atractiva. Estas opciones no son exclusivas solo para este widget, son opciones implícitas elementales que puede usar para editar otros widgets en una página. Ilustramos algunos de los más interesantes. Siéntase libre de probar todas las opciones, porque verá todos los cambios que realice en vivo para que pueda averiguar qué hace cada opción en el control deslizante y si funciona para usted.

Si abre el menú avanzado, verá las opciones para configurar el margen y el relleno. Notará un pequeño icono de la computadora portátil junto a cada opción que le permite establecer diferentes valores para el margen y el relleno en diferentes dispositivos: computadora portátil, tableta o móvil.


Los efectos de movimiento son particularmente interesantes y tiene una amplia gama de más de 35 efectos de movimiento para elegir. También tiene la capacidad de establecer diferentes animaciones para mostrar en diferentes dispositivos. Después de elegir el tipo de animación, también puede ajustar su duración y retraso, si lo considera necesario.
Ahora haga clic en la pestaña Transformación para descubrir más efectos que puede usar. Desde la rotación hasta la inclinación y el volcado horizontal y vertical, hay muchas cosas que puede hacer para cambiar el control deslizante.

En la pestaña Border, encontrará opciones que le permitirán decorar el lado agregando contras de imagen de sombra en los colores que seleccione. También puede optar por agregar un efecto de sombra alrededor del cuadro de diapositivas y establecer el resultado del efecto de sombra. Las opciones en la pestaña de máscara son muy útiles. Puede establecer aquí que el portaobjetos se muestra en diferentes formas: círculo, flor, boceto, triángulo, blub, hexágono o incluso agregar una forma personalizada. También es posible ajustar el tamaño y la posición de la forma seleccionada.

Preste especial atención a la pestaña receptiva, ya que es muy posible elegir que el control deslizante no se mostrará en los dispositivos seleccionados.

Así es como se ve la diapositiva deslizante después de ajustarlo para nuestras necesidades:

En conclusión

Como puede ver, agregue el control deslizante antes y después de sus páginas no es una ciencia de misiles. Ahora puede dejar que su imaginación vuele y cree una impresionante representación visual de los efectos que su trabajo puede producir. En cualquier momento.

Esperamos que este artículo haya sido útil. Si le gustó, ¡no dude en consultar algunos de estos artículos!

Cómo personalizar su formulario de contacto 7 Stiland Simple

Cómo resaltar el texto en WordPress de manera fácil
Cómo crear el flujo de pasos utilizando el widget del proceso de elemento elemental