Supongamos que eres un blogger de fitness y quieres inspirar a tu audiencia compartiendo imágenes del antes y el 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 antes y después para mostrar la diferencia.
¡Esperar! ¿Qué es un control deslizante de imagen 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 eres un usuario de WordPress y te preguntas cómo puedes usarlo en tu sitio web, entonces estás en el lugar correcto. En este artículo, compartiré cómo puede agregar imágenes de antes y después con el efecto deslizante en su sitio web.
Así que sin más preámbulos, comencemos.
Suscríbete a nuestro canal de Youtube
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 gratuitas y premium populares.
Instalar la imagen de Twenty20 antes y después del complemento
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 los 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 , puede estar usando el editor Classic o Gutenberg. Así que déjame mostrarte cómo funciona este complemento en ambos editores.
Redactor de Gutenberg
El complemento Twenty20 no tiene un bloque hasta el momento, pero puede usar su funcionalidad de código abreviado y agregar el código en el bloque de código abreviado .
Echemos un vistazo a un ejemplo del shortcode:
[twenty20 img1=”3442″ img2=”3442″ dirección=”horizontal” offset=”0.4″ align=”none” width=”100%” before=”Antes” after=”After” hover=”false”]
Voy a explicar cada uno de los parámetros:
- img1 : aquí debe agregar la ID de la imagen (no la URL de la imagen) de la primera imagen.
- img2 : agregue la ID (y no la URL de la imagen) de la segunda imagen.
- dirección : esto le permite decidir si desea que el control deslizante esté en dirección horizontal o vertical. Entonces, el valor será horizontal o vertical.
- compensación : el valor de la compensación debe estar entre 0,1 y 1.
- align : esto determina la alineación de la imagen de antes y después. El valor puede ser ninguno, izquierda o derecha.
- ancho : el ancho de la imagen puede ser en porcentaje o en píxeles.
- antes : puede agregar el título de la imagen anterior aquí.
- after : agregue 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 tablero de WordPress y haga clic en la imagen. Ahora revisa la barra de direcciones de tu navegador web:
En el ejemplo anterior, puede ver el elemento = 50 en la URL. Entonces, 50 es la identificación de esa imagen en particular.
¡Bueno! Ahora que sabe cómo usar el código abreviado de Twenty20, cree (o edite) una publicación o página en la que desee agregar el control deslizante de imagen de antes y después. Y luego, agrega un nuevo bloque y busca el widget de shortcode:
Copie el código que usé en el ejemplo anterior, péguelo en el cuadro de código abreviado y modifíquelo según sus requisitos:
Eso es todo. Ahora puede obtener una vista previa de la publicación (o página) y verificar si funciona correctamente o no.
Editor clásico
Si está utilizando el Editor clásico, verá un nuevo botón Agregar Twenty 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 haya hecho clic en Insertar, se abrirá una nueva ventana que le pedirá algunos detalles para generar el código abreviado:
Una vez que haya terminado con la configuración, puede hacer clic en el botón Insertar código abreviado.
También puede realizar cambios en este código abreviado más tarde; simplemente siga el ejemplo en la sección Editor de Gutenberg .
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 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 verifique su sitio web. Sencillo, ¿no?
Algunos complementos alternativos
Si bien me gusta el complemento Twenty20 porque es simple y gratuito, es posible que prefiera algo más. Por lo tanto, decidí compartir algunas alternativas gratuitas y premium a este complemento:
1. Imágenes de antes y después para Divi
Si es un usuario de Divi, el plugin Before + After Images for Divi es el mejor para sus necesidades. Es liviano, receptivo y admite carga diferida. Crea un nuevo módulo que lo 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 antes y después de usos múltiples
El control deslizante antes y después de usos múltiples es un complemento premium habilitado para tocar y deslizar. Viene con un panel de administración fácil de usar que lo 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 barra lateral.
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 múltiples imágenes en una sola página.
Precio – $18 | Más información
Nota final
Un control deslizante de imagen de antes y después es una excelente manera de mostrar las diferencias entre dos imágenes idénticas. Y puede usar tales controles deslizantes en su sitio de WordPress siguiendo este tutorial.
Entonces, ¿alguna vez has usado 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