Cómo crear un efecto de desplazamiento híbrido (vertical y horizontal) al hacer scroll en divi

[@FernandoAV-ArsMeliora]

Muchas gracias amigo, tus videos son muy útiles, los explicas de manera simple a pesar de que a veces son procesos complejos los transformas en fácil de comprender y de ejecutar con el paso a paso de tu explicación. Muchos no tienen el Don de la pedagogía. Te comento que apenas me cancelen un trabajo me uno a tus tutoriales de pago que si los gratuitos son oro, me imagino los de pago. Muchas gracias de verdad por tu contenido de valor. Eres genial.

[@OVDIVI]

Muchas gracias por tus palabras Fernando. Me inspiras a seguir creando mucho contenido tanto gratuito como premium. El día que te sea posible te espero dentro de los tutoriales, en verdad valen completamente la pena y siempre me tienes ahí para cualquier duda que tengas. Te deseo mucho éxito en tu proyecto. Abrazo.

[@FernandoAV-ArsMeliora]

@@OVDIVI Igualmente, muchas gracias maestro.

[@isabelcm2439]

De verdad yo te amo wey 💖 por eso pago mi mensualidad en tu pagina! Y te recomiendo muaaa

[@OVDIVI]

jajaj muchas gracias por el apoyo Isa! Gracias a ti esto sigue adelante. Un abrazo 💖

[@vicborondi]

Alucinante!!. Súper chulo!!.

[@OVDIVI]

¡Venga Vicente! ¡Con todo! Saludos.

[@valeriaestefaniarodriguez7625]

Oscar siempre salvándome la vida! Excelente video muchas gracias

[@OVDIVI]

Muchas gracias Valeria :) Seguiré aportando todo lo que pueda acerca de divi y wordpress. Un abrazo

[@arsmeliora]

Excelentes tutoriales muchas gracias.

[@OVDIVI]

Gracias a ti por ser parte de esto. Un abrazo.

[@danielaramayo9826]

Muchas gracias, muy util tu contenido me suscribo con entusiasmo🙆‍♂️

[@OVDIVI]

Muchas gracias Daniel :) ¡Un abrazo!

[@generagananciasonline6184]

Recien vi un video y me suscribo

[@OVDIVI]

Muchas gracias 👍

[@miguelarmenteros6056]

wow que super...Vi un efecto similar en una web hace tiempo y siempre me llamó la atención. Gracias crack !!

[@OVDIVI]

Sí Miguel :) hay varios buenos ejemplos con este efecto y ahora lo podemos lograr con divi. Un abrazo amigo.

[@Icuevasp]

Un gran trabajo Oscar, Un abrazo

[@OVDIVI]

Gracias Iñaki, un abrazo de vuelta.

[@DanielAlcoleas]

Muchas gracias!!!

[@OVDIVI]

Un abrazo Daniel.

[@canalofbits]

buenísimo gracias

[@OVDIVI]

Gracias Alejandro. Saludos

[@Fierexita]

Cómo siempre todo genial!! Gracias por todo.

[@OVDIVI]

Saludos Natalia 😊

[@CayetanoGros]

Brutal! Muchas gracias!

[@OVDIVI]

Un abrazo Cayetano. Saludos!

[@lacocinadelatialety]

Excelente tutorial!! 👍

[@OVDIVI]

Gracias Edd2s! Un abrazo.

[@emmanuelgarduno9029]

Excelente vídeo este efecto se puede hacer con las entradas de blog?

[@OVDIVI]

Hola Emmanuel, no amigo, solamente está enfocado en secciones de divi.

[@manzana904]

Muchas gracias, a mí me funciono en web y móvil.. la única duda que tengo, y donde tengo error, es que si dentro de la misma página al ser extensa,, queda usarlo en diferentes secciones diferentes, por ejemplo al principio de la página y otra más hacia el final.. Es que lo hago y las imágenes de la nueva sección, me las pone en las del principio...

[@OVDIVI]

Hola Helga, si lo deseas implementar dos veces es mejor duplicar el código y reemplazar los nombres de clase: horizontal-section, horizontal-container También duplicar el código CSS correspondientes a estas clases colocando la nueva clase. Por cierto, lo único que no tienes que duplicar son estos:

[@juanpmon]

muy buen video. Solo una pregunta. Podría cargar esa libreria GSAP con betheme y el constructor de betheme?. O solamente es con Divi. 😕

[@OVDIVI]

Hola Juan, en realidad las librerías se pueden cargar en cualquier tema o constructor para wordpress. Quizá cambié solamente la forma de integrarlo pero de que se puede se puede.

[@juanpmon]

@@OVDIVI aaaaa ok!!! Gracias!!!

[@estudiomagma4648]

¿Estos mismos códigos y principios podrian funcionar para Elementor?

[@OVDIVI]

