Resumen: Cómo añadir un deslizador de antes y después en WordPress (sin código)
Un deslizador de antes y después permite a los visitantes arrastrar un control para revelar una transformación, y puedes añadir uno a WordPress sin tocar código usando el bloque Before After Toggle de SeedProd.
- Instala SeedProd: Descarga el plugin, copia tu clave de licencia y actívala en WordPress.
- Crea tu diseño: Abre el Theme Builder o el Landing Page Builder y elige una plantilla para editar.
- Añade el bloque: Busca el bloque Before After Toggle en el panel de bloques de SeedProd y arrástralo a tu diseño.
- Activa tus cambios: Guarda y publica, luego activa el interruptor del tema de SeedProd para que tu diseño esté en vivo.
Has hecho el trabajo, tienes las fotos y quieres que los visitantes sientan la transformación. Pero dos imágenes puestas una al lado de la otra simplemente no tienen el impacto que esperabas, y la gente se desplaza sin detenerse.
Un deslizador de antes y después en WordPress cambia eso. Los visitantes arrastran un control a través de una sola imagen para revelar la transformación por sí mismos, y ese momento de interacción hace que el resultado se sienta real de una manera que las fotos estáticas nunca lo hacen.
Te mostraré exactamente cómo añadir uno a WordPress sin tocar una línea de código, usando el bloque Before After Toggle integrado de SeedProd.
¿Cómo funciona el efecto de foto de antes y después?
Un deslizador de fotos de antes y después apila dos imágenes y añade un control deslizante. Los visitantes deslizan para controlar cuánto de cada versión ven, lo que hace que la transformación se sienta participativa en lugar de pasiva.
Un dentista mostrando resultados de blanqueamiento, una peluquería mostrando la transformación de un corte de pelo o un contratista mostrando una renovación: el deslizador permite a los visitantes arrastrar para ver el cambio por sí mismos en lugar de confiar en una foto estática.
Es una forma sencilla de mostrar cambios directamente en tu sitio. A continuación, te mostraré cómo añadir este efecto en WordPress.
Cómo añadir controles deslizantes de fotos de antes y después en WordPress
La mayoría de los sitios de WordPress necesitan un plugin para añadir este efecto. El tutorial a continuación te muestra cómo hacerlo con SeedProd.
SeedProd es un constructor de sitios web de arrastrar y soltar que te permite crear páginas, temas y páginas de destino de WordPress sin código. Incluye un bloque nativo Before After Toggle, lo que significa que no necesitas un plugin de deslizador separado. SeedProd maneja todo en un solo lugar.
También puedes usar SeedProd para crear una página de "próximamente" y poner WordPress en modo de mantenimiento. Todo lo que creas es 100% adaptable a móviles, asegurando que tu sitio sea fácil de usar en dispositivos móviles.
Haz clic en el botón de abajo para descargar el plugin SeedProd, luego sigue los pasos para incrustar un control deslizante de fotos de antes y después en tu sitio web.
Paso 1. Instalar y Activar SeedProd
Después de descargar el plugin, busca la pestaña Descargas en tu cuenta de SeedProd y copia tu clave de licencia.
Ahora, sube el plugin a tu sitio de WordPress. Si necesitas ayuda, puedes seguir esta guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez instalado SeedProd, navega a SeedProd » Ajustes desde tu administrador de WordPress y pega la clave de licencia que copiaste anteriormente.
Haz clic en el botón Verificar clave para activar tu licencia, y luego pasa al paso 2.
Paso 2. Crea tu diseño de WordPress
SeedProd te ofrece dos opciones para colocar tu deslizador: el Theme Builder, que reemplaza todo tu tema de WordPress con un diseño personalizado, o el Landing Page Builder, que crea páginas independientes junto a tu tema existente.
Esta guía utiliza el Theme Builder para crear un tema de WordPress personalizado y editar la plantilla de la página de inicio, pero los pasos para añadir el bloque deslizante son los mismos en cualquier caso.
Una vez que hayas creado un nuevo diseño, pasa al paso 3 y añade el deslizador a tu diseño.
Paso 3. Añade el bloque de WordPress de antes y después
Después de crear tu diseño, abre la página que deseas editar con el constructor de páginas de SeedProd.
Dado que estamos editando la página de inicio de nuestro tema de WordPress, iremos a SeedProd » Theme Builder y haremos clic en Editar diseño debajo de la plantilla Homepage.
En la siguiente pantalla, verás un diseño similar al de abajo:
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.
Por ejemplo, puedes editar encabezados haciendo clic en ellos y escribiendo tu nuevo contenido directamente en la vista previa en vivo.
O bien, puedes editar el texto en el panel de configuración en el lado izquierdo, que incluye innumerables opciones de personalización.
Personaliza tu plantilla hasta que empiece a tener el aspecto que deseas.
Ahora veamos cómo añadir funcionalidades que tu plantilla podría no incluir automáticamente. Por ejemplo, el Kit de sitio web que elegimos no tiene un deslizador de fotos de antes y después, así que tendremos que añadirlo nosotros mismos.
Para hacerlo, desplázate por los bloques de WordPress de la izquierda hasta que encuentres el Toggle Antes y Después. Luego arrástralo a su posición en tu vista previa en vivo.
Cuando hagas clic en el bloque, abrirás sus opciones de personalización en el panel de configuración izquierdo. Aquí es donde puedes añadir tus imágenes de antes y después, cambiar el estilo y más.
Empecemos agregando la primera imagen, que normalmente será tu foto del "antes". Puedes hacerlo haciendo clic en la opción Usar tu propia imagen y subiendo una foto nueva o eligiendo una de tu biblioteca de medios de WordPress.
Ahora repite este paso para la imagen del "después". Puedes editar las etiquetas de cada imagen reemplazando los nombres en los campos de texto.
Con tus imágenes en su lugar, veamos algunas configuraciones más.
En el encabezado Orientación, puedes hacer que el control deslizante de antes y después sea vertical en lugar de horizontal.
También puedes hacer que el control deslizante se mueva cuando pases el cursor sobre la imagen y aplicar una superposición de color a las fotos.
Cuando abras el encabezado Control deslizante de comparación, verás configuraciones para cambiar el color del control deslizante, el ancho, el tamaño de píxel del radio y más.
Puedes encontrar aún más configuraciones haciendo clic en la pestaña Avanzado. Por ejemplo, puedes cambiar la tipografía y el color de la etiqueta, ajustar el espaciado y los atributos del bloque, y ocultar ciertos elementos en pantallas móviles.
Cuando estés satisfecho con el aspecto del control deslizante de fotos de antes y después, haz clic en el botón Guardar en la esquina superior derecha de tu pantalla y haz clic en Publicar.
Si estás creando una página de destino, ahora puedes previsualizar tu página y ver tu control deslizante de imágenes de antes y después en acción. Pero si estás creando un tema personalizado de WordPress, necesitarás completar el paso 4.
Paso 4. Habilita tus cambios
Aunque tus cambios se guarden y publiquen, todavía necesitas activar tu tema de WordPress. No te preocupes, este paso es rápido.
Ve a SeedProd » Theme Builder desde tu panel de WordPress y activa el interruptor Habilitar tema de SeedProd a la posición "Sí". ¡Eso es todo!
Ahora puedes ir a la parte frontal de tu sitio web y probar tu nuevo deslizador de antes y después de WordPress.
Preguntas frecuentes sobre el control deslizante de fotos de antes y después
¿Puedo añadir varios deslizadores de antes y después en una página en WordPress?
Sí. El bloque de alternancia de antes y después de SeedProd se puede añadir en cualquier lugar de tu diseño, por lo que puedes colocar varios deslizadores en una sola página. Cada bloque es independiente y contiene sus propias imágenes y configuraciones.
No hay límite en la cantidad que puedes usar, aunque más deslizadores en una página pueden ralentizar los tiempos de carga si las imágenes no están optimizadas.
¿El deslizador de antes y después funciona en dispositivos móviles?
Sí. El bloque de alternancia de antes y después de SeedProd es totalmente adaptable, por lo que el deslizador funciona tanto en pantallas táctiles como en ordenadores de escritorio. Los visitantes deslizan en lugar de arrastrar en el móvil, y la experiencia se traslada de forma natural.
Para obtener mejores resultados, utiliza imágenes de al menos 800 píxeles de ancho y mantén el deslizador en un diseño de una sola columna en el móvil. Puedes usar la pestaña Avanzado de SeedProd para ajustar la visibilidad y el espaciado para diferentes tamaños de pantalla.
¿Cómo cambio el deslizador de horizontal a vertical en WordPress?
En la configuración del bloque de alternancia de antes y después de SeedProd, busca la opción Orientación. Al hacer clic en ella, se cambia la dirección de arrastre de izquierda a derecha (horizontal) a arriba y abajo (vertical).
La orientación vertical funciona bien para comparaciones donde el cambio es más notable a lo largo de un eje vertical, como cortes de pelo o renovaciones basadas en la altura.
¿Qué tamaño de imagen debo usar para un deslizador de antes y después?
Ambas imágenes deben tener las mismas dimensiones. Si tienen tamaños diferentes, el deslizador puede mostrarse de forma inconsistente. Un ancho de 800-1200 píxeles funciona bien para la mayoría de los diseños.
Mantén los tamaños de archivo por debajo de 150 KB cada uno guardando los JPEG con una calidad del 70-80 %. Las dimensiones de imagen desiguales son la causa más común de un deslizador torcido o inestable.
¿Puedo añadir un deslizador de antes y después a WordPress sin un plugin?
Técnicamente sí, pero requiere JavaScript y CSS personalizados que la mayoría de los propietarios de sitios de WordPress no pueden escribir ellos mismos. También necesitarías mantener ese código a través de cada actualización de WordPress.
Un plugin como SeedProd se encarga del lado técnico por ti, y la interfaz de arrastrar y soltar significa que no se necesita código en ningún momento del proceso.
Has añadido un deslizador de antes y después de WordPress que muestra tu trabajo de la manera más convincente posible. Los visitantes descubren la transformación por sí mismos en lugar de solo ver imágenes estáticas, que es exactamente el objetivo.
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
