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

Supongamos que eres un bloguero de fitness y quieres inspirar a tu audiencia compartiendo las imágenes de antes y después de la transformación de tu cuerpo. En lugar de simplemente colocar las imágenes una al lado de la otra, sería genial si pudiera usar un control deslizante de imagen de antes y después para mostrar la diferencia.

¡Esperar! ¿Qué es un control deslizante de imágenes de antes y después?

Es un control deslizante de imágenes que apila una imagen encima de otra y utiliza un control deslizante interactivo para revelar las imágenes. Si el control deslizante se mueve horizontalmente, la primera imagen se revelará cuando el control deslizante se mueva hacia el extremo derecho y la segunda será visible cuando se mueva hacia la izquierda.

Estos controles deslizantes son útiles para comparar dos imágenes similares. Y por lo tanto, puede ser útil para varios profesionales como fotógrafos, esteticistas, diseñadores, médicos y dentistas.

Si es un usuario de WordPress y se pregunta cómo puede usarlo en su sitio web, entonces está en el lugar correcto. En este artículo, compartiré cómo puede agregar imágenes de antes y después con el efecto de control deslizante en su sitio web.

Así que sin más preámbulos, comencemos.

Suscríbete a nuestro canal de Youtube

Cómo agregar el control deslizante de imagen de antes y después

Hay muchos complementos gratuitos y premium con los que puede agregar el control deslizante de imagen antes y después en una página web.

Sin embargo, usaremos el complemento Twenty20 Image Before After en este artículo. Más adelante, también mencionaré algunas alternativas populares gratuitas y premium.

Instalar Twenty20 Image Before After Plugin

Twenty20 es un complemento gratuito y está disponible en el repositorio de complementos de WordPress. Le permite agregar controles deslizantes de imágenes de antes y después en sus publicaciones, páginas y barra lateral. También es compatible con creadores de páginas populares como Elementor y WPBakery.

Para instalar este complemento, vaya a Complementos -> Agregar nuevo y busque Twenty20 Image Before-After. Una vez que encuentre el complemento, simplemente instálelo y actívelo:

Agregue una imagen de antes y después en su publicación o página

El complemento Twenty20 no viene con ninguna página de configuración. Entonces puede comenzar a hacer el trabajo sucio después de instalar el complemento.

Ahora, después de la actualización de WordPress 5.0, es posible que esté utilizando el editor Clásico o Gutenberg. Déjame mostrarte cómo funciona este complemento en ambos editores.

Editor de Gutenberg

El complemento Twenty20 no tiene un bloque hasta ahora, pero puede usar su funcionalidad de código corto y agregar el código en el bloque de código corto.

Echemos un vistazo a un ejemplo del shortcode:

[veinte20 img1 = ”3442 ″ img2 =” 3442 ″ dirección = ”horizontal” desplazamiento = ”0.4 ″ alinear =” ninguno ”ancho =” 100% ”antes =” Antes ”después =” Después ”hover =” falso ”]

Déjame explicarte cada uno de los parámetros:

• img1 : aquí debe agregar el ID de la imagen (no la URL de la imagen) de la primera imagen.
• img2 : agregue el ID (y no la URL de la imagen) de la segunda imagen.
• direction : esto le permite decidir si desea que el control deslizante esté en la dirección horizontal o vertical. Entonces, el valor será horizontal o vertical.
• offset : el valor del offset debe estar entre 0,1 y 1.
• alinear : determina la alineación de la imagen del antes y el después. El valor puede ser ninguno, izquierdo o derecho.
• ancho : el ancho de la imagen puede ser en porcentaje o en píxeles.
• before : puede agregar el título de la imagen anterior aquí.
• after : agrega el título de la imagen posterior.
• hover : este parámetro decide si desea mover el control deslizante con el movimiento del mouse. Acepta un valor verdadero o falso.

¿No sabes cómo encontrar el ID de una imagen? Vaya a Medios -> Biblioteca desde la barra lateral izquierda de su panel de WordPress y haga clic en la imagen. Ahora verifique la barra de direcciones de su navegador web:

En el ejemplo anterior, puede ver item = 50 en la URL. Entonces, 50 es el ID de esa imagen en particular.

¡Okey! Ahora que sabe cómo usar el código abreviado de Twenty20, cree (o edite) una publicación o página donde desee agregar el control deslizante de imagen de antes y después. Y luego, agregue un nuevo bloque y busque el widget de código corto:

Copie el código que utilicé en el ejemplo anterior, péguelo en el cuadro de código abreviado y ajústelo según sus requisitos:

Eso es todo. Ahora puede obtener una vista previa de la publicación (o página) y comprobar si funciona correctamente o no.

Editor clásico

Si está utilizando 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:

Una vez que haya terminado con la configuración, puede hacer clic en el botón Insertar código corto.

También puede realizar cambios en este shortcode más adelante, simplemente siga el ejemplo en la sección Editor de Gutenberg.

Agrega una imagen de antes y después en tu barra lateral

El complemento Twenty20 también le permite agregar imágenes de antes y después en la barra lateral de su sitio web. Viene con un widget que hace el trabajo genial por ti.

Dirígete a Apariencia -> Widgets. Ahora busque el widget Twenty20 y arrástrelo al área de la barra lateral. La configuración de este widget es similar a la sección anterior, solo que tiene dos botones adicionales para seleccionar (o cargar) las imágenes de antes y después.

Una vez que haya terminado, guarde la configuración del widget y luego revise su sitio web. Simple, ¿no es así?

Algunos complementos alternativos

Si bien me gusta el complemento Twenty20 porque es simple y gratuito, es posible que prefieras algo más. Por lo tanto, decidí compartir algunas alternativas gratuitas y premium a este complemento:

1. Imágenes de antes y después de Divi

Si es un usuario de Divi, el complemento de imágenes de antes y después para Divi es el mejor para sus necesidades. Es liviano, receptivo y admite carga diferida. Crea un nuevo módulo que le ayuda a agregar imágenes de antes y después a su sitio web. Este complemento gratuito funcionará con el complemento Divi Builder, el tema Divi y otros temas de Elegant Themes.

Precio - Gratis | Más información

2. Control deslizante multiusos antes y después

Multiusos Before After Slider es un complemento premium habilitado para tocar y deslizar. Viene con un panel de administración fácil de usar que le ayuda a ajustar cada control deslizante de imagen según sus necesidades y no requiere el uso de códigos cortos. Puede crear imágenes ilimitadas de antes y después y usarlas en publicaciones, páginas y barras laterales.

Precio - $ 18 | Más información

3. Visor inteligente de antes y después

Smart Before After Viewer es un complemento premium totalmente sensible y táctil. Le permite agregar textos de etiquetas personalizados en las imágenes de 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 varias imágenes en una sola página.

Precio - $ 18 | Más información

Nota final

Un control deslizante de imágenes de antes y después es una excelente manera de mostrar las diferencias entre dos imágenes idénticas. Y puede usar dichos controles deslizantes 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 que sea adecuado para lograr lo mismo? Háganos saber en la sección de comentarios.

Imagen destacada a través de __ / shutterstock.com