Cómo mostrar antes y después de la foto 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 en paralelo de dos imágenes idénticas con pequeñas diferencias. En este artículo, compartiremos cómo mostrar fácilmente una foto antes y después de WordPress..

¿Cómo funciona el efecto de foto antes y después??

Normalmente las personas usan Photoshop para crear una imagen de antes y después. Es una foto única que muestra los efectos de 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 en tamaño completo. Puede mover el control deslizante para comparar ambas imágenes una al lado de la otra..

Echemos un vistazo a cómo mostrar fácilmente una foto antes y después en WordPress.

Video Tutorial

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

Mostrando la foto de antes y después en WordPress

Lo primero que debe hacer es instalar y activar el complemento Twenty20 Image Before-After. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe crear o editar una página / publicación en el área de administración de WordPress en la que desea mostrar la imagen de antes y después. Ahora, haga clic en el Añadir Twenty20 botón arriba del editor de texto.

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

Una vez seleccionadas las imágenes, haga clic en Insertar botón.

A continuación, mostrará los campos de texto para agregar contenido en la parte superior de las fotos de antes y después. También puede agregar ancho para el control deslizante, el valor de desplazamiento, la dirección del control deslizante y más.

Después de eso, haga clic en el Insertar código corto botón para agregar la foto de antes y después en su página de WordPress.

También puede usar el widget de imagen Twenty20 para mostrar la foto de antes y después en la barra lateral de WordPress. Simplemente ir a Apariencia »Widgets sección en su administrador de WordPress, y luego arrastre el widget Twenty20 Slider en su área del widget de la barra lateral.

El widget Twenty20 Slider tiene configuraciones similares para la foto de antes y después, como compartimos 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 de antes y después en acción..

A medida que los usuarios deslizan el controlador hacia cada imagen, la otra imagen se hará visible. Los usuarios pueden tomar el control deslizante completamente hacia la derecha o hacia la izquierda para ver la imagen completa antes y después. A medida que los usuarios deslizan, las etiquetas de antes y después desaparecerán automáticamente..

Este complemento funciona muy bien con los creadores de páginas populares de WordPress como Beaver Builder y Elementor para mostrar rápidamente antes y después de la foto en las páginas de su sitio web sin usar códigos cortos.

Esperamos que este artículo te haya ayudado a aprender cómo mostrar fotos de antes y después en WordPress. También puede consultar nuestra guía sobre cómo agregar un zoom de aumento para imágenes en WordPress.

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..