Últimas noticias de SeedProd

Tutoriales, consejos y recursos de WordPress para hacer crecer tu negocio

Cómo añadir antes y después Photo Slider a WordPress

Cómo añadir antes y después Photo Slider a WordPress (sin código) 

Escrito por: imagen de autor Stacey Corrin
imagen de autor Stacey Corrin
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.
     Revisado por: John Turner
imagen del revisor John Turner
John Turner es el cofundador de SeedProd. Cuenta con más de 20 años de experiencia empresarial y de desarrollo y sus plugins se han descargado más de 25 millones de veces.

¿Quieres añadir un slider de fotos del antes y el después a tu sitio web WordPress?

Un deslizador de comparación de imágenes puede ayudar a mostrar cómo funcionan sus productos o servicios antes y después de que los clientes los utilicen. De este modo, su marca adquiere más credibilidad y puede incitar a los clientes potenciales a realizar una compra.

En este artículo, le mostraremos cómo añadir fácilmente deslizadores de imágenes de antes y después a WordPress sin código.

¿Cómo funciona el efecto fotográfico Antes y Después?

El efecto de foto antes y después permite a los visitantes del sitio web hacer clic en un divisor interactivo que pasa de una imagen a otra.

Supongamos que tienes 2 versiones de la misma foto con ligeras diferencias: la foto A y la foto B. Un deslizador de antes y después las coloca una al lado de la otra o una encima de la otra con una línea divisoria central.

Cuando muevas el control deslizante en la dirección deseada, verás más de una imagen y menos de la otra.

Ejemplo de deslizador de fotos de antes y después

Es una forma fantástica de comparar imágenes. Por ejemplo, los sitios web de odontología pueden mostrar los dientes de un cliente antes y después de un tratamiento dental. También se pueden comparar los efectos del antes y el después de un determinado tratamiento de belleza.

Como alternativa, los sitios web de comercio electrónico pueden utilizar sliders de fotos del antes y el después para comparar las características de distintos productos.

La pregunta sigue siendo, ¿cómo añadir antes y después deslizadores de fotos a WordPress? Averigüémoslo.

Cómo añadir sliders de fotos de antes y después en WordPress

Normalmente, para añadir widgets y presentaciones de fotos a su sitio web es necesario utilizar Javascript, Jquery, HTML, CSS y otros lenguajes de codificación. Muchos propietarios de sitios web no saben cómo escribir ese código, por lo que recurren a desarrolladores web en busca de ayuda, lo que puede resultar bastante costoso.

Por suerte, hay formas más baratas de añadir nuevas funciones a tu sitio de WordPress. Con algunos de los mejores plugins de WordPress, puedes mejorar fácilmente tu sitio web sin gastarte una fortuna.

El siguiente tutorial le muestra cómo añadir antes y después de los controles deslizantes de fotos con SeedProd.

Creador de sitios web SeedProd WordPress

SeedProd es el mejor constructor de sitios web WordPress con funcionalidad de arrastrar y soltar. Te permite utilizar plantillas prediseñadas y un constructor de páginas visual para crear diseños de WordPress flexibles sin código.

Con sus bloques de WordPress de arrastrar y soltar, puede mejorar su sitio web con valiosas funciones, como:

  • Deslizadores antes y después
  • Galerías de imágenes avanzadas
  • Tablas de precios
  • Formularios Optin
  • Botones de llamada a la acción
  • Temporizadores de cuenta atrás
  • Contenido por pestañas
  • Regalos
  • Formularios de contacto
  • Y mucho más.

También puede utilizar SeedProd para crear una página próximamente disponible y poner WordPress en modo de mantenimiento. Además, todo lo que haces es 100% mobile responsive, lo que garantiza que tu sitio sea fácil de usar en todos los dispositivos móviles.

Haga clic en el botón de abajo para descargar el plugin SeedProd, a continuación, siga los pasos para incrustar un deslizador de fotos antes y después en su sitio web.

Paso 1. Instalar y activar SeedProd Instale y active SeedProd

Después de descargar el plugin, busque la pestaña Descargas en su cuenta SeedProd, y copie su clave de licencia.

Encuentre su clave de licencia SeedProd

Ahora, sigue adelante y sube el plugin a tu sitio WordPress. Si necesitas ayuda, puedes seguir esta guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez instalado SeedProd, vaya a SeedProd " Configuración desde el administrador de WordPress y pegue la clave de licencia que copió anteriormente.

introduzca su clave de licencia

Haga clic en el botón Verificar clave para activar la licencia y vaya al paso 2.

Paso 2. Cree su diseño de WordPress

Después de instalar SeedProd, tendrás que decidir qué tipo de diseño te gustaría crear. Puedes crear un tema personalizado de WordPress o construir páginas de destino de alta conversión con el editor drop-and-drop de SeedProd.

La opción Theme Builder es una excelente manera de reemplazar el diseño existente de su sitio web por un nuevo tema de WordPress adaptado a las necesidades de su negocio. Genera todos los archivos de plantilla de un tema típico de WordPress y te permite personalizar cada parte visualmente con su potente constructor de páginas.

Archivos de plantilla del creador de temas Seedprod

Siga este tutorial para crear un tema de WordPress personalizado con SeedProd.

Como alternativa, puede utilizar el Constructor de páginas de destino para crear páginas de destino independientes que funcionen perfectamente con su tema de WordPress actual. Utiliza el mismo editor visual que el constructor de temas y es una fantástica táctica de generación de leads para cualquier sitio web.

SeedProd, creador de páginas de aterrizaje de arrastrar y soltar

Aquí tienes una guía sobre cómo crear una página de aterrizaje en WordPress utilizando SeedProd.

