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

Intentar mostrar una transformación dramática con imágenes estáticas, una al lado de la otra, puede resultar un poco plano. Has hecho un trabajo increíble, pero el factor sorpresa se pierde cuando los visitantes no pueden interactuar con el cambio por sí mismos.

Hemos descubierto que una de las mejores maneras de resaltar el impacto de un producto o servicio es con un deslizador interactivo de antes y después. Es una herramienta poderosa que hemos utilizado en nuestros propios proyectos para dejar que los resultados hablen por sí mismos.

En este artículo, compartiremos nuestros dos métodos probados para agregar un deslizador de fotos de antes y después a tu sitio de WordPress. Tenemos una opción fácil para principiantes y una más personalizable para aquellos que desean más control.

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 tienes 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 la cosa 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 conseguir más ventas.

Arrastrar un control deslizante para revelar la foto del '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.

Dicho esto, 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)
• Método 2: Mostrar una foto de antes y después usando SeedProd (Más personalizable)
• Frequently Asked Questions About Before and After Sliders

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 slider funcione perfectamente, tus imágenes de 'antes' y 'después' deben ser del mismo tamaño exacto (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.

Hecho esto, puedes agregar la imagen de ‘antes’ desplazándote a la sección ‘Before Image’.

Aquí, haz clic en ‘Upload’ y luego elige una imagen de la biblioteca de medios de WordPress o carga una nueva imagen desde tu computadora.

Para ayudar a los motores de búsqueda a entender esta imagen y mostrársela a las personas adecuadas, es una buena idea añadir un texto alternativo de la imagen. Para hacerlo, simplemente escribe en el campo 'Texto alternativo de la imagen'.

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

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

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

También puedes mostrar texto debajo de la imagen añadiendo 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 añadir 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 que aparece en la imagen del slider.

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 enlazas 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. Esto significa que el visitante ve la mitad de la imagen 'antes' 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, sí cambian el comportamiento estándar del deslizador. Sugerimos probarlas para ver qué resulta más intuitivo para los visitantes de tu sitio web.

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 destaque del resto del diseño de tu sitio web.

También puedes cambiar el tamaño de 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 de antes/después y el deslizador a cualquier página, publicación o área lista para widgets.

Para obtener más información sobre cómo colocar el shortcode, 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 agregar un deslizador simple a una publicación existente, el método gratuito del plugin en el método 1 es una excelente opción. Sin embargo, si buscas crear una página de destino de alta conversión, una página de ventas o incluso un tema personalizado que presente una comparación antes y después, te recomendamos usar SeedProd. Es un potente constructor de sitios web que te brinda control total sobre el diseñ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áginas de WordPress de arrastrar y soltar. Viene con más de 300 plantillas listas para usar que puedes emplear para crear páginas de destino de alta conversión, diseños de ventas, temas personalizados de WordPress y má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ú de la izquierda y luego suéltalo en cualquier diseño de página en el que estés trabajando, incluidas las páginas de ventas.

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

Para obtener información sobre cómo usar SeedProd, consulta nuestra guía sobre cómo crear una pá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ás agregar la imagen que deseas usar como imagen anterior. Debajo de 'Imagen anterior', haz clic en 'Usar tu propia imagen' o 'Usar una imagen de stock' y elige la imagen que deseas usar.

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 resultará más fácil mover el control deslizante colocando el cursor del ratón sobre la imagen. Esto es particularmente cierto para imágenes más grandes donde el visitante necesitarí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ón, es posible que desees agregar una superposición de color tanto a la imagen anterior como a la posterior. Esto puede ayudar a que la imagen se mezcle con el resto del esquema de color o resalte 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 complemento Ultimate Before After Image Slider & Gallery presentado en el Método 1 es completamente gratuito. SeedProd también tiene una versión gratuita disponible, pero necesitarás uno de sus planes premium para acceder al bloque 'Alternador de antes y después'.

¿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 en esta guía están diseñadas específicamente para comparar dos imágenes. Si necesitas mostrar varias imágenes en una secuencia, querrás usar un complemento de control deslizante de WordPress dedicado como Soliloquy.

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

Al igual que cualquier imagen, los archivos grandes pueden afectar la velocidad de carga de tu sitio. Para evitarlo, siempre recomendamos optimizar tus imá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 para WordPress.

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