En teoría deben funcionar pero la realidad es que tiene tiempo que no uso elementor y no sabría decirte exactamente

[@decrea8439]

si funciona , lo acabo de probar

[@ariannapazmino8247]

Hola, y como arreglas el modo responsivo?

[@OVDIVI]

Hola Arianna, el efecto funciona en móvil, el problema es que si tus secciones tienen mucho contenido nos causará conflictos. Lo mejor es ocultar las secciones con desplazamiento horizontal en móvil y crear unas nuevas secciones para mostrar solamente en dispositivos móviles. Esta puede ser una solución.

[@kevinchm2211]

Hola @ovidivi me gustan muchos tus tutoriales, me gustaría que enseñarás como hacer responsive las images de los carruseles de section completa

[@OVDIVI]

Hola Kevin, muchas gracias. ¿A qué imágenes de carruseles te refieres? Las imágenes de fondo por defecto se adaptaran a la altura y anchura. Aunque tienes la opción de usar imágenes diferentes para cada resolución: intercom.help/elegantthemes/en/articles/2254547-optimizing-background-images-for-small-screens

[@kevinchm2211]

@@OVDIVI ahh gracias es que tenia un problema con esas imágenes en dispositivos móviles pero ya se solucionó gracias 🤗

[@LorenaRodriguezRG]

Hola, tengo un detalle cuando llego al scroll horizontal, hay como que un brinco, no es smooth la transcicion, como se puede resolver? Por lo demás está genial

[@OVDIVI]

Hola Lorena, ¿puedo ver tu ejercicio? Si no te deja compartir el link por aquí, me lo dejas por la sección comentarios del post del blog por fa

[@emmanuelacevedo17]

Hola, ¿cómo puedo hacer para que no tenga que llegar a la ultima sección de la derecha para poder seguir bajando? tipo en el feed de peliculas de Netflix, es decir que si el cursor esta debajo de la sección con scroll horizontal se pueda bajar sin tener que ir a la derecha para luego poder bajar... espero tu respuesta! muchas gracias!! excelente tutorial

[@OVDIVI]

Hola Emmanuel, no es posible con este ejercicio. :( pero tengo un tutorial premium con el que es posible: ovdivi.com/como-crear-diapositivas-con-desplazamiento-scrolling-horizontal-en-divi/

[@miguelsanchezmtz]

Tengo una pregunta, en la sección donde está el Scrolling horizontal, se puede hacer que sea opcional el recorrido horizontal con un botón?? es decirl si el visitante decide navegar horizontalmente con un boton y si no que se se siga con el Scrolling vertical

[@OVDIVI]

Hola Miguel, con este ejercicio no es posible pero si es posible con este otro: ovdivi.com/como-crear-una-pagina-web-con-desplazamiento-horizontal-horizontal-scrolling-con-divi-sensible-a-efectos-de-animacion/

[@alemtedavid1649]

y esto no presenta problemas de usabilidad con el testeo de google?? Es responsive ??

[@OVDIVI]

Hola Alem, para móvil es mejor deshabilitarlo, solo lo recomiendo para escritorio. Aunque si tu sitio no es de mucha información, puede funcionar bien en móvil también.

[@acmonjl]

Amigo una pregunta, actualizas los plugin que dejas en el curso?

[@OVDIVI]

Sí, algunos plugins vienen con licencia incluida y los que no los actualizo cada que hay una nueva versión :)

[@bictorino2012]

hola Oscar ...tienes algún auto de como crear un menu o barra de menu que a medida que se hace scroll hacia abajo este se vaya moviendo horizontal a la derecha? (según la categoría que va apareciendo).... Agradezco tu respuesta.

[@OVDIVI]

Hola Victor qué tal, ¿Tienes un ejemplo? Si me lo compartes seguro veo la posibilidad de realizarlo. Un abrazo.

[@OVDIVI]

A ver revisa esto: ovtravel.ovdivi.com/tour/bali-tour-de-un-dia-al-parque-de-aventuras-treetop/ En este curso realizamos un menú que se queda fijo y se van activando las opciones del menú dependiendo la sección en la que nos encontramos. ¿Es algo así lo que deseas?

[@bictorino2012]

@@OVDIVI eso mismo necesito para versión mobile de una carta menu :)...cómo llego directo a esto? también por la suscripción Premium en tu sitio?

[@OVDIVI]

@@bictorino2012 Esto lo implementamos en este curso amigo: academia.ovdivi.com/cursos/crea-un-sitio-web-de-reservas-tours-viajes-con-wordpress-divi-y-woocommerce/, que es un producto diferente a los tutoriales exclusivos.

[@bictorino2012]

@@OVDIVI a ok, gracias igual. Sigo buscando la opción menu solamente por ahora. ✨👌🏻

[@losimplefunciona]