Una vez que hayas creado un nuevo diseño, puedes ir al paso 3 y añadir un deslizador de antes y después a tu diseño.

Nota: para esta guía, crearemos un tema personalizado de WordPress y editaremos la plantilla de la página de inicio.

Paso 3 Añadir el Bloque WordPress Antes y Después

Después de crear su diseño, abra la página que desea editar con el constructor de páginas de SeedProd.

Como estamos editando la página de inicio de nuestro tema de WordPress, iremos a SeedProd " Theme Builder y haremos clic en Edit Design bajo la plantilla Homepage.

editar el diseño de la página de inicio

En la siguiente pantalla, verá un diseño similar al que se muestra a continuación:

Creador de páginas arrastrar-y-soltar SeedProd

A la derecha hay una vista previa en vivo de la plantilla que elegiste en el paso 2, y a la izquierda hay bloques y secciones que puedes arrastrar y soltar en tu diseño.

Personalizar cualquier elemento es superfácil.

Por ejemplo, puede editar los títulos haciendo clic en ellos y escribiendo el nuevo contenido directamente en la vista previa en directo.

Editar titulares con SeedProd builder

También puedes editar el texto en el panel de configuración de la izquierda, que incluye innumerables opciones de personalización.

Así que personaliza tu plantilla hasta que empiece a tener el aspecto que deseas.

Ahora vamos a ver cómo añadir características que su plantilla puede no incluir automáticamente. Por ejemplo, el Website Kit que elegimos no tiene un deslizador de fotos de antes y después, así que tendremos que añadirlo nosotros mismos.

Para ello, desplácese por los bloques de WordPress de la izquierda hasta que encuentre el alternador Antes/Después. A continuación, arrástrelo a su posición en la vista previa en vivo.

Añadir antes después de alternar bloque de WordPress

Al hacer clic en el bloque, se abrirán sus opciones de personalización en el panel de configuración de la izquierda. Aquí es donde puedes añadir tus imágenes del antes y el después, cambiar el estilo y mucho más.

Antes Después Alternar ajustes

Empecemos por añadir la primera imagen, que normalmente será la foto del "antes". Para ello, haz clic en la opción Utilizar tu propia imagen y sube una foto nueva o elige una de la biblioteca multimedia de WordPress.

Sube tu imagen de Antes

Ahora repita este paso para la imagen "después". Puede editar las etiquetas de cada imagen sustituyendo los nombres en los campos de texto.

Una vez colocadas las imágenes, veamos algunos ajustes más.

En el apartado Orientación, puede hacer que el control deslizante antes y después sea vertical en lugar de horizontal.

Antes Después Alternar ajustes de orientación

También puedes hacer que el deslizador se mueva al pasar el cursor por encima de la imagen y aplicar una superposición de colores a las fotos.

Cuando abras el encabezado Mango de comparación, verás ajustes para cambiar el color del deslizador, la anchura, el tamaño en píxeles del radio y mucho más.

Antes Después Alternar comparación Ajustes de la manilla

Puede encontrar aún más ajustes haciendo clic en la pestaña Avanzado. Por ejemplo, puedes cambiar la tipografía y el color de las etiquetas, ajustar el espaciado entre bloques y los atributos, y ocultar determinados elementos en pantallas móviles.

Avanzado Antes Después Alternar ajustes

Cuando estés satisfecho con el aspecto del deslizador de fotos del antes y el después, haz clic en el botón Guardar situado en la esquina superior derecha de la pantalla y haz clic en Publicar.

Guardar los cambios

Si estás creando una página de destino, ya puedes previsualizar tu página y ver tu deslizador de imágenes del antes y el después en acción. Pero si estás creando un tema de WordPress personalizado, tendrás que completar el paso 4.

Paso 4. Habilite sus cambios

Aunque los cambios se hayan guardado y publicado, aún debe activar el tema de WordPress. No te preocupes, este paso es rápido y sencillo.

Vaya a SeedProd " Theme Builder desde su panel de control de WordPress, y gire el interruptor Enable SeedProd Theme a la posición "Sí". Y ya está.

activar el tema seedprod

Ahora puedes ir a la interfaz de tu sitio web y probar tu nuevo deslizador de imágenes.

Ejemplo de deslizador de fotos de antes y después

Preguntas frecuentes sobre el deslizador fotográfico Antes y Después

¿Necesito conocimientos de programación para utilizar un plugin de slider de fotos de antes y después?

No, normalmente no necesitas conocimientos de programación para utilizar un plugin de slider de fotos de antes y después en WordPress. Estos plugins están diseñados para ser fáciles de usar y suelen ofrecer una interfaz visual para subir imágenes y personalizar el slider.

¿Los plugins de sliders de fotos de antes y después son adaptables a dispositivos móviles?

La mayoría de los plugins de sliders de fotos de antes y después están diseñados para adaptarse a dispositivos móviles. Esto significa que se ajustan automáticamente al tamaño de la pantalla del dispositivo en el que se está visualizando el sitio web.

¿Puedo utilizar varios controles deslizantes antes y después en la misma página?

Por lo general, puede utilizar varios controles deslizantes antes y después en la misma página. Sin embargo, el proceso exacto para hacer esto puede variar dependiendo del plugin específico que esté utilizando.

¡Ya está!

Ahora ya sabe cómo añadir sliders de fotos de antes y después a su sitio web WordPress. Hay muchas maneras de hacer que esta función funcione para el éxito de su negocio.

¿A qué esperas?

Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en dejarnos un comentario con tus preguntas y comentarios.

También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.

avatar de autor
Stacey Corrin Escritor
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.