Cómo mostrar fotos de antes y después en WordPress (con efecto de deslizamiento)

¿Quieres mostrar una transformación dramática en tu sitio web? Las fotos estáticas de lado a lado a menudo pierden el factor ‘wow’ porque los visitantes no pueden interactuar con ellas.

Hemos descubierto que un control deslizante interactivo de antes y después es la mejor manera de resaltar el impacto de un producto o servicio. Involucra a los usuarios al instante y deja que los resultados hablen por sí mismos.

En este artículo, compartiremos dos métodos probados para agregar un control deslizante de fotos de antes y después en WordPress. Cubriremos un plugin gratuito y fácil de usar y un potente constructor personalizado que usamos en nuestras propias marcas.

Cuándo usar un deslizador de fotos de antes y después en WordPress

Una imagen de antes y después es una imagen interactiva que típicamente muestra algún tipo de cambio.

Los visitantes pueden usar un deslizador para cambiar entre las diferentes 'versiones' de la imagen de una manera atractiva e interactiva.

Si administras una tienda en línea usando un plugin como WooCommerce, entonces una foto de antes y después puede mostrar el efecto de tus productos o servicios.

Simplemente necesitas mostrar una foto de ‘antes’ con la que el cliente pueda identificarse y una foto de ‘después’ deseable. Esto hará que los compradores quieran comprar el producto que los lleva del estado de ‘antes’ al estado de ‘después’.

Si eres un afiliado de marketing, mostrar fotos persuasivas de antes y después en tu sitio web es una excelente manera de promocionar tus enlaces de afiliado y obtener más ventas.

Arrastrar un control deslizante para revelar la foto de 'después' también es una forma fácil de obtener más interacción, lo que puede mantener a los visitantes en tu sitio por más tiempo. Esto también puede ayudar a aumentar tus visitas a la página y reducir la tasa de rebote en WordPress.

Ahora, veamos cómo puedes crear una foto de antes y después en WordPress usando un efecto de deslizamiento. Simplemente usa los enlaces rápidos a continuación para saltar directamente al método que deseas usar:

Método 1: Mostrar una foto de antes y después usando un plugin gratuito (Fácil)

La forma más fácil de crear fotos de antes y después es usando el plugin Ultimate Before After Image Slider & Gallery – BEAF.

El plugin BEAF te permite crear sliders horizontales y verticales y personalizar la imagen con diferentes etiquetas y colores.

Consejo importante: Para que el efecto de deslizamiento funcione perfectamente, tus imágenes de ‘antes’ y ‘después’ deben tener las mismas dimensiones exactas (mismo ancho y alto en píxeles). Esto asegura que se alineen correctamente. Puedes usar cualquier herramienta de edición de fotos para recortar o redimensionar tus imágenes antes de subirlas.

Lo primero que necesitas hacer es instalar y activar el plugin Ultimate Before After Image Slider & Gallery (BEAF). Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Al activarlo, ve a Before and After Slider » Add New en tu panel.

Para empezar, escribe un nombre para el deslizador de imágenes. Esto es solo para tu referencia, así que puedes usar cualquier cosa que te ayude a identificarlo.

A continuación, puedes agregar la imagen de ‘antes’ desplazándote hasta la sección ‘Imagen de antes’.

Aquí, haz clic en 'Subir' y luego elige una imagen de la biblioteca de medios de WordPress o sube una nueva imagen desde tu computadora.

Para ayudar a los motores de búsqueda a entender esta imagen y mostrarla a las personas adecuadas, es una buena idea agregar un texto alternativo para la imagen. Simplemente escribe tu texto en el campo 'Texto alternativo de la imagen' para este control deslizante específico.

Para más información sobre el texto alternativo, por favor consulta nuestra guía para principiantes de SEO de imágenes.

Una vez hecho esto, desplázate hasta la sección 'Después de la imagen'.

Ahora puedes agregar la imagen de 'después' siguiendo el mismo proceso descrito anteriormente. ¡No olvides agregar también un texto alternativo a esta imagen, ya que es importante para el SEO de WordPress!

También puedes mostrar texto debajo de la imagen agregando un título y una descripción (como un título).

Por ejemplo, podrías animar a los visitantes a interactuar con el slider. Esta es una excelente manera de guiar a los visitantes que quizás no estén familiarizados con el funcionamiento de los sliders interactivos.