Hola! Un vídeo excelente, creo que terminaré por suscribirme a tu academia! Quería aprovechar para preguntar si habría alguna posibilidad de hacer exactamente lo mismo, pero dejando dijo un título que se vea arriba, por ejemplo en este caso podría ser "películas en cartelera" o algo así, y que el título quede fijo, pero que las películas hagan scroll. Muchas gracias!

[@OVDIVI]

Hola William muchas gracias por el apoyo. Si, yo digo que si puede ser posible el título que dices, puede ser como elemento fijo para que éste no se mueva al desplazarnos

[@dayanaaponte2995]

hola justo esto buscaba para una idea de la web que tengo pero quiero hacer anclas que funcionen desde el horizontal al vertical y viceversa y me funciona uno pero el resto no sabes como podría solucionarlo, he buscado mucho como solucionarlo y no consigo respuestas sería un buen video para agregar . gracias!

[@OVDIVI]

Hola Dayana, lamentablemente no podemos anclar secciones verticales y horizontales en la misma página :(

[@fontechtecno]

justo lo que estaba buscando, me preguntaba si es el mismo procedimiento para hacer un slider de blurbs

[@OVDIVI]

Exclente Fdo. Un slider de burbs? Si te refieres que en lugar de usar columnas usar los módulos anuncio, si es lo mismo.

[@fontechtecno]

@@OVDIVI ya pude hacerlo seguí el tutoríal del slider de testimonials, muchas gracias!

[@CarlosArza]

muy buen tuto..!!! lo aplique pero en celular no me funciona bien se una la primera y segunda sección

[@OVDIVI]

Hola Carlos, tienes razón. El efecto funciona, solamente que divi en móvil nos coloca una columna abajo de la otra y por lo tanto no se ve bien, solamente se ve la columna 1 de cada sección. Lo que puedes hacer es ocultar las secciones en horizontal para tabletas y móvil y hacer otras nuevas secciones que solo se muestren en tabletas y móvil de forma normal. Esta sería una solución para evitar conflictos.

[@melyamy1734]

Por fa, me pudes ayudar con algo... Es que ya subí una tipografía a divi, pero cuando la coloco en el párrafo no se pone con la tipografía. Ayúdame por fii

[@OVDIVI]

Hola Mely qué tal, ¿Cómo subiste la tipografía? La subiste con los formatos recomendados? También puedes usar este plugin para cargar tus fuentes: es.wordpress.org/plugins/use-any-font/

[@melyamy1734]

@@OVDIVI Gracias, lo voy a utilizar ..la verdad vengo revisando todo y nada me funciona..... espero que con esto si, el problema no es subir la tipografía por qué cuando ya lo subo y le asignó a un texto es como si no tuviera formato... Muchas gracias Oscar lo voy a probar. :3

[@OctavioLuis]

Hola Oscar! Estoy suscripto a tu academia. Aprendo mucho de verdad. Gracias por hacerlo fácil y entendible!!!! Te hago una consulta sobre este tutorial en particular, es un detalle, pero quizás se resuelve en forma sencilla. Hay forma de achicar el espacio que queda entre cada sección cuando se hace el scroll horizontal. Tenemos 5 imágenes en cada sección, pero cada 5 hay un espacio un poco más ancho, que se corresponde a la separación de cada sección No es mucho, pero quizás se puede resolver.... Creo que le quedaría mucho mejor. De todos modos lo implementé y eso que soy apenas principiante en este mundo de wordpress y divi. Gracias

[@OVDIVI]

Hola Octavio, ya lo hemos platicado por los tutoriales exclusivos. En resumen debes cambiar el ancho de tu fila al 100%. Un abrazo.

[@neilinkneiva9058]

Lastimosamente no funciono en mi web, o bueno si funciono pero no se ve muy bien en dispositivo móvil en realidad no entiendo el porque, pero pues debo investigar mucho más. Gracias

[@OVDIVI]

Hola tienes razón, lo que te recomiendo es ocultar las secciones con desplazamiento horizontal en móvil y crear unas nuevas secciones para mostrar solamente en dispositivos móviles. Esta puede ser una solución.

[@SebastianHS]

@@OVDIVI Owwwww en realidad no lo había pensado, muchas gracias crack.

[@omarmendoza5972]

Es lo que busco, lamentablemente ya todo el proyecto esta con elementor y no van a querer pasar a Divi solo por una pequeña parte de la pagina U_U

[@OVDIVI]

Entiendo Omar, aunque también debes encontrar algo parecido para Elementor :)

[@JuanPabloVasquez]

amado yo pagué unos meses y volverîa a pagarlo para aprender nuevas cosas.

[@OVDIVI]

Muchas gracias por el apoyo Juan Pablo, ustedes hacen posible esto 🙏 Un abrazo.

[@rolandopaz8963]

Gracias!!

[@OVDIVI]

Saludos Rolando :)