Cómo mostrar imágenes del antes y el después con efecto deslizante

Un efecto muy chulo para muchos tipos de webs es la típica imagen del antes y después que puedes deslizar para desvelar, pues eso, el antes y después de un proceso.

Es útil para clínicas estéticas, restauradores, estudios de arquitectura, fontaneros, casi lo que se te ocurra.

La idea es ofrecer al visitante una imagen doble que, al deslizar a un lado y otro, vea el antes y el después de algo. Siempre que quieras mostrar la diferencia entre dos imágenes será un modo chulísimo de conseguirlo.

Y en WordPress hay un plugin que lo hace de lujo.

Bueno, en realidad hay varios pero de todos los que he probado, el que mejor funciona y, sobre todo, el más fácil de utilizar para cualquier usuario es Twenty20.

Una vez lo instales verás en el editor un nuevo botón llamado Add Twenty20:

Al pulsarlo se abrirá el cargador de imágenes del editor, y solo tienes que elegir 2 y luego pulsar el botón «Insert«

Nada más hacerlo se mostrará la ventana en la que configurar cómo se mostrará la comparación de las dos imágenes:

Aunque en la captura anterior he puesto textos que lo muestran te explico qué puedes configurar:

  • Before Text: Texto que se mostrará como leyenda de la imagen del antes.
  • After Text: Texto que se mostrará como leyenda de la imagen del después.
  • Width: Ancho, en porcentaje, que ocupará el deslizador de comparación de las imágenes. Por defecto ocupa el 100% del ancho del contenido de tu entrada/página.
  • Offset: Aquí puedes elegir, de 0.1 a 1.0 dónde quieres que se vea el deslizador. Si pones 0.1 prácticamente solo se verá el antes, teniendo que deslizar completamente para ver la imagen del después. Si lo pones en 0.5 el deslizador estará a la mitad de ambas imágenes, y si lo pones en 1.0 se verá completa la imagen del después. Es cuestión de gustos o del efecto que quieras conseguir, juega con ello.
  • Direction: Si quieres que la comparación de las dos imágenes sea en horizontal o vertical.
  • Alignment: La alineación, con respecto al contenido, del bloque de las dos imágenes. Puedes elegir entre ninguna, izquierda o derecha.
  • Move slider on mouse hover?: Por defecto el deslizador funcionará al hacer clic en la marca del mismo y arrastrar a un lado u otro, pero si activas esta característica también seguirá automáticamente el movimiento del cursor, sin tener que hacer clic. Es un efecto estético, prueba.

Al final, lo que te ofrece el plugin es un shortcode, con los ajustes antes definidos, que determinarán cómo se verá tu deslizador de imágenes del antes y el después. Algo así…

Y el efecto conseguido será algo parecido a esta captura…

También puedes ver todo el proceso en este vídeo de los autores del plugin:

El usuario podrá mover la marca de deslizamiento para ver el antes y el después de una foto, una obra, un diseño, lo que quieras comparar.

Y no solo hace esto, pues también dispone de un widget en el que elegir qué deslizador mostrar, e incluso un widget para maquetadores tan populares como Visual ComposerUX Builder o Elementor.

Un efecto realmente interesante para muchos tipos de webs y negocios, que ya sabes cómo hacer fácilmente con WordPress.

Cómo se mostrará es solo cuestión de probar los distintos parámetros del shortcode, hasta dar con el efecto perfecto para tu comparativa de fotos del antes y el después.

¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!
VALORA ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
FlojitoNo está malEstá bienMe ha servidoFantástico (4 votos, promedio: 5,00 de 5)
Cargando…

Al dejar una valoración se recopila la IP para evitar fraudes

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Ir al contenido