¿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, compartiremos 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 de antes y 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 de antes y después en WordPress.
Videotutorial
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 Imagen de Twenty20 antes y después enchufar. 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 su área de administración de WordPress donde desea mostrar la imagen de antes y después. Ahora, haga clic en el Añadir veinte20 botón encima del editor de texto.
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 el Insertar botón.
A continuación, 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 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 de Twenty20 para mostrar la foto de antes y después en su barra lateral de WordPress. Simplemente ve a Apariencia » Widgets en su administrador de WordPress, y luego arrastre el widget Twenty20 Slider en su área de widgets de la barra lateral.
El widget Twenty20 Slider tiene una configuración similar para la foto de antes y después que 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 de 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 mango hacia 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 de 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 populares creadores de páginas de WordPress como Beaver Builder y Elementor para mostrar rápidamente fotos de antes y después en las páginas de su sitio web sin usar códigos abreviados.
Esperamos que este artículo te haya ayudado a aprender cómo mostrar fotos de antes y después en WordPress. Es posible que también desee ver nuestra guía sobre cómo agregar zoom de aumento para imágenes en WordPress.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.