Esta es también una forma fácil de añadir contexto a la imagen.

Para añadir texto, simplemente escribe en los campos 'Título del slider' o 'Descripción del slider'.

También puedes agregar una URL de 'Leer más', que puede enlazar a cualquier publicación o página de tu sitio web de WordPress o incluso a un sitio web externo. Por ejemplo, podrías enviar a los visitantes a una página donde puedan comprar el producto presentado en la imagen del control deslizante.

Este enlace aparecerá debajo de la imagen antes/después y también debajo de cualquier título o descripción del slider que estés utilizando.

Si estás enlazando a otro sitio web, te recomendamos elegir 'Nueva pestaña' para no enviar a los visitantes fuera de tu blog de WordPress.

Hecho esto, puedes elegir si quieres crear un deslizador vertical u horizontal haciendo clic en una de las miniaturas en la sección 'Estilo de orientación'.

Después de eso, desplázate hasta la parte superior de la pantalla y haz clic en 'Opciones'.

Aquí, verás que el ‘Desplazamiento predeterminado’ está configurado en 0.5 (que es 50%). Esto significa que el visitante ve la mitad de la imagen ‘antes’ y la mitad de la imagen ‘después’ cuando la página se carga por primera vez.

Si quieres mostrar más de la imagen anterior, escribe un número mayor, como 0.6, 0.7 o superior.

Si quieres mostrar la imagen anterior completa, escribe 1.

Esto colocará el deslizador en la parte superior o derecha de la imagen anterior, como puedes ver en la siguiente imagen.

Por defecto, el plugin muestra las etiquetas 'Antes' y 'Después' cuando el visitante pasa el ratón sobre la imagen.

Es posible que quieras reemplazar estas etiquetas con algo más descriptivo.

Para hacer esto, simplemente ve y escribe en los campos 'Etiqueta antes' y 'Etiqueta después'.

Por defecto, los visitantes moverán el deslizador arrastrando y soltando. Algunas personas pueden encontrar esto difícil, especialmente si tienen problemas de movilidad o están usando dispositivos más pequeños como teléfonos inteligentes o tabletas.

Dicho esto, es posible que quieras cambiar la forma en que los visitantes mueven el deslizador.

Si activas el botón 'Activado' junto a 'Mover deslizador al pasar el ratón?', entonces los visitantes podrán mover el deslizador simplemente pasando el ratón sobre la imagen.

Si activas el botón 'Clic para mover', entonces los visitantes podrán hacer clic en cualquier parte de la imagen para mover el deslizador a ese punto.

Si bien estas opciones pueden mejorar la accesibilidad, cambian el comportamiento estándar del control deslizante. Sugerimos probarlas tanto en escritorio como en móvil para ver qué resulta más intuitivo para los visitantes de tu sitio web. Ten en cuenta que los efectos de ‘pasar el ratón por encima’ generalmente no funcionan en pantallas táctiles.

A continuación, haz clic en la pestaña 'Estilo'.

Aquí, puedes cambiar los colores utilizados para las diferentes etiquetas, fondos, encabezados, descripciones y el botón de 'leer más'. Esto puede ayudar a que la imagen de antes/después se integre con tu tema de WordPress o incluso que destaque del resto del diseño de tu sitio web.

También puedes cambiar el tamaño de la fuente y la alineación del texto.

Cuando estés satisfecho con la configuración del deslizador, haz clic en el botón 'Publicar'.

Esto crea un código corto que te permite agregar la imagen y el control deslizante de antes/después a cualquier página, publicación o área lista para widgets.

Para más información sobre cómo colocar el shortcode, por favor consulta nuestra guía sobre cómo agregar un shortcode en WordPress.

Después de agregar el shortcode a tu sitio, simplemente haz clic en el botón ‘Publicar’ o ‘Actualizar’ para que la imagen de antes/después y el efecto deslizante estén en vivo.

Método 2: Mostrar una foto de antes y después usando SeedProd (Más personalizable)

Si solo quieres a tilde;adir un control deslizante simple a una publicaci ilde;n existente, el plugin gratuito del m ilde;todo 1 es una excelente opci ilde;n. Sin embargo, si buscas crear una p ilde;gina de destino de alta conversi ilde;n, una p ilde;gina de ventas o incluso un tema personalizado que presente una comparaci ilde;n de antes y despu ilde;s, te recomendamos usar SeedProd. Es un potente constructor de sitios web que te da control total del dise tilde;o.

