Mostrar foto antes y después en WordPress

En este artículo os enseñamos cómo mostrar fácilmente antes y después de la foto en WordPress.

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

Ok, tengo dos imágenes similares en tamaño y quiero que se muestre en el blog de una forma diferente a la habitual, no sólo mostrar una  al lado de otra.

Un deslizador 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.

Diferentes PlugIns disponibles.

haciendo una búsqueda rápida entre los diferentes Plugins que hay en Wordpress, y buscando aquellos que sean gratuitos nos encontramos entre otros con:

Before  After Images for Divi

Si soléis trabajar con el editor de plantillas «Divi», este Plugin está adaptado para el.

Before + After Images for Divi

Before After Image Comparison Slider for Elementor

Este otro Plugin sirve para el editor de páginas «Elementor».

Before After Image Comparison Slider for Elementor

Before After Image Comparison Slider for WPBakery Page Builder

Y si sois de los que trabajáis con «WPBakery», también tenéis un Plugin específico.

Before After Image Comparison Slider for WPBakery Page Builder

Pero ¿que pasa con los que no usamos ningún editor de plantillas específico?. Si quieres usar un Plugin de este tipo sin tener que instalar el editor de plantillas también tenemos opciones como son:

Twenty20 Image Before-After

Este Plugin aunque lleva tiempo sin actualizarse, funciona en las últimas versiones de WordPress, nosotros lo utilizamos en algun que otro blog.

Twenty20 Image Before-After

BA Plus – Before & After Image Slider

Aquí tenemos otro más completo que es el que vamos a ver en esta entrada.

BA Plus – Before & After Image Slider FREE

Una  vez decidido que Plugin queremos usar procederemos a instalarlo de la forma habitual (no detallo este punto, ya que es muy simple) y lo activamos.

Si todo ha sido correcto, en el apartado «Entradas» de Wordpress y dentro de la entrada que estés escribiendo, verás un botón que pone «add new Slider».

Si pulsamos sobre el botón nos abrirá una nueva ventana donde podremos seleccionar las imágenes que queremos utilizar en el Slider o bien subirlas si no las tenemos aun añadidas en el apartado de medios.

Aunque tienen opciones que son de pago, aquellas que son gratuitas ya nos permiten llegar a nuestro objetivo sin mayor dificultad.
Podemos entre otras opciones, añadir más imágenes al Slider, cambiar el Slider en vertical u horizontal y etiquetar las fotos.

y por último copiaremos el código generado (o bien el codigo en PHP) para incorporarlo en la entrada del blog, quedando así de resultón:

Ahora
Ahora
Ahora
Antes
Antes

Os toca a vosotros decidir cúal se adapta mejor a vuestro blog y comenzar a generar efectos chulos con vuestras fotos de antes y después.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *