¿Quieres mostrar tus habilidades de edición de fotos de una manera interactiva y profesional? Un control deslizante de fotos de antes y después permite a los visitantes arrastrar un control para revelar la transformación por sí mismos, lo que hace que tu portafolio sea más atractivo que las imágenes estáticas una al lado de la otra.
La mejor parte es que puedes añadir este efecto a WordPress con una solución sencilla y sin código, y te guiaré paso a paso.
Pasos rápidos para añadir un control deslizante de fotos de antes y después a WordPress:
¿Cómo funciona el efecto de foto de antes y después?
Un control deslizante de fotos de antes y después permite a los visitantes arrastrar un divisor para revelar una imagen sobre otra. En lugar de tomas estáticas una al lado de la otra, los usuarios controlan cuánto de cada versión ven, haciendo la transformación más atractiva.
Por ejemplo:
- Los dentistas pueden resaltar los resultados antes y después del tratamiento.
- Las marcas de belleza pueden mostrar el impacto de un producto.
- Las tiendas de comercio electrónico pueden comparar las características del producto.
Es una forma sencilla pero potente 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
Normalmente, añadir widgets de control deslizante de fotos y presentaciones de diapositivas a tu sitio web implicará el uso de Javascript, Jquery, HTML, CSS y otros lenguajes de programación. Muchos propietarios de sitios web no sabrán cómo escribir ese código, por lo que recurren a desarrolladores web en busca de ayuda, lo que puede ser bastante costoso.
Afortunadamente, 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 gastar una fortuna.
El siguiente tutorial te muestra cómo añadir controles deslizantes de fotos de antes y después con SeedProd.
SeedProd es el mejor constructor de sitios web de WordPress con funcionalidad de arrastrar y soltar. Te permite usar plantillas pre-diseñadas y un constructor visual de páginas para crear diseños flexibles de WordPress sin código.
Con sus bloques de WordPress de arrastrar y soltar, puedes mejorar tu sitio web con funciones valiosas, incluyendo:
- Controles deslizantes de antes y después
- Galerías de imágenes avanzadas
- Tablas de precios
- Formularios de suscripción
- Botones de llamada a la acción
- Temporizadores de cuenta atrás
- Contenido con pestañas
- Sorteos
- Formularios de contacto
- Y mucho más.
También puedes usar SeedProd para crear una página de "próximamente" y poner WordPress en modo de mantenimiento. Además, todo lo que creas es 100% adaptable a dispositivos 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
Después de instalar SeedProd, deberás decidir qué tipo de diseño quieres crear. Puedes crear un tema de WordPress personalizado o construir páginas de destino de alta conversión con el editor de arrastrar y soltar de SeedProd.
La opción Theme Builder es una excelente manera de reemplazar el diseño de tu sitio web existente con un nuevo tema de WordPress adaptado a las necesidades de tu 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.
Sigue este tutorial para crear un tema de WordPress personalizado con SeedProd.
Alternativamente, puedes usar el Constructor de Páginas de Destino para crear páginas de destino independientes que funcionen perfectamente con tu 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.
Aquí tienes una guía sobre cómo crear una página de destino en WordPress usando SeedProd.
Una vez que hayas creado un nuevo diseño, puedes pasar al paso 3 y añadir un control deslizante de antes y después a tu diseño.
Nota: para esta guía, crearemos un tema de WordPress personalizado y editaremos la plantilla de la página de inicio.
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.
Personalizar cualquier elemento es súper fácil.
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.
Así que personaliza tu plantilla hasta que empiece a verse como deseas.
Ahora veamos cómo añadir características que tu plantilla puede no incluir automáticamente. Por ejemplo, el Kit de sitio web que elegimos no tiene un control deslizante 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 guardan y publican, todavía necesitas activar tu tema de WordPress. No te preocupes; este paso es rápido y fácil.
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 al front-end de tu sitio web y probar tu nuevo control deslizante de imágenes.
Preguntas frecuentes sobre el control deslizante de fotos de antes y después
Ahora sabes cómo agregar controles deslizantes de fotos de antes y después a tu sitio web de WordPress. Hay muchas maneras de hacer que esta función funcione para el éxito de tu negocio.
¿A qué esperas?
¡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.
