En el video se me pasó colocarle un z-index mayor a la sección de abajo (la del texto) para que esté por encima de la primer sección (la de todas las montañas), esto para que el difuminado del background de fondo de la primer sección se vea mejor. Lo que tienes que hacer al final del tutorial es esto: Ajustes de la segunda sección / Avanzado / Puesto / Indice z = 11. Posteriormente ahí mismo te vas a / Fondo / Posición final = 10% (en lugar de 2%). Con estos cambios tendrás un difuminado del fondo como la demo. 😊 ¡No olvides sucribirte al canal! 🥰
No entiendo porque no tienes mas vistas si eres un genio!!! En serio este contenido es el que necesita el mundo. Gracias por tu trabajo, me gustaría poderte donar algo.
Muchas gracias por las palabras Juan. Afortunados los que me han encontrado jaja. Seguiremos creando más y más contenido para poder llegar a más personas :)
Muchas gracias por tu ayuda. Aveces me resulta difícil seguir los updates de Divi pero se que contigo podré estar al día. Gracias por tus contenidos de gran Valor.
Pregunta para colocar un video de fondo por defecto en vez de una imagen, que tendria que modificar en el script, gracias por tu esfuerzo y video tutoriales...
Muchas gracias! Vine buscando cobre y encontré oro. Definitivamente respondiste a dudas que no esperaba encontrar aquí. Pero tengo un par de más. 1. Note que en algunos efectos usas el valor de efecto inicial y en otros lo dejas en 0, que determina que lo uses o no? 2. Cuál es la diferencia entre usar la función de posición absoluta y la otra que usaste para dejar las tres montañas a la misma altura de la primera sección, con usar una sección con dos filas y sus respectivos módulos? Te agradecería mucho tu respuesta.
Hola Carlos, que genial que este tutorial te está aportando. Sobre tus consultas: 1. El valor dependerá de donde quieres que inicie el desplazamiento, por ejemplo, cuando tenemos un elemento y le colocamos "0" este elemento empezará a animarse cuando el elemento ingresa a la parte inferior de la ventana del navegador. Si el valor es negativo por ejemplo -100px entonces empezará -100px después de la parte inferior de la ventana gráfica. Si es 100px empezará animarse mucho antes de tocar la parte inferior del navegador. 2. Las posiciones absolutas flotan sobre su contenedor. Las posiciones fijas flotan sobre el navegador sin importar su contenedor. Por ejemplo, si tenemos elementos con posiciones flotantes dentro de una sección, estos elementos tomarán de referencia la sección. En cambio si cambiamos estos elementos a posición fija, los elementos van a posicionarse tomando como referencia la ventana del navegador sin importar que estén dentro de una sección.
Hola Antonio, si lo llenas de efectos podría afectar, pero son efectos que se han optimizado bien con divi y no creo que afecte mucho. Es cosa de realizar pruebas dependiendo de tu sitio y ver qué tanto pueden llegar a afectar
Hola Luis, la velocidad es de acuerdo al scroll que haces, si te desplazas lento la bolita irá lento si te desplazas más rápido la bolita también aumentará su velocidad. Aunque puedes jugar con los valores de starting y ending, quizá ponerle valores más altos.
Hola Javier el efecto funciona en móviles al menos en mi teléfono funciona bien. Lo que tendrías que hacer solamente es adaptar a móvil los elementos del sitio desde las opciones que vienen con divi.
Buen video, quería preguntarte si es posible crear un modo noche y activarlo según la hora que tenga el visitante en su página web. He probado plugins como wp light Mode, pero no me gusta.
Excelente tutorial, ¡felicidades!. Tengo un problema al ajustar los elementos para tablet y móvil, podrías explicar cómo se ajusta para lograr el efecto en los dispositivos móviles, solo me funciona si cambio a fixed la posición de los elementos pero quedan fijos. Gracias.
Hola Moises el efecto te debe funcionar. A mí me funciona correctamente, solamente necesitas ajustar los elementos correctamente ya que los efectos de desplazamiento de divi son compatibles con móviles.
buen video me salio perfecto pero quisiera poner algo mas interesante pero no se como, que la primera imagen se quede quieta hasta un punto y que las demás vayan subiendo mostrando informacion o imagenes, sabrias como se hace? o algun consejo?
Muy interesante propuesta. Tendría que realizar mis pruebas. Puedes dejar fija la imagen hasta cierto punto y después al tocar cierto elemento que avance, lo pudieras hacer con código o con este plugin mira: es.wordpress.org/plugins/sticky-menu-or-anything-on-scroll/
Hola muy bien explicado, de casualidad compartiras tambien el layout algo no me salio bien y me expande la imagen a los lados entonces me sale el scroll horizontal no se que hacer
Hola Arturo, muchas gracias. No tengo ningun problema en compartirlo, deja buscarlo a ver si todavía lo tengo jaja. También puedo revisar tu sitio para ver que está pasando, solo escríbeme a hola@ovdivi.com :)
Hola muy bueno el tutorial Me gustaría aprender más sobre crear: Mega Menu ( SI o si) Menu secundario (opcional) Carrusel. Espero q leas este comentario Saludos
Hola George, para crear un mega menú con divi puedes optar por algún plugin como: es.wordpress.org/plugins/quadmenu-divi/ Sobre el menú secundario divi trae la opción desde el personalizador de temas, lo único que tienes que hacer es crear el menú desde Apariencia / Temas. El carrusel, problablemente más adelante haga un tutorial al respecto :) Qué tengas buen inicio de semana amigo. Saludos
Hola qué tal, lo tenemos en los tutoriales exclusivos: ovdivi.com/como-crear-un-efecto-de-maquina-de-escribir-typing-effect-animado-con-divi-y-sin-plugins/
Hola, hice el ejercicio y no me funcionó el ejercicio de desaparecer el desplazamiento horizontal, intenté de varias formas y no me funciona, me puedes ayudar por favor? por lo demás, está muy bueno el ejercicio, gracias!
Los efectos de desplazamiento de scroll de divi también funcionan en móvil. En la descripción del video tienes el enlace a la demo para que lo compruebes por ti mismo :)
Hola amigos de OV DIVI, espero estén super bien. quisiera contarles que lastimosamente los divi gratuitos de las cursos de portafolio y crea una página web desde cero, están con problemas :/ aun no sé que es lo que pasa, pero no se pueden hacer cambios personalizados dentro del constructor visual. aparecen errores como el siguiente "body_font could not be displayed, type error is not a function in t in divi..." sinceramente he buscado solución para poder utilizarlo, soy un estudiante y lastimosamente ahora mismo no puedo comprar las versiones más recientes, me entristece que pase esto. sería increible si me pudieran dar una pista de como solucionar el problema (lei que cambiando a php 5 depronto se solucionaba, pero no) muchas gracias por tomarse el tiempo de leer esto, saludos y como siempre like a estos tutoriales tan buenos.
@@OVDIVI ninguno, apenas instale el divi y empecé a agregar contenido empezó a darme problemas. Intente con la versión del curso del portafolio y luego con la versión del curso de página web, ninguno me funcionó. :/
NO ME SALEEEEE me pase todo el día haciendo un efecto con varias nubes, pero me salen las barras laterales y horizontales, osea que no esta respetando los limites, tienes una solución para eso?
@@OVDIVI lamentablemente no, solo de forma local, pero creo que es un error con algún plugin, por que trate de crear otros efectos y tambien se rompían, voy a crear otro entorno local y a probarlo sin ningún plugin, desde ya gracias!
Holaaa, no me funciona el código css para evitar el desplazamiento horizontal. ¿Alguien me podría ayudar porfa? www.funcamp.com.co/clases-virtuales-para-ninos/
Gracias por explicar el desplazamiento pero tengo una pega que espero encuentres constructiva. No he votado porque realmente hubiera puesto que no me gusta. Creo hubiera podido explicar todo con un video de 8 minutos en vez que de 38. No es posible que solo en el minuto 17 se aprenda a usar los Scroll Effect. Espero mi comentario sirva para mejorar los próximos videos.
Gracias amigo. En realidad en este tutorial enseño a realizar este efecto de montañas usando scroll effects. Me gusta hacer ejercicios prácticos en mis tutoriales y no solo hablar de las características que trae divi. Llevo todo a la práctica real. Pero sí, tienes razón si hubiera hablado solo de divi scroll effects el video fuera más corto. Lo valoraré, un abrazo.
En el video se me pasó colocarle un z-index mayor a la sección de abajo (la del texto) para que esté por encima de la primer sección (la de todas las montañas), esto para que el difuminado del background de fondo de la primer sección se vea mejor. Lo que tienes que hacer al final del tutorial es esto: Ajustes de la segunda sección / Avanzado / Puesto / Indice z = 11. Posteriormente ahí mismo te vas a / Fondo / Posición final = 10% (en lugar de 2%). Con estos cambios tendrás un difuminado del fondo como la demo. 😊
¡No olvides sucribirte al canal! 🥰
Año 2024 y sigo consultando este video 🍻
Así es, hasta yo me doy mi vuelta también porque aunque no creas se me olvidan las cosas jaja. Un abrazo
No entiendo porque no tienes mas vistas si eres un genio!!! En serio este contenido es el que necesita el mundo. Gracias por tu trabajo, me gustaría poderte donar algo.
Muchas gracias por las palabras Juan. Afortunados los que me han encontrado jaja. Seguiremos creando más y más contenido para poder llegar a más personas :)
Muchas gracias por tu ayuda. Aveces me resulta difícil seguir los updates de Divi pero se que contigo podré estar al día. Gracias por tus contenidos de gran Valor.
Hola Eduardo, esperemos nunca pierdas de vista el canal! Un abrazo.
¡Qué clase tan provechosa! mil gracias.
Me alegra saber que te ha gustado Wilmar. Un abrazo 😀
Excelente tutorial muchas gracias
Gracias a ti también :) ¡Saludos!
Tus videos son increíbles amigo!!!!!
Muchas gracias Joel, seguiremos con todo 🤠
Excelente tutorial! Me gusta que lo expliques tan detallado y sin prisas 👏
Muchas gracias, seguiremos así :) Por cierto espero ya estés suscrito. Un abrazo
Muy bien video, me sirvió muchos…. Gracias
Excelente. Saludos Sebastián :)
Excelente como siempre, me encanta tu canal, simplemente genial!! Gracias.
Carlos gracias a ti por ser parte del canal. Un abrazo amigo
¡Qué buen tutorial!
Gracias Wilmar :)
Excelente Tutorial Felicidades Oscar
Muchas gracias Martín. Saludos :)
Pregunta para colocar un video de fondo por defecto en vez de una imagen, que tendria que modificar en el script, gracias por tu esfuerzo y video tutoriales...
Hola Ramón, desde divi podemos colocar un video de fondo como sección. Ajustes de la sección / Fondo / Video...
Oscar, como siempre tus tutoriales son geniales!
Gracias por ser parte de OV DIVI. ¡Un abrazo!
Muchas gracias! Vine buscando cobre y encontré oro. Definitivamente respondiste a dudas que no esperaba encontrar aquí. Pero tengo un par de más.
1. Note que en algunos efectos usas el valor de efecto inicial y en otros lo dejas en 0, que determina que lo uses o no?
2. Cuál es la diferencia entre usar la función de posición absoluta y la otra que usaste para dejar las tres montañas a la misma altura de la primera sección, con usar una sección con dos filas y sus respectivos módulos?
Te agradecería mucho tu respuesta.
Hola Carlos, que genial que este tutorial te está aportando.
Sobre tus consultas:
1. El valor dependerá de donde quieres que inicie el desplazamiento, por ejemplo, cuando tenemos un elemento y le colocamos "0" este elemento empezará a animarse cuando el elemento ingresa a la parte inferior de la ventana del navegador. Si el valor es negativo por ejemplo -100px entonces empezará -100px después de la parte inferior de la ventana gráfica. Si es 100px empezará animarse mucho antes de tocar la parte inferior del navegador.
2. Las posiciones absolutas flotan sobre su contenedor. Las posiciones fijas flotan sobre el navegador sin importar su contenedor. Por ejemplo, si tenemos elementos con posiciones flotantes dentro de una sección, estos elementos tomarán de referencia la sección. En cambio si cambiamos estos elementos a posición fija, los elementos van a posicionarse tomando como referencia la ventana del navegador sin importar que estén dentro de una sección.
Estupendo vídeo, y por supuesto que he aprendido mucho.
Gracias por ser parte de OV DIVI. Un abrazo :)
buenísimo, gracias
Gracias Katherine :)
Genial... gracias
No hay de qué Raphael :) un gusto.
Excelente video, gracias por compartir tus conocimientos, solo una pregunta, estos efectos afectan de algún modo la carga de la página?
Hola Antonio, si lo llenas de efectos podría afectar, pero son efectos que se han optimizado bien con divi y no creo que afecte mucho. Es cosa de realizar pruebas dependiendo de tu sitio y ver qué tanto pueden llegar a afectar
hola amigo excelente vídeo, tengo una pregunta y es la velocidad de la bola de nieve no se puede hacer mas lenta al hacer scroll?
Hola Luis, la velocidad es de acuerdo al scroll que haces, si te desplazas lento la bolita irá lento si te desplazas más rápido la bolita también aumentará su velocidad. Aunque puedes jugar con los valores de starting y ending, quizá ponerle valores más altos.
El tutorial esta muy bien.
Pero¿ podrías ampliarlo como se vería en móvil?
Como harías para que fuese responsive y siguiera manteniendo este efecto.
Hola Javier el efecto funciona en móviles al menos en mi teléfono funciona bien. Lo que tendrías que hacer solamente es adaptar a móvil los elementos del sitio desde las opciones que vienen con divi.
Buen video, quería preguntarte si es posible crear un modo noche y activarlo según la hora que tenga el visitante en su página web. He probado plugins como wp light Mode, pero no me gusta.
Hola Alejandro. Lo intentaremos amigo :) Yo digo que si es posible. 💪
Excelente tutorial, ¡felicidades!. Tengo un problema al ajustar los elementos para tablet y móvil, podrías explicar cómo se ajusta para lograr el efecto en los dispositivos móviles, solo me funciona si cambio a fixed la posición de los elementos pero quedan fijos. Gracias.
Hola Moises el efecto te debe funcionar. A mí me funciona correctamente, solamente necesitas ajustar los elementos correctamente ya que los efectos de desplazamiento de divi son compatibles con móviles.
buen video me salio perfecto
pero quisiera poner algo mas interesante pero no se como, que la primera imagen se quede quieta hasta un punto y que las demás vayan subiendo mostrando informacion o imagenes, sabrias como se hace? o algun consejo?
Muy interesante propuesta. Tendría que realizar mis pruebas. Puedes dejar fija la imagen hasta cierto punto y después al tocar cierto elemento que avance, lo pudieras hacer con código o con este plugin mira: es.wordpress.org/plugins/sticky-menu-or-anything-on-scroll/
Hola muy bien explicado, de casualidad compartiras tambien el layout algo no me salio bien y me expande la imagen a los lados entonces me sale el scroll horizontal no se que hacer
Hola Arturo, muchas gracias. No tengo ningun problema en compartirlo, deja buscarlo a ver si todavía lo tengo jaja.
También puedo revisar tu sitio para ver que está pasando, solo escríbeme a hola@ovdivi.com :)
Eso se hacía con pocos clics en Adobe Muse!!! Lo recuerdas?
Sí por supuesto. Pero Divi trabaja mejor en responsive :)
crack
¡Saludos William! :)
Hola muy bueno el tutorial
Me gustaría aprender más sobre crear:
Mega Menu ( SI o si)
Menu secundario (opcional)
Carrusel.
Espero q leas este comentario Saludos
Hola George, para crear un mega menú con divi puedes optar por algún plugin como: es.wordpress.org/plugins/quadmenu-divi/
Sobre el menú secundario divi trae la opción desde el personalizador de temas, lo único que tienes que hacer es crear el menú desde Apariencia / Temas.
El carrusel, problablemente más adelante haga un tutorial al respecto :)
Qué tengas buen inicio de semana amigo. Saludos
Hola disculpa podrias hacer un video para hacer el efecto de tu web
donde cambias el texto despues de la palabra diseñador __________ Freelance
Hola qué tal, lo tenemos en los tutoriales exclusivos: ovdivi.com/como-crear-un-efecto-de-maquina-de-escribir-typing-effect-animado-con-divi-y-sin-plugins/
@@OVDIVI super gracias
Hola, hice el ejercicio y no me funcionó el ejercicio de desaparecer el desplazamiento horizontal, intenté de varias formas y no me funciona, me puedes ayudar por favor? por lo demás, está muy bueno el ejercicio, gracias!
Hola qué tal Alejandra. ¿Tienes tu ejercicio en línea? Me gustaría darle un vistazo.
Hola me encanto el tutorial, pero yo lo realice y le agregue con un fotter y debajo me queda blanco, no se queda en el lugar , como lo puedo corregir?
Hola Manuel, me envías el enlace de tu web para revisar que sucede
Porque no lo muestras en modo responsive? 🤔
Los efectos de desplazamiento de scroll de divi también funcionan en móvil. En la descripción del video tienes el enlace a la demo para que lo compruebes por ti mismo :)
Hola amigos de OV DIVI, espero estén super bien. quisiera contarles que lastimosamente los divi gratuitos de las cursos de portafolio y crea una página web desde cero, están con problemas :/ aun no sé que es lo que pasa, pero no se pueden hacer cambios personalizados dentro del constructor visual. aparecen errores como el siguiente "body_font could not be displayed, type error is not a function in t in divi..." sinceramente he buscado solución para poder utilizarlo, soy un estudiante y lastimosamente ahora mismo no puedo comprar las versiones más recientes, me entristece que pase esto. sería increible si me pudieran dar una pista de como solucionar el problema (lei que cambiando a php 5 depronto se solucionaba, pero no) muchas gracias por tomarse el tiempo de leer esto, saludos y como siempre like a estos tutoriales tan buenos.
Hola Juan qué tal. ¿Tienes instalado algún plugin? Probablemente este generando el conflicto.
@@OVDIVI ninguno, apenas instale el divi y empecé a agregar contenido empezó a darme problemas. Intente con la versión del curso del portafolio y luego con la versión del curso de página web, ninguno me funcionó. :/
@@hitachi040 ¿Tienes tu sitio en línea para que pueda verlo?
Hola amigo las imagenes que descargue dicen que no es compatible; a que se debe esto ??
Hola John, mmm ¿en dónde te dice eso?
@@OVDIVI amigo cuando descargo el archivo y voy a mirar las imágenes me dice que el archivo no es compatible
@@johnber12 Si se descomprime el archivo?
@@OVDIVI si amigo claro me descomprime pero a la hora de mirar las imagenes me dice error
@@OVDIVI te deje un mensaje en Messenger para que lo revises
NO ME SALEEEEE me pase todo el día haciendo un efecto con varias nubes, pero me salen las barras laterales y horizontales, osea que no esta respetando los limites, tienes una solución para eso?
Hola Tomás, ¿tienes el ejemplo en línea para inspeccionarlo?
@@OVDIVI lamentablemente no, solo de forma local, pero creo que es un error con algún plugin, por que trate de crear otros efectos y tambien se rompían, voy a crear otro entorno local y a probarlo sin ningún plugin, desde ya gracias!
@@T_S-R Prueba en una instalación nueva y me comentas ;)
@@OVDIVI me sale el mismo error, te puedo mandar una screen así ves, pero no te puedo mandar link ya que es de modo local
@@T_S-R Sí envíamelo
Holaaa, no me funciona el código css para evitar el desplazamiento horizontal. ¿Alguien me podría ayudar porfa?
www.funcamp.com.co/clases-virtuales-para-ninos/
Revisé el sitio pero a mi no me aparece el desplazamiento horizontal
Gracias por explicar el desplazamiento pero tengo una pega que espero encuentres constructiva. No he votado porque realmente hubiera puesto que no me gusta. Creo hubiera podido explicar todo con un video de 8 minutos en vez que de 38. No es posible que solo en el minuto 17 se aprenda a usar los Scroll Effect. Espero mi comentario sirva para mejorar los próximos videos.
Gracias amigo. En realidad en este tutorial enseño a realizar este efecto de montañas usando scroll effects. Me gusta hacer ejercicios prácticos en mis tutoriales y no solo hablar de las características que trae divi. Llevo todo a la práctica real. Pero sí, tienes razón si hubiera hablado solo de divi scroll effects el video fuera más corto. Lo valoraré, un abrazo.