Supongamos que eres un blogger de fitness y quieres inspirar a tu audiencia compartiendo fotos de antes y después de la transformación de tu cuerpo. En lugar de colocar las imágenes una al lado de la otra, sería bueno si pudiera usar el control deslizante de la imagen anterior y posterior 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 quedará expuesta cuando el control deslizante se mueva completamente hacia la derecha, y la segunda será visible cuando se mueva hacia la izquierda.
Estos controles deslizantes son útiles para comparar dos imágenes similares. Por lo tanto, puede ser útil para muchos 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, ha venido al lugar correcto. En este artículo, compartiré cómo puede agregar imágenes de antes y después con efecto deslizante en su sitio web.
Así que sin más preámbulos, comencemos.
Suscríbete a nuestro canal de YouTube
Cómo agregar delante del control deslizante de la imagen
Hay muchos complementos gratuitos y premium con los que puede agregar un control deslizante de imagen de antes y después en un sitio web.
Sin embargo, utilizaremos Imagen de Twenty20 antes y después del complemento En este articulo. Más adelante, también mencionaré algunas alternativas gratuitas y premium populares.
Instale la imagen de Twenty20 antes del complemento
Twenty20 es un complemento gratuito y está disponible en el repositorio de complementos de WordPress. Le permite agregar controles deslizantes de imagen anterior a 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 haya encontrado el complemento, simplemente instálelo y actívelo:
Agregue una imagen de antes y después en su publicación o sitio web
El complemento Twenty20 no contiene ninguna página de configuración. Entonces puede comenzar a hacer el trabajo sucio después de instalar el complemento.
Ahora que ha actualizado WordPress 5.0, puede usar el editor Classic o Gutenberg. Así que te mostraré cómo funciona este complemento en ambos editores.
redactor de Gutenberg
El complemento Twenty20 aún no tiene bloque, pero puede usar su funcionalidad de código abreviado y agregar el código en el bloque de código abreviado.
Echemos un vistazo al shortcode, por ejemplo:
[twenty20 img1=”3442″ img2=”3442″ direction=”horizontal” offset=”0.4″ align=”none” width=”100%” before=”Before” 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 – Agrega el ID (no la URL de la imagen) de la segunda imagen.
- dirección – Esto le permite decidir si el control deslizante debe estar en dirección horizontal o vertical. Entonces el valor será horizontal o vertical.
- balance – El valor de cambio debe estar entre 0,1 y 1.
- igualar – Especifica la alineación de la imagen antes y después. El valor puede ser cero, izquierda o derecha.
- ancho – El ancho de la imagen se puede expresar en porcentaje o en píxeles.
- antes de – Aquí puede agregar un título a la foto anterior.
- después – Añadir subtítulos a la imagen residual.
- flotar – Este parámetro decide si desea mover el control deslizante mientras mueve el mouse. Acepta valor verdadero o falso.
¿No sabe cómo encontrar la identificación de la 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. Así que 50 es el ID de esa imagen en particular.
¡De acuerdo! Ahora que sabe cómo usar el código abreviado de Twenty20, cree (o edite) una publicación o página donde desee agregar un control deslizante de imagen antes. Y luego agregue un nuevo bloque y busque el widget de shortcode:
Copie el código que usé en el ejemplo anterior, péguelo en el campo de código abreviado y personalícelo según sea necesario:
Eso es todo. Ahora puede obtener una vista previa de la publicación (o página) y ver 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 este botón y se abrirá una ventana emergente que le pedirá que seleccione dos imágenes:
Después de seleccionar dos imágenes y hacer clic en Insertar, se abrirá una nueva ventana solicitando detalles sobre cómo generar el código abreviado:
Después de finalizar 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.
Agregue una imagen de antes y después en la 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 un buen trabajo por ti.
Vaya 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) fotos antes y después.
Cuando haya terminado, guarde la configuración de su widget y luego verifique su sitio. ¿No es sencillo?
Algunos complementos alternativos
Si bien me gusta el complemento Twenty20 porque es simple y gratuito, es posible que prefiera algo más. Es por eso que decidí compartir algunas alternativas gratuitas y premium a este complemento:
1. Fotos de antes y después de Divi
Si eres un usuario de Divi, el plugin Before + After para Divi es el mejor para tus 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. Este complemento gratuito funcionará con el complemento Divi Builder, el tema Divi y otros temas elegantes.
Precio – gratis | Más información
2. Universal delante de la cremallera.
Before After Universal Slider es un complemento premium con soporte para tocar y deslizar. Viene con un panel de administración fácil de usar que lo ayuda a personalizar cada control deslizante de imagen según sus necesidades y no requiere accesos directos. Puede crear imágenes ilimitadas de antes y después y usarlas en publicaciones, páginas y barra lateral.
Precio – 18 PLN | Más información
3. Inteligente antes de navegar
Smart Before After Viewer es un complemento premium totalmente sensible y táctil. Le permite agregar texto de etiqueta personalizado en las imágenes de antes y después. Y puede cambiar fácilmente la posición y el color de las etiquetas. Este complemento también le permite agregar múltiples imágenes en una página.
Precio – 18 PLN | Más información
Nota final
El 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 controles deslizantes como estos en su sitio de WordPress siguiendo este tutorial.
¿Alguna vez ha usado alguno de los complementos mencionados en este artículo? ¿O le gustaría sugerir un complemento específico que sea adecuado para lograr lo mismo? Infórmenos en la sección para comentarios.
Imagen destacada a través de __ / shutterstock.com
