Cómo mostrar imágenes antes y después con un efecto deslizante en WordPress

Supongamos que es un blogger de fitness y desea inspirar a su audiencia compartiendo las imágenes antes y después de transformar su cuerpo. En lugar de solo colocar las imágenes una al lado de la otra, sería bastante interesante si puede usar una diapositiva de imagen antes y luego mostrar la diferencia. ¡Esperar! ¿Qué es una diapositiva de imagen antes y después? Es una diapositiva de imagen que apila una imagen sobre la otra y usa una diapositiva interactiva para revelar las imágenes. Si el control deslizante se mueve horizontalmente, la primera imagen se revelará cuando la diapositiva se mueva hacia la derecha y la segunda será visible cuando se mueva hacia la izquierda.

Dichas diapositivas son útiles para comparar dos imágenes similares. Por lo tanto, puede ser útil para varios profesionales, como fotógrafos, cosméticos, diseñadores, médicos y dentistas. Si es un usuario de WordPress y se pregunta cómo puede usarlo en su sitio, entonces está en el lugar correcto. En este artículo, compartiré cómo puede agregar imágenes antes y después con un efecto deslizante en su sitio web. Entonces, sin ninguna otra pregunta, comencemos. Suscríbase a nuestro canal de YouTube cómo agregar antes de la diapositiva de la imagen, hay muchos complementos gratuitos y premium con los que puede agregar el deslizamiento de la imagen hacia adelante en una página web.
Sin embargo, usaremos el Twenty20 Imager antes después del complemento en este artículo. Más tarde, mencionaré algunas alternativas populares gratuitas y premium. Instale la imagen Twenty20 antes después del complemento

Twenty20 es un complemento gratuito y está disponible en el almacén de complementos de WordPress. Le permite agregar diapositivas de imagen hacia adelante en publicaciones, páginas y barra lateral. También acepta páginas populares constructores como Elementor y WPBakery. Para instalar este complemento, vaya a los complementos -> Agregue nuevo y busque una imagen Twenty20 antes de -Desput. Después de encontrar el complemento, instálelo y active: agregue una imagen de avance en su publicación o página. Entonces puede comenzar a hacer las cosas sucias después de instalar el complemento. Ahora, después de actualizar WordPress 5.0, puede usar el editor clásico o el editor de Gutenberg. Así que déjame mostrarte cómo funciona este complemento para ambos editores. Gutenberg Editor El complemento Twenty20 no tiene un bloque hasta ahora, pero puede usar la funcionalidad de código corto y agregar el código al bloque de código corto. Echemos un vistazo a un ejemplo de un código corto: [Twenty20 IMG1 = “3442 ″ IMG2 =” 3442 ″ Direction = “Hoorizontal” Offset = “0.4” Align = “None” Width = “100%” Beofore = “Beofore” After = “After” Hover = “False”]]
Permítame explicar cada uno de los parámetros:
IMG1 – Aquí debe agregar la ID de imagen (no la URL de la imagen) de la primera imagen.
IMG2: agregue la ID (y no la URL de la imagen) para la segunda imagen.
Dirección: esto le permite decidir si desea el cursor en la dirección horizontal o vertical. Entonces el valor será horizontal o vertical.
Compensación: el valor del desplazamiento debe ser entre 0.1 y 1.
Alinee: esto determina la alineación de la imagen antes de -D después. El valor no puede ser ni a la izquierda ni a la derecha.
Ancho: el ancho de la imagen puede estar en porcentajes o píxeles. Antes, puede agregar el subtítulo de la imagen anterior aquí.
Después, agregue la leyenda de la imagen posterior.
Descanso: este parámetro decide si desea mover el portaobjetos en el movimiento del mouse. Acepta un valor verdadero o falso.
¿No sabes cómo encontrar una identificación de imagen? Vaya a los medios -> Biblioteca desde la barra lateral izquierda del tablero de WordPress y haga clic en la imagen. Ahora revise la barra de direcciones de su navegador web:
En el ejemplo anterior, puede ver el artículo = 50 en la URL. Entonces 50 es la identificación de esa imagen.
¡Bueno! Ahora que sabe cómo usar el código corto de Twenty20, crear (o editar) una publicación o página en la que desea agregar el avance-después. Luego agregue un nuevo bloque y busque el widget con código corto:

Copie el código que utilicé en el ejemplo anterior, péguelo al cuadro de código corto y cámbielo según sus requisitos:

Eso es todo. Ahora puede obtener una vista previa de la publicación (o página) y verificar si funciona o no. Editor clásico Si usa el editor clásico, verá un nuevo botón Agregar veinte -20 después de instalar el complemento. Haga clic en ese botón y se abrirá una ventana emergente que le pedirá que seleccione dos imágenes:

Una vez que haya seleccionado dos imágenes y haga clic en Insertar, se abrirá una nueva ventana que le pedirá algunos detalles para generar el código corto:

Después de haber terminado su configuración, puede hacer clic en el botón Insertar el código corto. También puede hacer cambios en este bacco corto más adelante; siga el ejemplo en la sección del editor de Gutenberg. Agregue una imagen hacia adelante a lado a la barra lateral Twenty20 le permite agregar imágenes hacia adelante a la barra lateral de su sitio web. Viene con un widget que hace el gran trabajo por usted. Apariencia de acceso -> widgets. Ahora encuentre el widget de Twenty20 y tírelo al área de la barra lateral. La configuración de este widget es similar a la sección anterior: solo tiene dos botones adicionales para seleccionar (o cargar) las imágenes antes y después. Simple, ¿no? Algunos complementos alternativos Aunque me gusta el complemento Twenty20, porque es simple y gratuito, puede preferir algo más. Por lo tanto, decidí compartir algunas alternativas gratuitas y premium a este complemento: 1. Antes de + después de las imágenes para Div

Si es un DIV, antes de + después de las imágenes del complemento Div es más adecuado para sus necesidades, es fácil, receptivo y acepta una carga perezosa. Se crea un nuevo módulo que le ayuda a agregar imágenes antes y después de su sitio web. Este complemento gratuito funcionará con el complemento Divi Builder, el tema de DIV y otros temas de temas elegantes.

Precio – GRATIS | Más información 2. Multiproppose antes después de control deslizante
Multipurpose antes después del control deslizante es un complemento premium activado tocando y deslizando. Viene con un panel de administración fácil de usar, que lo ayuda a cambiar cada diapositiva de imagen de acuerdo con sus necesidades y no requiere el uso de códigos cortos. Puede crear imágenes ilimitadas antes y después y puede usarlas en publicaciones, páginas y en la barra lateral. Precio – $ 18 Más información 3. Smart antes antes de que los espectadores se encuentren después de después del espectador es un complemento premium completamente receptivo y táctil. Le permite agregar textos de etiqueta personalizados a las imágenes antes y después. Y puede cambiar la posición y el color de las etiquetas sin problemas. Este complemento también le permite agregar más imágenes en una sola página.

Precio – $ 18 Más información Final Note es una diapositiva de imagen reenviada es una excelente manera de mostrar las diferencias entre dos imágenes idénticas. Y puede usar tales diapositivas en su sitio de WordPress siguiendo este tutorial. Entonces, ¿alguna vez ha utilizado alguno de los complementos mencionados en este artículo? O, ¿le gustaría sugerir un complemento en particular para que sea adecuado para obtener lo mismo? Cuéntanos en la sección de comentarios. Imagen presentada por __ / Shutterstock.com