Cómo mostrar la foto del antes y el después en WordPress (con efecto de diapositiva)

¿Quieres mostrar las fotos de antes y después en tu sitio web? Una foto de antes y después puede ser útil para mostrar una comparación lado a lado de dos imágenes idénticas con pequeñas diferencias. En este artículo, vamos a compartir cómo mostrar fácilmente una foto de antes y después en WordPress.

¿Cómo funciona el efecto fotográfico antes y después?

Normalmente, la gente usa Photoshop para crear una imagen de antes y después. Es una sola foto que muestra los efectos antes / después, y puede agregarla como una imagen estática en su sitio web de WordPress. Un control deslizante de fotos funcional es una forma interactiva de mostrar 2 versiones diferentes de una imagen similar a tamaño completo. Puede mover el control deslizante para comparar las dos imágenes una al lado de la otra. Veamos cómo mostrar fácilmente una foto de antes y después en WordPress.

Video tutorial

Suscríbase a MundoCMS Si no desea ver el video tutorial, puede continuar leyendo la versión de texto a continuación:

Ver la foto del antes y el después en WordPress

Lo primero que debe hacer es instalar y activar el plugin Twenty20 Image Before-After. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Tras la activación, debe crear o editar una página / publicación en su área de administración de WordPress donde desea mostrar la imagen del antes y el después. Ahora haga clic en el Agregar Twenty20 botón encima del editor de texto.

Esto abrirá la biblioteca de medios de WordPress en una ventana emergente. A partir de ahí, debe seleccionar dos imágenes para el control deslizante antes y después.

Una vez seleccionadas las imágenes, haga clic en el Insertar botón. Luego mostrará los campos de texto para agregar contenido encima de las fotos de antes y después. También puede agregar ancho para el control deslizante, valor de compensación, dirección del control deslizante, etc.

Después de eso, haga clic en el Inserta un código corto para agregar la foto del antes y el después en su página de WordPress. También puede usar el widget de imagen Twenty20 para mostrar la foto del antes y el después en la barra lateral de WordPress. Solo ve a Apariencia »Widgets en su administrador de WordPress, luego arrastre el widget Twenty20 Slider al área del widget de la barra lateral.

El widget Twenty20 Slider tiene configuraciones similares para la foto del antes y el después que hemos compartido anteriormente en esta guía. Puede seleccionar las 2 imágenes una por una en la configuración del widget para crear el control deslizante de fotos antes y después. Ahora puede visitar su sitio web para ver la foto del antes y el después en acción.

A medida que los usuarios arrastran el controlador a cada imagen, la otra imagen se vuelve visible. Los usuarios pueden mover el control deslizante completamente hacia la derecha o hacia la izquierda para ver la imagen completa del antes y el después. A medida que los usuarios deslizan el dedo, las etiquetas de antes y después desaparecen automáticamente.

Este plugin funciona muy bien con los creadores de páginas populares de WordPress como Beaver Builder y Elementor para mostrar rápidamente la foto del antes y el después en las páginas de su sitio web sin usar códigos cortos. Esperamos que este artículo le haya ayudado a aprender a mostrar una foto de antes y después en WordPress. También puede consultar nuestra guía sobre cómo agregar zoom de aumento para imágenes en WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.