{"id":371669,"date":"2023-04-25T12:52:00","date_gmt":"2023-04-25T09:52:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371669"},"modified":"2023-04-25T12:52:14","modified_gmt":"2023-04-25T09:52:14","slug":"la-manera-facil-agregue-el-control-deslizante-antes-y-despues","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/la-manera-facil-agregue-el-control-deslizante-antes-y-despues\/","title":{"rendered":"La manera f\u00e1cil Agregue el control deslizante Antes y despu\u00e9s"},"content":{"rendered":"\n

Las im\u00e1genes de antes y despu\u00e9s se utilizan mucho con fines de marketing en una amplia gama de industrias<\/strong>. No hay palabras que puedan describir mejor el efecto que tiene un determinado proceso que una imagen que muestra con precisi\u00f3n c\u00f3mo se ve\u00eda alguien o algo antes y despu\u00e9s de ese proceso. Incluso en negocios que no giran en torno a productos cuyos efectos son visibles, es posible utilizar esta caracter\u00edstica de forma humor\u00edstica.<\/p>\n

Supongamos que dirige un restaurante: podr\u00eda mostrar c\u00f3mo se ve una persona antes de comer en su palacio y qu\u00e9 encantada se ve despu\u00e9s de probar sus delicias. Las posibilidades que ofrece el control deslizante antes y despu\u00e9s en t\u00e9rminos de representar los beneficios y ventajas de sus productos\/servicios son ilimitadas<\/strong>. Todo depende de tu imaginaci\u00f3n.<\/p>\n

Al igual que agregar un efecto de paralaje<\/a> a sus p\u00e1ginas hace que su sitio web se vea moderno, el control deslizante de antes y despu\u00e9s hace que sea dif\u00edcil de olvidar, ya que las im\u00e1genes dicen m\u00e1s de 1000 palabras.<\/p>\n

Adem\u00e1s, puede agregar esta funci\u00f3n a su sitio web usted mismo. En este art\u00edculo, le mostraremos c\u00f3mo crear un control deslizante de antes y despu\u00e9s con el popular widget gratuito de comparaci\u00f3n antes\/despu\u00e9s<\/a>.<\/p>\n

Est\u00e9n atentos para leer m\u00e1s sobre:<\/p>\n<\/p>\n

Agregar control deslizante antes y despu\u00e9s con Qi Addons para Elementor<\/h2>\n

Qi Addons para Elementor<\/a> es una herramienta intuitiva que le permite agregar una amplia gama de magn\u00edficos elementos<\/strong> a su sitio web sin esfuerzo. Viene con una interfaz muy pr\u00e1ctica y f\u00e1cil de usar<\/strong>, y tanto los novatos como los usuarios avanzados lo encontrar\u00e1n f\u00e1cil de usar. Lo que es particularmente bueno de Qi es el hecho de que, adem\u00e1s de tantas caracter\u00edsticas \u00fatiles, tambi\u00e9n le brinda una pizca de elegancia contempor\u00e1nea.<\/p>\n

El proceso de instalaci\u00f3n de<\/a> QI Addons para Elementor no es diferente de la instalaci\u00f3n de cualquier otro complemento. Si tiene alguna pregunta al respecto, aseg\u00farese de consultar el enlace que proporcionamos anteriormente, y tambi\u00e9n puede escribirnos en la secci\u00f3n de comentarios.<\/p>\n

\"La<\/a><\/p>\n

Dado que este es un complemento de Elementor, aseg\u00farese de cambiar al editor de Elementor al crear una nueva publicaci\u00f3n<\/strong>. Todos los widgets de Qi Addons se mostrar\u00e1n claramente en el men\u00fa de elementos de la izquierda<\/strong>. Simplemente despl\u00e1cese hacia abajo en el men\u00fa para encontrarlos.<\/p>\n

El control deslizante Antes y Despu\u00e9s<\/a> ofrece una forma sencilla y eficaz de mostrar dos im\u00e1genes en el mismo cuadro<\/strong>. Encu\u00e9ntrelo en el men\u00fa de la barra lateral a la izquierda, escribiendo el nombre del widget en el campo de b\u00fasqueda o navegando por los widgets en el men\u00fa.<\/p>\n

\"La<\/a><\/p>\n

Para agregar el Control deslizante de comparaci\u00f3n Antes\/Despu\u00e9s, arrastre y suelte el elemento Elementor en el lugar deseado. Cuando se agrega el widget, todas las configuraciones estar\u00e1n en el lado izquierdo<\/strong> y dentro de las pesta\u00f1as Contenido y Estilo est\u00e1n todas las opciones relacionadas con el control deslizante<\/strong>.<\/p>\n

\"La<\/a><\/p>\n

Ahora, debe agregar las im\u00e1genes de antes y despu\u00e9s al control deslizante<\/strong>. Primero, estamos agregando la imagen anterior: desplace el cursor sobre el campo de la imagen y se mostrar\u00e1 la opci\u00f3n Elegir imagen o simplemente haga clic en el \u00edcono peque\u00f1o m\u00e1s en el medio del campo.<\/p>\n

\"La<\/a><\/p>\n

Puede elegir una imagen de la biblioteca de medios o cargar una imagen en su biblioteca de medios si es necesario<\/strong>. Simplemente arrastre y suelte la imagen seleccionada y col\u00f3quela en la biblioteca de medios si a\u00fan no est\u00e1 all\u00ed, luego selecci\u00f3nela y elija.<\/p>\n

\"La<\/a><\/p>\n

Despu\u00e9s de insertar las im\u00e1genes deseadas, puede continuar personalizando el control deslizante antes\/despu\u00e9s cambiando el texto que se mostrar\u00e1 en el c\u00edrculo en el medio del control deslizante<\/strong>. Puede escribir una instrucci\u00f3n aqu\u00ed, o un mensaje m\u00e1s llamativo, depende de usted y del estilo de su sitio web. Tambi\u00e9n puede elegir si desea que el texto se alinee vertical u horizontalmente.<\/p>\n

Si desea ajustar d\u00f3nde aparecer\u00e1 el borde entre la imagen anterior y posterior en el control deslizante, puede ingresar el valor de Desplazamiento deseado en el campo<\/strong>. El valor predeterminado es 50%, lo que significa que el borde predeterminado est\u00e1 justo en el medio de la imagen. Este es el aspecto que puede tener el control deslizante si ajusta el desplazamiento:<\/p>\n

\"La<\/a><\/p>\n

Ahora es el momento de ajustar m\u00e1s el control deslizante antes y despu\u00e9s. Veamos qu\u00e9 m\u00e1s puede personalizar para que el control deslizante se vea exactamente como lo necesita. Haga clic en la pesta\u00f1a Estilo para explorar m\u00e1s opciones<\/strong>.<\/p>\n

\"La<\/a><\/p>\n

Si desea mover el controlador circular desde el centro de la imagen, simplemente use el control deslizante para ajustar el valor de Desplazamiento superior del controlador<\/strong>. Inmediatamente ver\u00e1 los cambios en vivo para que pueda decidir f\u00e1cilmente qu\u00e9 funciona mejor para usted. Tambi\u00e9n ajustar\u00e1 el tama\u00f1o del c\u00edrculo de la misma manera, as\u00ed como el borde entre la versi\u00f3n anterior y posterior de la imagen<\/strong>.<\/p>\n

\"La<\/a><\/p>\n

Tambi\u00e9n puede hacer clic en el color de texto de Nabdle para crear su tono de color para el texto en el c\u00edrculo<\/strong>, tambi\u00e9n elija la fuente del texto de la misma manera<\/strong>. Por \u00faltimo, tambi\u00e9n puede personalizar el color del c\u00edrculo<\/strong> de la misma manera.<\/p>\n

\"La<\/a><\/p>\n

Explorando las Opciones Avanzadas<\/h2>\n

En la pesta\u00f1a Avanzado, encontrar\u00e1 muchas m\u00e1s opciones para hacer que el control deslizante sea m\u00e1s atractivo y atractivo. Estas opciones no son exclusivas solo para este widget, son opciones predeterminadas de Elementor que tambi\u00e9n puede usar para editar otros widgets en una p\u00e1gina.<\/p>\n

Vamos a ilustrar algunos de los m\u00e1s interesantes. Si\u00e9ntase libre de probar todas las opciones, ya que ver\u00e1 todos los cambios que realice en vivo, para que pueda aprender instant\u00e1neamente qu\u00e9 hace cada opci\u00f3n con el control deslizante y si funciona para usted.<\/p>\n

\"La<\/a><\/p>\n

Si abre el men\u00fa Avanzado, ver\u00e1 las opciones para configurar el margen y el relleno<\/strong>. Ver\u00e1 un peque\u00f1o \u00edcono de computadora port\u00e1til al lado de cada opci\u00f3n que le permite establecer diferentes valores para el margen y el relleno en diferentes dispositivos: computadora port\u00e1til, tableta o dispositivo m\u00f3vil.<\/p>\n

\"La<\/a><\/p>\n

Los efectos de movimiento son particularmente interesantes y tiene una gran variedad de m\u00e1s de 35 efectos de movimiento para elegir. Tambi\u00e9n tienes la posibilidad de configurar diferentes animaciones para mostrar en diferentes dispositivos<\/strong>. Despu\u00e9s de elegir el tipo de animaci\u00f3n, tambi\u00e9n puede ajustar su duraci\u00f3n y retraso si lo considera necesario.<\/p>\n

\"La<\/a><\/p>\n

Ahora haga clic en la pesta\u00f1a Transformar para descubrir m\u00e1s efectos que puede usar<\/strong>. Desde rotar hasta sesgar y voltear horizontal y verticalmente, hay muchas cosas que puede hacer para cambiar la visualizaci\u00f3n del control deslizante.<\/p>\n

\"La<\/a><\/p>\n

En la pesta\u00f1a Borde, encontrar\u00e1 opciones que le permitir\u00e1n decorar el lateral agregando bordes de im\u00e1genes sombreadas en los colores que seleccione<\/strong>. Tambi\u00e9n puede optar por agregar un efecto de sombra alrededor del cuadro deslizante y configurar la salida del efecto de sombra.<\/p>\n

\"La<\/a><\/p>\n

Las opciones en la pesta\u00f1a M\u00e1scara son muy \u00fatiles. Puede configurar aqu\u00ed para que el control deslizante se muestre en diferentes formas<\/strong>: c\u00edrculo, flor, boceto, tri\u00e1ngulo, gota, hex\u00e1gono o incluso agregar una forma personalizada. Tambi\u00e9n es posible ajustar el tama\u00f1o y la posici\u00f3n de la forma seleccionada.<\/p>\n

\"La<\/a><\/p>\n

Preste especial atenci\u00f3n a la pesta\u00f1a Responsivo<\/strong>, ya que aqu\u00ed puede elegir que el control deslizante no se muestre en los dispositivos seleccionados<\/strong>.<\/p>\n

\"La<\/a><\/p>\n

As\u00ed es como se ve el control deslizante en la p\u00e1gina despu\u00e9s de que lo ajustamos a nuestras necesidades:<\/p>\n

\"La<\/a><\/p>\n

Para m\u00e1s informaci\u00f3n echa un vistazo a este v\u00eddeo:<\/p>\n