¿Quieres mostrar tus habilidades de edición fotográfica de forma interactiva y profesional? Un control deslizante de fotos del antes y el después permite a los visitantes arrastrar un asa para ver 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.
Lo mejor es que puedes añadir este efecto a WordPress con una solución sencilla, sin código, y te guiaré paso a paso.
Pasos rápidos para añadir un slider de fotos del antes y el después a WordPress:
- Paso 1. Instalar y activar SeedProd Instale y active SeedProd
- Paso 2. Cree su diseño de WordPress
- Paso 3 Añadir el bloque WordPress Antes y Después
- Paso 4. Habilite sus cambios
¿Cómo funciona el efecto fotográfico Antes y Después?
Un deslizador de fotos del antes y el después permite a los visitantes arrastrar un separador para mostrar una imagen sobre otra. En lugar de imágenes estáticas, los usuarios controlan la cantidad de cada versión que ven, lo que hace que la transformación sea más atractiva.
Por ejemplo:
- Los dentistas pueden destacar 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 de los productos.
Es una forma sencilla pero potente de mostrar los cambios directamente en tu sitio. A continuación, te mostraré cómo añadir este efecto en WordPress.
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.
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.
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.
Haga clic en el botón Verificar clave para activar su licencia y, a continuación, 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.
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.
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.
Ya que 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.
En la siguiente pantalla, verá un diseño similar al que se muestra a continuación:
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.
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.
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.
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.
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.
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.
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.
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.
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á.
Ahora puedes ir a la interfaz de tu sitio web y probar tu nuevo deslizador de imágenes.
Preguntas frecuentes sobre el deslizador fotográfico Antes y Después
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 unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenidos útiles para hacer crecer tu negocio.
