En este tutorial gratuito aprenderás a crear una presentación de diapositivas de fondo (background slideshow) con efectos de animación y transición en divi sin plugins.
Este efecto lo lograremos con una librería jQuery llamada Vegas.js. Esta librería cuenta con muchas opciones de configuración para poder personalizar nuestro fondo animado o slideshow.
Para integrar esta librería con divi necesitamos algunos fragmentos de código que te enlisto a continuación…
1. Enlazar la librería CSS y JS de Vegas.js con divi:
<link rel="stylesheet" href="https://jaysalvat.github.io/vegas/releases/latest/vegas.min.css"> <script src="https://jaysalvat.github.io/vegas/releases/latest/vegas.js"></script>
2. jQuery para inicializar Vegas.js:
<script>
jQuery(document).ready(function($){
$("#ovSlideshow").vegas({
overlay: true,
transition: 'fade',
transitionDuration: 4000,
delay: 10000,
animation: 'random',
animationDuration: 20000,
slides: [
{ src: "https://ununsplash.imgix.net/reserve/RONyPwknRQOO3ag4xf3R_Kinsey.jpg?fit=crop&fm=jpg&h=700&q=75&w=1600" },
{ src: "https://unsplash.imgix.net/photo-1414438992182-69e404046f80?fit=crop&fm=jpg&h=625&q=75&w=1600" },
{ src: "https://unsplash.imgix.net/photo-1414490929659-9a12b7e31907?fit=crop&fm=jpg&h=800&q=75&w=1600" },
{ src: "https://unsplash.imgix.net/uploads/14129863345840df499fc/0165574c?fit=crop&fm=jpg&h=600&q=75&w=1600" }
]
});
});
</script>
3. Por último si deseas cambiar el color de la barra de proceso (es opcional) pega el siguiente código CSS en los ajustes de la página > Avanzado > CSS Personalizado:
.vegas-timer-progress {
background: #fff; /* reemplazar color */
}
4. Aquí tienes la documentación de las opciones que puedes configurar en vegas.js.
Esto es todo, obviamente te recomiendo ver el video para que sepas que pasos debes seguir para integrar estos fragmentos de código con divi.
Si tienes alguna duda o pregunta puedes usar la sección de los comentarios, estaré encantado de ayudarte.
Saludos.
Hola OVdivi,
Funciona muy bien pero cuando estoy logueado, en modo anónimo no ejecuta el script, agradecido por cualquier orientación.
Hola Rolando dirígete a Divi > Opciones del tema > General > Performance y deshabilita: Defer jQuery And jQuery Migrate.
Muchas gracias OVdivi, funcionó
Buenos días. Realizando el tutorial he parado😰 porque el slider no se vé, pero en cambio si me dirijo al personalizador de temas de divi si me sale las imágenes y las transiciones de las mismas. ????????
Hola Augusto, dirígete a Divi > Opciones del tema > General > Performance y deshabilita: Defer jQuery And jQuery Migrate.
Buenas tardes Crack, como podemos insertar un titulo en cada diapositiva, independiente.
Gracias Oscar
Hola Juan, con este tutorial no es posible ya que el efecto solamente se le aplica al fondo, pero tengo este tutorial dónde puedes aplicar el efecto a un slider para que este vaya cambiando de diapositiva en diapositiva y cada diapositiva tenga su propio título.
Hola Oscar muy bueno el tutorial, te queria consultar porque en un sitio lo queria colocar y no funciona, lo probe de mil formas, le termine creando una pag demo para verlo andar y nada, lo probe en otro sitio y funciona, no descubro donde me lo esta bloqueando en el sitio original, donde queria montarlo, de echo copio y pego como lo tenes vos y funciona. tenes idea que podria estar fallando?
Hola Hector, seguramente se debe a Divi Perfomance. Dirígete a Divi > Opciones del tema > General > Performance y deshabilita: Defer jQuery And jQuery Migrate.
A ver si eso ayuda. Saludos.
Hola !! Gracias por tus tutoriales, genial!!
Oscar te pregunto ¿como se quita el filtro de puntos que tiene por defecto ?
Gracias Van, con un overlay false, aquí tienes todos los parámetros que puedes usar.
Hola Oscar Viedema, sabes cómo puedo implementar ese efecto pero en un carrusel, por ejemplo en esta página: https://kaziriad.com/themeforest/bunas/, quisiera hacer algo similar, pero no he encontrado la manera de hacerlo.
Muchas gracias por tu apoyo!
Hola Fernando, puedes aplicar este tutorial en un módulo slider de divi. De hecho eso que deseas ya lo he respondido en los comentarios del tutorial…
Hola, gracias por el tutorial. Yo ya deshabilité lo que dices en Performance pero igual no se ve nada. Qué puedo hacer?
Hola Oscar, ya me funcionó pero no encuentro cómo quitar ese efecto de zoom, solo necesito el fade y tampoco pude ajustar el alto del slide, a pesar que cambié los parámetros de la URL de las imagenes.
Genial David, compárteme la url de tu ejercicio para inspeccionarlo y poder ayudarte
Hola Oscar, muy amable en responder y hacerte disponible. Fijate que traveseando hallé la forma, ya funcionó. Lo único que las fotografías las veo pixeleadas, pero subiré con mejor resolución. Gracias mil por tu tutorial y tu ayuda.
Hola Oscar, gracias por el tutorial, mi pregunta es la siguiente, quería colocar unas imágenes para ordenador y otras para celular, creé 2 secciones con el código, cada una con sus imágenes diferentes y en visibilidad coloque una sección para ordenadores y la otro para tablet y celulares, el de la PC se ve bien pero en el celular me queda la pantalla en blanco, que podrá ser?
Hola Kelvin, tendría que revisar tu ejercicio para inspeccionarlo y ver de dónde viene ese espacio en blanco que mencionas. Puede ser un margen, una sección, etc… Para saber necesito inspeccionar tu web.
Hola Oscar, un servicio, hice el ejercicio pero no se logra ejecutar. En unos de los comentarios recomendaste; Divi Perfomance. Dirígete a Divi > Opciones del tema > General > Performance y deshabilita: Defer jQuery And jQuery Migrate pero no encuentro esa opción. Por favor podrías ayudar?
Hola José, te comparto esta captura para que te sirva de guía…
Hola Óscar,
según yo tengo todo exactamente igual al tutorial, pero no logré que se viera:
https://gaspardealba.com/photo/
Mil gracias
Hola Juan Gaspar. ¿Si estás utilizando la configuración recomendada de divi performance?
Hola Oscar !
Buenísimo el proyecto pero estoy teniendo un problema , el background en video no me lo toma no carga , en escritorio si de 10 , pero en movile se apaga no me lo toma.
Hola Óscar veo que hiciste spam con el mismo comentario, te elimine los demás y solamente te he dejado este.
Sobre tu problema,
1. Revisa que tengas esta configuración en divi performance.
2. También ten en cuenta que tu video debe estar bien optimizado, no debe ser muy pesado sino tendrás problemas en móviles.
Hola Oscar! Como se pueden añadir los arrows de siguiente y anterior?
Hola Eva, para este slider no es posible :/
Saludos Oscar
he realizado todo lo que has sugerido, y no, se queda en blanco ( o negro dependiendo del color de fondo)
cree el modulo con el código, copie ambos trozos de código directamente de la pagina, tengo la configuración de divi exactamente igual y nada
Hola Javier qué tal, ¿cuál es la url de tu ejercicio?
Buenos días, Óscar.
Pude hacer el ejercicio correctamente en este sitio: https://electrosustentable.artificecreativo.com/, pero me agrega una barra de desplazamiento al título. ¿Por qué hace eso? ¿Se puede sacar?
Hola Fernando, estoy revisando pero no veo la barra de desplazamiento que mencionas 🤔
Hola Oscar, ¿cómo estás?
Muchas gracias por este excelente tutorial. Lo apliqué y funcionó perfecto, pero en la misma sección tenía un módulo de Animated Heading de Divi Supreme, y ese dejó de funcionar. Entiendo que hace interferencia con esta animación. ¿Hay algo que pueda hacer para poder mantener ambos?
El link es https://danielae12.sg-host.com/
¡Muchísimas gracias!
¡Yo de nuevo!
Vengo a comentar que ya lo pude solucionar. El módulo que no funcionaba era el Animated Heading de Divi Flash, el cual cambié por Typing Effects de Divi Supreme y ahora sí funcionan ambas animaciones.
¡Muchas gracias! Quedó excelente 🙂
Abrazo grande.
Hola Daniela! Perdona pero estuve unos días ausente, estoy de vuelta 😀
Qué genial que lo lograste Daniela, he revisado tu web y realmente te ha quedado bien.
Un abrazo.
Hola Oscar, he probado todas las posibilidades y aún no consigo que se muestre en la página final. El resultado si se ve en la vista previa de wordpress, pero no así en modo incógnito. Gracias por tu ayuda.
Hola Francisco, te recomiendo utilices esta configuración en Divi Performance… Puede ser este el problema.
Saludos
Hola, gracias por tu respuesta. Es que ya probé con eso, probé desactivando todo y más, aún así no se muestra el resultado final. Quizás esté cometiendo algún error anterior en alguna parte del proceso.
Hola Francisco, compárteme el link del ejercicio, quiero revisar la consola para ver que arrojar arroja.