Aquí en WPBeginner, usamos SeedProd extensivamente para diseñar sitios web personalizados para muchas de nuestras marcas asociadas dentro de la familia Awesome Motive. Su interfaz de arrastrar y soltar nos da la flexibilidad para crear páginas de alta conversión rápidamente.

SeedProd es el mejor constructor de p ilde;ginas de WordPress de arrastrar y soltar. Viene con m ilde;s de 300 plantillas listas para usar que puedes emplear para crear p ilde;ginas de destino de alta conversi ilde;n, dise tilde;os de ventas, temas personalizados de WordPress y m ilde;s.

También tiene un bloque listo para usar de ‘Alternar Antes y Después’ que puedes usar para crear hermosas imágenes de antes y después con las que tus usuarios pueden interactuar.

Simplemente arrastra el bloque desde el men ilde; de la izquierda y su ilde;ltalo en cualquier dise tilde;o de p ilde;gina en el que est ilde;s trabajando, incluidas las p ilde;ginas de ventas.

Si est ilde;s usando WooCommerce para vender tus productos, SeedProd se integra con WooCommerce e incluso viene con bloques especiales de comercio electr ilde;nico. Esto es perfecto si planeas usar im ilde;genes de antes y despu ilde;s para promocionar tus productos de WooCommerce.

Para obtener informaci ilde;n sobre c ilde;mo usar SeedProd, consulta nuestra gu ilde;a sobre c ilde;mo crear una p ilde;gina personalizada en WordPress.

Después de crear una página, es fácil agregar una imagen de antes y después a tu diseño. En el editor de páginas de SeedProd, simplemente busca el bloque 'Alternancia Antes Después'.

Luego puedes arrastrar y soltar este bloque en cualquier lugar de tu diseño para agregarlo al diseño de la página.

Hecho esto, simplemente haz clic para seleccionar el bloque 'Alternancia Antes Después'. El menú de la izquierda se actualizará para mostrar todas las configuraciones que puedes usar para crear tu imagen de antes y después.

Para empezar, necesitar ilde;s a tilde;adir la imagen que deseas usar como imagen de antes. En 'Imagen de antes', puedes hacer clic en 'Usar tu propia imagen' para subir una foto, o en 'Usar una Imagen de stock' para buscar entre miles de fotos de stock gratuitas incluidas directamente en el plugin.

Por defecto, SeedProd muestra la etiqueta 'Antes' encima de esta imagen. Sin embargo, puedes cambiarla a algo más descriptivo escribiéndola en el campo 'Etiqueta anterior'.

Una vez hecho esto, desplázate hasta la sección 'Después de la imagen'.

Ahora puedes agregar una imagen y personalizar la etiqueta predeterminada 'Después' siguiendo el mismo proceso descrito anteriormente.

SeedProd puede agregar un efecto de deslizamiento vertical u horizontal.

Para cambiar entre estos dos estilos, desplázate hasta la sección 'Orientación del deslizador' y luego haz clic en 'Vertical' u 'Horizontal'.

Por defecto, los visitantes se moverán entre las imágenes anterior y posterior arrastrando el deslizador.

Sin embargo, a algunos usuarios les puede resultar m ilde;s f ilde;cil mover el control deslizante al pasar el rat ilde;n sobre la imagen. Esto es particularmente cierto para im ilde;genes m ilde;s grandes donde el visitante necesitar ilde;a arrastrar el control deslizante una mayor distancia.

Para probar esta configuración, activa ‘Mover al pasar el cursor’ en el menú de la izquierda.

A continuaci ilde;n, es posible que desees a tilde;adir una superposici ilde;n de color tanto a las im ilde;genes de antes como a las de despu ilde;s. Esto puede ayudar a que la imagen se mezcle con el resto del esquema de colores o destaque del fondo.

Incluso puedes hacer que la superposición de color sea semitransparente para crear un efecto más sutil.

Para probar diferentes colores, haz clic en la sección ‘Color de superposición’ y luego realiza tus cambios en la ventana emergente que aparece.

Hecho esto, puedes personalizar el control deslizante haciendo clic para expandir la sección ‘Control de comparación’.

