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.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (4 votos, promedio: 5,00 de 5)
Cargando…

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. Autor del libro WordPress - La tela de la araña. 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.

Comparte esta entrada en
468 ad

Pin It on Pinterest

Share This