¿Quieres mostrar fotos de antes y después en tu sitio web? Una foto de antes y después puede ser útil para ver 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 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 de 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.
Video tutorial
Si no desea ver el video tutorial, puede continuar leyendo la versión de texto a continuación:
Mostrar la foto del antes y el después en WordPress
Lo primero que debe hacer es instalar y activar el Imagen de antes y después de Twenty20 conectar. 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 donde desea mostrar la imagen del antes y el después. Ahora, haga clic en Agregar Twenty20 botón encima del editor de texto.
La biblioteca de medios de WordPress se abrirá en una ventana emergente. Desde aquí, debe seleccionar dos imágenes para el control deslizante de antes y después.
Una vez que haya seleccionado las imágenes, haga clic en Insertar botón.
Después de eso, mostrará campos de texto para agregar contenido encima de las fotos de antes y después. También puede agregar el ancho del control deslizante, el valor de compensación, la dirección del control deslizante y más.
A continuación, haga clic en Insertar 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 »Widget en su panel de administración 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 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 del antes y el después en acción.
A medida que los usuarios deslizan el asa hacia cada imagen, la otra imagen se hará visible. Los usuarios pueden mover 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 se desplazan, 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 fotos de antes y 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 fotos de antes y después en WordPress. Es posible que también desee ver nuestra guía sobre cómo agregar aumento de zoom para imágenes en WordPress.
Si te gustó este artículo, suscríbete al nuestro canal de Youtube para tutoriales en video de WordPress. También puedes encontrarnos en Gorjeo Y Facebook.
Cómo mostrar foto antes y después en WordPress (con efecto de diapositiva)
¿Quieres mostrar fotos de antes y después en tu sitio web? Una foto de antes y después puede ser útil para ver 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 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 de 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.
Video tutorial
Si no desea ver el video tutorial, puede continuar leyendo la versión de texto a continuación:
Mostrar la foto del antes y el después en WordPress
Lo primero que debe hacer es instalar y activar el Imagen de antes y después de Twenty20 conectar. 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 donde desea mostrar la imagen del antes y el después. Ahora, haga clic en Agregar Twenty20 botón encima del editor de texto.
La biblioteca de medios de WordPress se abrirá en una ventana emergente. Desde aquí, debe seleccionar dos imágenes para el control deslizante de antes y después.
Una vez que haya seleccionado las imágenes, haga clic en Insertar botón.
Después de eso, mostrará campos de texto para agregar contenido encima de las fotos de antes y después. También puede agregar el ancho del control deslizante, el valor de compensación, la dirección del control deslizante y más.
A continuación, haga clic en Insertar 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 »Widget en su panel de administración 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 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 del antes y el después en acción.
A medida que los usuarios deslizan el asa hacia cada imagen, la otra imagen se hará visible. Los usuarios pueden mover 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 se desplazan, 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 fotos de antes y 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 fotos de antes y después en WordPress. Es posible que también desee ver nuestra guía sobre cómo agregar aumento de zoom para imágenes en WordPress.
Si te gustó este artículo, suscríbete al nuestro canal de Youtube para tutoriales en video de WordPress. También puedes encontrarnos en Gorjeo Y Facebook.