Por defecto, SeedProd muestra la mitad de la imagen ‘anterior’ y la mitad de la imagen ‘posterior’. Para cambiar esto, simplemente arrastra el control deslizante ‘Desplazamiento inicial del control’.

Para mostrar menos de la imagen anterior, arrastra el control deslizante hacia la izquierda para que muestre un número menor. Para mostrar más de la imagen anterior, arrastra el control deslizante hacia la derecha, lo que aumenta el número.

A continuación, puedes cambiar el color del control deslizante usando la configuración ‘Color del control’.

También puedes hacer que el control sea más grueso o más delgado usando el control deslizante ‘Grosor del control’.

De esta manera, puedes hacer que el control resalte o crear un efecto más sutil.

Cuando estés satisfecho con el control, es posible que desees cambiar el círculo. Puedes hacer que el círculo sea más grande o más pequeño usando la configuración ‘Ancho del círculo’ y cambiar el ‘Radio del círculo’ para crear esquinas afiladas o curvas.

A medida que realices cambios, la vista previa en vivo se actualizará automáticamente, para que puedas probar diferentes configuraciones y ver qué se ve mejor.

Cuando estés satisfecho con el círculo, es posible que desees cambiar el tamaño de los triángulos dentro de ese círculo. Por ejemplo, si has hecho el círculo más grande, entonces podrías querer aumentar el tamaño de los triángulos también.

Para hacer este cambio, arrastra el control deslizante 'Tamaño del triángulo' hasta que estés satisfecho con cómo se ve.

Hecho esto, puedes continuar agregando nuevos bloques y personalizando el contenido de tu página de SeedProd.

Cuando estés satisfecho con cómo se ve la página, simplemente haz clic en la flecha junto al botón 'Guardar' y luego selecciona 'Publicar'.

Ahora, si visitas tu sitio web, verás el diseño de tu página con las imágenes de antes y después en vivo.

Preguntas frecuentes sobre controles deslizantes de antes y después

Hemos respondido algunas de las preguntas más comunes que nuestros lectores tienen sobre la creación de controles deslizantes de fotos de antes y después en WordPress.

¿Los complementos para fotos de antes y después son gratuitos?

El plugin Ultimate Before After Image Slider & Gallery presentado en el M ilde;todo 1 es completamente gratuito. SeedProd tambi ilde;n tiene una versi ilde;n gratuita disponible, pero necesitar ilde;s uno de sus planes premium para acceder al bloque 'Before After Toggle'.

¿Qué método es mejor para crear un control deslizante de antes y después?

El mejor método depende de tus necesidades. Para agregar rápidamente un control deslizante simple a una publicación de blog, el complemento gratuito es una excelente opción. Si deseas un mayor control de diseño o estás creando una página de destino personalizada, recomendamos SeedProd por su flexibilidad.

¿Puedo crear un control deslizante con más de dos imágenes?

Las herramientas de esta gu ilde;a est ilde;n dise tilde;adas espec ilde;ficamente para comparar dos im ilde;genes. Si necesitas mostrar m ilde;ltiples im ilde;genes en secuencia, querr ilde;s usar un plugin de control deslizante de WordPress dedicado como Soliloquy.

¿Un control deslizante de antes y después ralentizará mi sitio web?

Como cualquier imagen, los archivos grandes pueden afectar la velocidad de carga de tu sitio. Para evitar esto, siempre recomendamos optimizar tus im ilde;genes para la web antes de subirlas a WordPress.

Más consejos y trucos sobre imágenes en WordPress

¿Quieres más consejos y trucos para personalizar tus imágenes en WordPress? Consulta estas guías:

• Cómo agregar filtros de fotos al estilo de Instagram en WordPress (paso a paso)
• Cómo crear superposiciones y efectos de desplazamiento (hover) de flipbox en WordPress
• Cómo agregar marcas de agua automáticamente a las imágenes en WordPress
• Cómo usar IA para generar imágenes en WordPress
• Cómo agregar GIFs animados en WordPress (la forma correcta)
• Cómo Crear Fácilmente un Slider Responsivo en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo agregar una foto de antes y después a tu sitio web de WordPress con un efecto de deslizamiento. También puedes consultar nuestra guía sobre cómo agregar categorías y etiquetas a la biblioteca de medios de WordPress y nuestras selecciones expertas de los mejores plugins de imágenes destacadas de WordPress.

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.