Hey bienvenido/bienvenida a este nuevo artículo tutorial. En este tutorial te voy a enseñar a implementar fullPage.js con Divi de forma muy fácil.
fullPage.js es una sencilla librería de javascript muy famosa que nos sirve para crear increíbles páginas web con desplazamiento vertical a pantalla completa. Es decir, al ir haciendo scroll sobre la página, ésta se irá desplazando de sección en sección. Esta es una característica que más de uno me ha pedido pero por cuestiones de trabajo no había tenido el tiempo de realizar este tutorial.
Si quieres ver el ejemplo en funcionamiento aquí te dejo el enlace de la demo de la página oficial de fullPage: https://alvarotrigo.com/fullPage/es/
Aquí te dejo la documentación oficial por si quieres darle un vistazo: Documentación fullPage.js
Lo primero que tenemos que hacer es enlazar los archivos de la librería con divi mediante las siguientes líneas de código:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.js"></script>
Posteriormente mediante este otro código vamos a agregar el ID fullpage a divi (es algo que se nos pide en la documentación):
jQuery(function($){
$( "#et-main-area .et_builder_inner_content" ).attr( "id", "fullpage" );
});Por último vamos a necesitar inicializar la librería, lo haremos con el siguiente fragmento de código:
jQuery(document).ready(function( $ ) {
$('#fullpage').fullpage({
//options here
scrollingSpeed: 1000,
navigation: true,
slidesNavigation: true
});
//methods
$.fn.fullpage.setAllowScrolling(true);
});Si te ha quedado alguna duda, puedes dejarla en los comentarios y yo haré lo posible por responder lo más pronto tu mensaje.
Un abrazo.
Hola,
me paso algo raro con la implantación de esto. Funciona bien, pero hay 2 elementos dentro de una sección que no me los muestra a pesar de que los veo en el editor. Además si a cada sección le doy de altura 100uvh en algunas secciones se muestra mal.
Saludos
Hola Guillermo. ¿Qué elementos son los que no se muestran? En cuanto a la altura colocando 100vh, aveces es mejor usar pixeles (px) en las secciones por que la altura de 100vh la aplicará de manera automática fullpage.js
Hola Guillermo, te recomiendo en vez de poner 100uvh, colocar 100% en la altura y en el ancho.
He notado que no se ve NINGUNA Sección u Objeto que tenga aplicada una animación de DIVI (las que da en la parte de DISEÑO). Quitando esto aparecen… pero es un bajon que no se pueda animar nada.
Giovanni fullpage por defecto desactiva las animaciones. Para activarlas puedes colocar este valor en el código jquery:
scrollBar: true
Inténtalo y me comentas si te funcionó o no.
Si funciona… pero al colocarla se pierden las propiedades de full page de ese salto bonito de sección en sección que estamos buscando.
el sitio que estoy probando es: lulamarula.com/home tal vez puedas revisarlo… GRACIAS GENIO!
🙁Esa es una de soluciones que dan los foros de fullpage.js pero ya veo que no funciona con divi.
Intenta actualizar el enlace del CDN a ver, en lugar de usar la versión 3.0.7, usa este: https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.js
La otra sería integrar las animaciones manualmente, mira este post: Click aquí
Si no te funciona existe otra alternativa, es integrar esta otra librería que hace prácticamente lo mismo que fullpage.js (haré un tutorial más adelante): https://projects.lukehaas.me/scrollify/
Saludos, que exactamente hay que hacer para hacer en la segunda seccion un slider horizontal, he intentado de todo y nada aun, si podrias ayudarme, el sitio es tutiendainteligente.com/mototransformer
Hola Larry, lo que debes realizar es dentro dela sección colocarle a las filas la clase «slide» para que estas sean horizontales. Aquí puedes ver la estructura que se necesita.
giovanni te hago una consulta, pudiste solucionarlo de alguna manera?? se que fue hace mucho tu consulta, pero tengo el mismo problema con la web de un cliente
Muy buen aporte Óscar.
Estoy intentando aplicarlo en mi web pero tengo problemas. No soy programador y me está costando.
Incluyo todo lo que pones en el tutorial pero no sé qué hacer con la carpeta fullPage.js-master. Disculpa mi torpeza pero es que no sé si debo incluirla en la carpeta de Divi o dónde.
Simplemente no la he puesto y ha funcionado a medias. Las imágenes dejan huecos en blanco tanto arriba como abajo o simplemente no se muestran.
¿Podrías decirme cómo proceder?
Mil gracias.
Hola Miguel, estás trabajando en línea? ¿Puedo ver tu sitio? para inspeccionarlo por fa
Hola Óscar,
no había visto tu respuesta. Me había llegado a spam. Disculpa.
He conseguido que el scroll vertical me funcione. El problema ahora es con el scroll horizontal (el de las fotos de perritos) Con este no hay manera. ¿No hay ningún plugin en WordPress que ayude? Lo digo porque aparentemente no es posible con el código que propones.
Trabajo en local por lo que es complicado aunque podríamos verlo online.
Hola Miguel, genial que lo has logrado 🙂
En cuanto al tutorial que me mencionas del scroll horizontal se me hace extraño que no te funcione, debe funcionar de igual manera amigo, sigue el tutorial paso por paso, seguramente algún error haz de tener. Si lo tuvieras en línea yo puedo entrar a tu wordpress y revisar donde está fallando.
Hola Oscar,
muchas gracias por el tutorial. Es justo lo que busco pero por muchas veces que lo he intentando no consigo implementarlo. No funciona el scroll y tampoco se convierten las secciones en full height. Un poco de ayuda me vendría bien. Un saludo y muchas gracias
Miguel qué tal, ¿Tienes tu sitio en línea? para poder darle un vistazo amigo.
La página donde la estoy implementando es escolapiospozuelo.org/prueba-ideario
Gracias por la ayuda
Escríbeme a [email protected] dándome acceso a tu sitio. Entro a tu WP reviso y lo solucionamos 🙂
Hola Oscar esta estupendo el tutorial y soy un seguidor de tu canal apasionado por todas tus tecnicas que nos enseñas. Tengo un problema con este queria ver si me podias echar una mano, resulta que segui todos los pasos del video pero al finalizar todo, en cada seccion me ha cortado las imagenes y no se ven los textos ni botones que estaban, el deslizado anda bien pero no se ve lo otro, como me podrias ayudar ? gracias !
Hola Federico qué tal. Gracias por estar siempre al pendiente de OV Divi :).
En cuanto al problema que tienes, me podrías pasar el enlace de tu sitio web por fa. Quiero darle un vistazo y ver que está sucediendo.
SI claro la pagina es http://www.silviovelo.com.ar/inicio
Al hacer todo se me desaparecen los titulos y textos..
Federico te envíe un correo. Un abrazo.
Hola, Primero que todo. Gracias por tan geniales tutoriales.
Lo realicé, pero me sucede el mismo caso, aparece las
imagenes cortadas o con mal desplazamiento, no se si haya
que edfinir algun tamaño.
PD: La web la monté de prueba. Sólo es el inicio.
Hola Alexander, cuando hagas tu diseño quitale todos los rellenos y margenes a tus secciones porque fullpage.js se encarga de estirar automáticamente el alto de la página.
Hello Oscar. Thanks for this tutorial. works perfect, but i have little problem.
1. when scrolling down and then up content changing position and why i dont know…
2. i use number counter and its not working in my theme
help me pls…
https://softberry4.cloudaccess.host/
http://test.upskill.at/divi-one-page/
this 2 website where is problem
Hello Giorgi. Thanks for the words.
1. I don’t see the problem you are talking about.
2. Unfortunately divi’s animation effects don’t work with Fullpage.js 🙁
Hola Oscar, he probado varias veces pero al instalarlo se bloquea el scroll de toda la página, temo que sea por usar un custom header/footer, puede ser esta la razón?
Gracias!
Hola Pedro qué tal, no tiene porque bloquearse el scroll amigo. Tal vez en el constructor visual se bloqueé pero al salirte del constructor tu página debe funcionar correctamente.
Hola Oscar, disculpa el retraso pero no vi la respuesta. Lo que me sucede es que una vez lo implemento se queda congelado en la primera sección y no deja ni hacer scroll ni muestra los bullets
Qué raro. Me gustaría ver tu sitio o la página donde tienes el ejercicio, quiero inspeccionarlo y ver que sucede.
Oscar, perdona lo preguntón! Cuando uso anclajes en la pagina, todo lo anterior al salto se borra. Hay forma de corregirlo?
Me pasas el enlace a tu sitio, quiero verlo para saber que sucede.
el sitio que estoy probando es: lulamarula.com/home es el mismo que te comente en el comentario 1
Hola Oscar, gracias por el tutorial.
Implementé todo según tus instrucciones y no me funciona, y en la cosola del inspector me reporta lo siguiente:
http://www.indigointeractivo.com/wp-content/uploads/2020/04/muestra.png
Espero puedas ayudarme, gracias!
Hola Julián, el mensaje del inspector sale porque estamos usando la versión free de fullpage, no tenemos una clave api pero aún con ese mensaje te debe funcionar si sigues los pasos correctos. ¿Tienes el ejercicio en línea? Le podría dar un vistazo
Hola Oscar, sigo tus tutoriales que son muy buenos e intentado mezclar los conocimientos que aportas realizando así una página web de presentación empresarial inspirado en todos tus videos.
Mi duda es que realicé Flip Cards pero al momento de colocar el desplazamiento vertical no se aprecian todos los Flips montándose uno encima del otro donde al menos uno de tres si se alcanza a ver.
Te agradezco de antemano por la ayuda 😉
Hola creo que he respondido tu comentario en youtube o por mensaje, no recuerdo donde me escribiste. Espero y con divi supreme hayas logrado que funcionarán los flip cards. Un abrazo
Hola Oscar, a mi me tira problemas, no me lo carga al poner la ultima funcion en el sitio,TypeError: $(…).fullpage is not a function ese es el error que me tira la consola, el sitio es http://www.snaphouse.uy
Matías tu página no me carga 🙁 se queda cargando y no puedo entrar para ver el problema que tienes con fullpage
Ahora le quite el script ya puedes verla a ver cual es el problema
Buenas tardes Oscar, gracias por el tutorial funciona bien, pero tengo el problema al poner una cabecera personalizada no funciona el tutorial o donde pongo los codigo iniciales, gracias y espero tu respuesta
Hola Félix qué tal, disculpa que te esté respondiendo hasta ahora, no había revisado los comentarios ya que estuve metido en la creación de mi nuevo curso. Para colocar una sección de menú o pie de página a dicha sección le tienes que agregar estas clases: » section fp-auto-height »
Inténtalo y me comentas como te va 🙂
Que tal Titán!!, A mí no me carga la página con el último código, se queda la rueda cargando, le quieto ese código y carga, se lo pongo y no carga, no sé cual será el problema.
Hola Javi qué tal. Puedo ver el ejercicio? Quiero revisar la consola para ver que problemas arroja. ¿O ni si quiera te deja guardar?
Hola Oscar
Hice todos los pasos y me funciona y queda genial. Solo tengo un problema: estoy tratando de hacer una One Page, así que si le doy scroll está bien, pero cuando le doy a la sección que deseo usando el enlace que llama al identiificador CSS en la primera sección, luego no me deja ir a la primera sección, sino que toma la sección a la que fue como si fuera la primera.
Chequea: handmadetrend.com
Dale click a Bolsos o a Accesorios y luego intenta subir y no se puede volver a esa sección.
Ayúdame porfa!!
Hola Sebastian en el código jquery donde dice «opciones aquí» coloca esto:
anchors: [‘bolsos’, ‘accesorios’, ‘vestidos’]
Me comentas si te funcionó o no.
Hola Oscar, gracias por el post. Todo me funciona perfectamente excepto que el footer no tiene una altura especifica y el scroll se vuelve infinito hacia abajo. ¿Cómo podría solucionarlo?
Hola Iñgo, al footer intenta colocar este nombre de clase: » section fp-auto-height » Sí es que lo estás haciendo con el generador de temas. Sí no envíame tu sitio para que te diga como vas a insertar esas clases al footer.
Hola Oscar!
Sabes porqué puede ser que al insertar texto en una section, cuando haces scrolldown y después vuelves a la section, el contenido cambia de posición. Se va un poquito más arriba…
Hola Román, ¿estás utilizando márgenes o rellenos en las secciones? Sí es así intenta quitárselos porque por defecto fullpage coloca a altura completa tu sección.
Muy bueno Oscar, me funcionó. Una consulta, como hago para que no me funcione en movil
Gracias Lalo. Para desactivarlo de cierta resolución hacía abajo agrega esta línea en las opciones del fragmento:
responsiveWidth: 768,
Obviamente puedes cambiar el valor.
Y en que parte del codigo debemos añadir esta opcion?
Muchas gracias por sus textos y ayudas
En el código jquery para inicializar la librería, abajo de estos:
//options here
scrollingSpeed: 1000,
navigation: true,
slidesNavigation: true,
responsiveWidth: 768
Cualquier duda, me contactas.
Saludos Ramon.
Hola Oscar.
Gracias por el tutorial.
Estoy teniendo un problemilla que otras personas te comentaron más arriba.
El contenido de las secciones se mueve de sitio. He visto que el problema proviene de que fullpage hace la sección más grande que el viewport, entonces solo te muestra una parte de la sección (cuando vas hacia abajo te muestra la parte superior y cuando vas hacia arriba te muestra la parte inferior).
Las secciones no tienen sizing definido.
He probado añadiendole fp-auto-height y a dichas secciones darle un min-height de 100%,
he probado desactivando css3 para ver si con js lo hacía correctamente, he probado añadiendole fitToSection y también indicandole el menu y el footer como fixedElements por si acaso interferían, nada de esto funciona.
También probé quitandole otro plugin que uso (slick carousel) por si interferian pero nada.
No sé si podrías orientarme un poco en cuanto a la cuestión porque ya no sé que probar.
El sitio web en cuestión es http://www.giviti.com/wordpress/inicio
Muchisimas gracias por tu ayuda!
Hola Alvaro qué tal, no me carga el sitio para entrar a revisarlo amigo. Pero puedes intentar con este fragmento en CSS Personalizado a ver si te soluciona el problema:
html.fp-enabled, .fp-enabled body {
height: 100% !important;
}
Gracias por la rápida respuesta. Que raro que no te cargue la página web.
Igual http://giviti.com/wordpress/inicio si que te cargue.
Añadí el custom css que me indicas pero sigue ocurriendo lo mismo.
Es como si al cargar la página lo hiciese bien y luego al poco rato lo ensanchara (no sé si es cuando acaba de renderizar o que…)
Encontré el por qué, y es que el atributo top que utiliza fullpage.js para posicionar el viewport, no sé por qué lo está calculando mal y por ejemplo cuando subo a la primera sección, top se queda en -198px en lugar de 0px como debería ser.
¿Porque crees que puede estar ocurriendo esto?
La verdad desconozco el problema, he entrado a tu sitio y lo veo bien. En los comentarios del video en youtube alguien tenía un problema similiar y ha utilizado:
.et_pb_section {
padding: 0;
}
Solucionó el problema!!!
Muchas gracias de verdad!
Genial me alegra saber que lo has logrado 🙂
No funcionó para la señora
¿No pudiste implementarlo Isma?
implementado de la misma manera pero no funcionó
Si tienes el ejercicio en línea podría revisarlo para ver que es lo que pasa. Saludos
Sí, lo hice en línea. Intenté con un código diferente ahora pero no funciona lo suficientemente bien. aqui esta el link. https://vasanda.com/landing-new/
Hola Isma se ve bien, ¿Estás usando fullpage? O es la navegación por puntos por defecto de divi?
Estoy usando la navegación predeterminada de divi con algún código js personalizado. Fullpage sigue sin funcionar
Hola Isma
Como implementas esa navegación por defecto de divi?
Gracias!!
Buenos dias ISMA
Como dejas ese menu y pie fijos en los scrolling de FULL PAGE?
Saludos
Me parece que él ha optado por la navegación vertical que viene con divi por defecto y tanto el header cómo el pie los ha hecho con el generador de temas y los ha fijado con position: fixed o puesto fijo que viene en las opciones de cada sección / avanzado / puesto…
Hola, cómo conseguiste esto? tengo la misma duda. Quiero tener el scroll full page pero mantener fijo mi menú personalizado al hacer scroll.
Hola!
Excelente post, tengo un problemilla … con un custom header (creado en el theme builder de divi) no me funciona el js, me sale algo como esto en la consola.
Uncaught TypeError: Cannot read property ‘parentNode’ of undefined
Hola qué tal. ¿Qué versión de la librería fullpage estás utilizando? ¿Tienes el sitio en línea para que lo pueda revisar?
No la tenemos online por que no esta para nada maquetada, nos queriamos basar en este plugin para eso.
Te paso un enlace privado a ver que tal?
El plugin es el 3.0.9
Sí puedes enviarme el enlace a mi correo o por messenger: https://m.me/ovdivi
Hola buenas tardes.
He hecho el paso a paso según el vídeo de YouTube, y no me funcionó. Te agradezco si me puedes ayudar.
Creo que tú me escribiste por facebook. Voy a revisar que sucede. Saludos.
Hola, tengo un problema con el scroll en divi. Cuando vuelvo de otra página me gustaría que al volver a la sección en concreto no hiciese scroll si no que fuese directamente a la sección. Es una sección que está muy abajo y el efecto de pasar por toda la página no queda muy bien.
Muchas gracias
Hola qué tal francisco. Me puedes pasar la url de tu sitio para saber exactamente a que te refieres y poder darte una mano 🙂
Hola,
Excusar para mi español.
No funciona con videos de fondo y parallax.
¿Hay alguna forma de que funcione?
Y también: mis títulos desaparecen cuando agrego una sección,
¿Cómo puedo solucionar estos problemos?
Muchas gracias
Hola Julien, no te preocupes.
Con la opción parallax de divi no funciona 🙁
Con videos de fondo si debe ser compatible. Si tus títulos tienen un efecto de animación no funcionará, debes desactivar las animaciones.
Hola Oscar quisiera saber si es posible agregar un menú que de acuerdo al elemento me lleve a una de las secciones, estoy intentando hacerlo con etiquetas css para llamar a la sección pero al clicar en los elementos del menú no hacen nada
Hola Martin, lamentablemente no es posible con los enlaces ancla de divi. Pero puedes ver este hilo, allí dan la solución para implementar los enlaces ancla con fullpage.js
hola oscar, podrías por favor guiarme para utilizar el data menuanchor para hacer el menú de las secciones según la documentación
Hola Oscar, quiero posicionar los módulos dentro de cada sección, pero veo que todos los elementos que pongo me los distribuye verticalmente, no soy capaz de colocar un módulo en una posición determinada. Gracias
Hola Juan, a ver compárteme el enlace, vamos a ver lo que comentas
Hola Óscar, el problema que tenía es que todos los módulos que ponía en cada sección me los distribuía desde el centro de la sección en vertical, hacia arriba y hacia abajo. Lo he solucionado posicionando los módulos superiores con:
display: block;
margin: 0 auto;
position: absolute;
bottom: (tamaño)px;
y los inferiores con:
display: block;
margin: 0 auto;
position: absolute;
bottom: (tamaño)px;
No sé si será lo más correcto.
La web que tengo en construcción es: https://samitiersports.com/
Gracias
Por defecto fullpage te distribuye de esa manera el contenido de cada sección.
Fullpage viene con una propiedad para deshabilitar el centrado en vertical, es esta: verticalCentered: false,
Puedes probar colocando esa propiedad a ver si funciona, si así cómo lo tienes te ha dado resultados puedes dejarlo también así 🙂
Gracias Óscar, lo probaré de todas formas. Saludos
Hola, estuve siguiendo el tutorial y me sale el error en la consola:
‘jquery.min.js?ver=3.5.1:2 Uncaught TypeError: Cannot read property ‘parentNode’ of undefined’
https://demo.casaverdeinmobiliaria.com/nuestra-experiencia/
aqui es donde estoy intentando implementar el efecto FullPage.
Agradecido por tu aporte a la comunidad.
Hola Jorge, vi tu mensaje por messenger pero veo que todo funciona correctamente. Seguramente ya lo lograste solucionar 🙂
Hola Oscar, ha sido muy grato encontrar tu video y este post, y sobre todo, poder aprender de otras cosas que no esperaba. No soy programador, pero me ha servido mucho.
Tengo algunas preguntas:
¿Cuál es la diferencia entre pagarlo o no?
Mi intención es lograr que se vea así https://storytravelers.com, y he encontrado que tienen una extensión de parallax. Mi pregunta va en lograr ese efecto Ken Burns en la foto que aparece debajo. ¿Sabes cómo se podría lograr? Muchas gracias!
Hola qué tal José, me da gusto que este tutorial te esté aportando, de eso se trata.
Fullpage.js es gratis pero el efecto que lograrás es cómo lo logramos en este tutorial, si quieres crear otro tipo de efectos debes comprar las extensiones dependiendo la funcionalidad que desees lograr.
Para realizar el efecto parecido al ejemplo que me compartes, se usa esta extensión de pago.
El efecto al cargar cada slider seguramente lo lograron con otra librería, pero no viene incluido con fullpage.
Hola querido amigo Oscar, eso quiere decir que con la versión de pago si podremos tener al menos el efecto parallax asi tengamos divi? insisto en ello ya que la importancia es mantenernos en divi y lograr tales efectos o el de la extension q tambien tiene Idriago de Cards: o por lo menos saber si requiriendo tus servicios y adquiriendo la extensión de pago logremos obtener dichos efectos y alguna q otra animación?
Hola Larry, cualquier extensión de fullpage se puede integrar con divi, así que la extensión parallax de fullpage se puede implementar con divi sin problema.
Si tuvieras problemas o dudas con la integración te puedes poner en contacto conmigo y con gusto les brindo el servicio 🙂
Gracias, Oscar,
Revisé PagePiling y es exactamente lo que estoy buscando junto con algunas cosas más que encontré. Lo malo es que no funciona de la misma manera con tu tutorial y me estoy quemando la cabeza con mi falta de experiencia. ¿Tienes algún recurso que me aconsejas para aprender a usarlo?
Muchísimas gracias
Hola José, no tengo un recurso como tal, pero puedes escribirme por facebook y con gusto vemos la forma de implementarlo.
hola, cuando activo la opción ya no se muestra mi footer
Hola Sofia, ¿Cuándo activas que opción?
Hola Oscar, ya me funciona el full page pero quiero que mi menú (es personalizado) tenga posición fija con el scroll. He probado en puesto, con sticky y con position:fixed; y no me funciona ninguno.
Además mi footer creado en el generador de temas tampoco aparece.
Hola Ana veo que me escribiste por youtube y messenger, te he respondido por este último.
Saludos.
Hola Oscar, Mucho Gracias por este tutorial, pero tengo lo mismo problemo que Ana, (personalizado global menu descanso fullpage.js)
¿Podría tener la solución?
French here sorry for sketchy Spanish, english version :
Hi Oscar, Thanks a lot for the tutorial, I’ve got the same problem as Ana cited above, I have a custom header made in divi theme builder, and it is stopping fullpage from working, I’ve tried to remove my menu and it works, so it’s clearly were the problem comes from.
If you have a lead to follow I’m all ears !
Thanks man great content !
Hola, cuando se usa el generador de temas debes colocar el siguiente código así:
$( «#et-main-area .et_builder_inner_content» ).attr( «id», «fullpage» );
Ay Dios mío ! Muchas gracias Oscar !
Busqué una solución para esto durante dos dias !
Te bendigo, puedes encontrar qué estás buscando 🙂
Hola Oscar, cómo estás?
Gracias por el tutorial, es genial!
Tengo una pregunta, estaba integrado un fixed header que cambia cuando hago el scroll hacia abajo. El tema es que el Header está creado en el Divi Theme Builder y aplicado como un header global. Cuando activo el fullpage.js el cambio de header se pierde. Entiendo que si estoy trayendo elementos del generador de temas debería implementar este código que le respondiste a Baguettas, pero no pude resolverlo. Podrías darme una mano, por favor? Gracias!
Hola Gonza, me puedes compartir la url de tu ejercicio para inspeccionar que puede estar sucediendo.
Un abrazo.
Buenos días Oscar
El tutorial me funcionó a la perfección, pero me gustaría que el desplazamiento se realizase haciendo click en cualquier parte de la página en lugar de haciendo scroll, ¿crees que sería posible?
Muchas gracias de antemano.
No sé si sea posible Samuel, este tutorial lo hemos hecho con Fullpage.js, puedes darle un vistazo a la documentación a ver si es posible lo que deseas.
Hola Oscar! Gracias por tu respuesta.
La parte del cambio en el header la puse en suspenso por el momento porque me di cuenta de algo que me está complicando más. Tengo el menú global creado en el Constructor de Temas. Cuando hago scroll hacia abajo los elementos se centran bien y cuando lo hago hacia arriba quedan tapados por el header. Las sections no tienen margenes ni paddings (algunas tienen padding 0, puede estar afectando esto?), chequee las rows y todo pero no pude resolverlo.
Podrías darme una mano con esto porfa?
Las urls son
https://luke.com.ar/dev/hima/inicio/
https://luke.com.ar/dev/hima/
Yo veo todo bien en los dos enlaces, no veo el problema que me estás comentando. Veo todo centrado correctamente al desplazarme hacia abajo y al desplazarme hacia arriba.
Hola Oscar,
Soy suscriptor tuyo y me encanta tu trabajo. Aprendo muchísimo.
Tengo un problema con esta librería y los espacios que me deja abajo y arriba. No sé que hacer para que no se vean esos espacios. Además cuando hago scroll en mas de una sección y luego vuelvo a subir no me encuadra la sección.
Por favor podrías decirme que puedo hacer?
Hola Carlos, intenta colocando este código CSS en el personalizador de temas > CSS Adicional:
html.fp-enabled, .fp-enabled body { height: 100% !important; }Hola Óscar, muchas gracias por el tutorial.
¿Sabrías cómo hacer que funcione en una plantilla «Blank page»? Es decir, una página sin menús…
Muchas gracias y saludos,
Bueno, he podido hacer desaparecer elementos de la página y me puede valer el resultado.
Lo que si me gustaría sería cambiar el estilo de las flechas de navegación horizontal. Me gustan estas que aparecen aquí. https://codepen.io/fixcl/pen/Fkcot
O también me valdrían las que aparecen en la página 2 de fullpage
¿Me puedes dar alguna pista de cómo habría que hacerlo?
Muchas gracias Óscar!
Te dejo el sitio con la prueba:
twey.es/pruebaexpo
Deberías darle estilos a las flechas a través de su clase.
Por ejemplo las flechas de fullpage tienen estás clases:
.fp-controlArrow.fp-next
.fp-controlArrow fp-next
Para ocultar el menú y pie de página de la página solamente debes entrar a «Editar la página» y en atributos de la página ponerla como Blank Page.
Hola Óscar, no me debí explicar bien. La cuestión es que si le pongo de plantilla Blank page la función fullpage no me funciona. ¿Sabes por qué puede ser?
muchas gracias y saludos,
Qué raro, ¿Cuál es el link de tu web?
Hola Óscar, ¿Cómo hago para que se visualice el footer que realice con el generador de temas?
Ya coloque la clase ” section fp-auto-height ” que misionaste en uno de los comentarios , pero no me fusiona y sigue sin visualizarse.
Desde ya, muchas gracias!
Hola DaiDen, ¿No tienes tu página como blank page? Compárteme la url de tu ejercicio y lo reviso 🙂
Gracias, ya pude solucionarlo. Quería saber si se puede colocar un menú a este tipo de paginas, e intentado hacerlo y no me redirige bien a las secciones linckeadas.
Hola Daiana, para anclar tus secciones con el menú solo necesitas usar la propiedad anchors en el código inicializador, algo así:
anchors: [‘section1’, ‘section2’, ‘section3’, ‘section4’]
Y en los enlaces colocar de url el nombre del anchor al cual quieres enlazar: #section1
Buenos días,
He seguido las instrucciones del tutorial y sólo consigo que funcione con la plantilla por defecto. En el momento que cambio a «Blank Page», deja de funcionar.
¿Podrías decirme cómo solucionarlo?
El link de la página es https://celinde.net/prueba/
Muchas gracias de antemano.
Hola David, estoy revisando el enlace de prueba y funciona perfecto el desplazamiento fullpage.
Buenos días,
Gracias por tu respuesta. Funciona, sí, pero porque estoy usando la plantilla por defecto y le he ocultado cabecera y pie vía CSS. Si cambio a «Blank Page», deja de funcionar.
Saludos.
Un tutorial genial. Muchas gracias.
¿Se podría deshabilitar completamente en la versión móvil?
El contenido es más grande que la pantalla y es molesto. Lo ideal sería tenerlo sólo habilitado en la versión de escritorio, y en móvil que tenga un scroll normal.
Muchas gracias por todo.
Hola Dani, toda la razón, es mejor solo tenerlo en escritorio. Para deshabilitarlo en móvil aquí tienes una guía del propio autor de la librería.
Hola! Me ha sido muy útil, pero yo al acabar y ver la pagina me corta las imágenes, además yo quería este efecto solo para 5 secciones que tenía en una pestaña de mi pagina donde habían más cosas (secciones)… Pero al hacerlo me dejo las secciones como te digo cortadas, y además no aparecen las demás secciones que no tienen el efecto….
Agradezco tu ayuda!
Hola Stephanie, compárteme la url de tu web para saber a que te refieres y ver que puedo hacer para ayudarte.
Saludos.
Me pasa igual
Buenas tardes Oscar que tal?
tengo un inconveniente.
tengo un modal que se abre al dar click a una imagen, cuando se abre el modal tiene su scroll para recorrer la imagen
pero al hacer el scroll de la imagen al mismo tiempo se mueve el scroll del body
no sabes como hacer para que solamente mientras tenga abierto el modal funcione su scroll y se inhabilite el scroll del body de la pagina?
saludos
Hola Alejandro, podría hacerse con código personalizado amigo. Si gustas puedes contratar uno de mis servicios y lo puedo hacer por ti amigo 🙂
Hola Oscar. Me encantan vuestros contenidos, interesantes, prácticos y muy didácticos. Desgraciadamente soy incapaz de que funcione el efecto en mi pagina. Lo he intentado como me indicas y imposible, ¿ puede haber incompatibilidades con versiones posteriores de divi?. Bueno, ya me comentas.
Oscar, revisando, encuentro una cosa curiosa, el scroll funciona cuando voy a la personalización del tema, pero no cuando salgo de ella ¿ por qué?
Hola David qué tal, muchas gracias, lamento los inconvenientes que estás teniendo pero puedes hacer estás dos cosas:
1. Desactivar la generación de CSS Estático de divi desde Divi > Opciones del tema > Constructor > Avanzado…
2. Desactivar la opción «Defer jQuery And jQuery Migrate» desde Divi > Opciones del tema > General > Performance…
A ver si eso ayuda 😉
Hola Oscar, soy suscriptor de tus tutoriales Premium ,los cuales recomiendo a todo el mundo. Estoy haciendo pruebas con este efecto y me pasa algo muy curioso, si entro en DIVI>Personalización de temas puedo verlo sin problemas y el efecto se ejecuta perfectamente, pero si lo hago desde la url no se muestra ¿ sabes a que puede ser debido?. He eliminado la cache y desativado en la opciones de Divi la generación de CSS Estatico.
Quedo a la espera de tus comentarios. Gracias por anticipado y saludos.
Hola David qué tal, pueden ser las opciones de Divi > Performance, desactiva todas y a ver si eso ayuda.
Si al desactivar todas el efecto funciona correctamente entonces debes ir habilitando opción por opción hasta encontrar la opción o opciones que causan el conflicto para posteriormente dejarlas desactivadas.
Saludos.
Mil gracias, efectivamente el problema estaba ahí, en la configuración. Tema solucionado.
Buenas escribo porque a modo responsive la web no se me ven bien las secciones, se me quedan cortadas.
He aplicado responsiveWidth pero se me quita del modo escritorio también..
Gracias
Hola Paula ¿Cuál es el link de tu web?
He intentado de todas las formas y no pude hacer el scroll no me sale nada me podrias ayudar por favor. Esta en línea
Hola Gadiel, es importante que uses esta configuración en Divi Performance…
Oscar Como estas?… tengo un gran problema con mi web. Si logras ver. tengo todo modulado correctamente (Tengo tambien secciones separadas (Algunas Para PC y otras Para Telefono)) Pero cuando aplico este efecto todo se descontrola y la seccion 1 y 2 quedan igual, luego salta a la 3 pero no se ve la imagen que esta en el medio!, y asi sucesivamente con un monton de errores que aparecen en el camino. A que se debe esto? y como se soluciona?
anexo link: https://ordinemconsultoragrafica.com/cabaret/inicio/
Creo que lo estuvimos viendo por el soporte, perdona por leerte hasta ahora por aquí.
Un abrazo Eduardo.
Buenas Oscar!
No consigo que me funcione, he seguido todos los pasos y nada… ¿me podrias ayudar por favor?
Hola Amaia, ¿cuál es el enlace a tu página?
Hola Oscar, ya esta, ya lo consegui. Gracias.
Excelente Amaia.
Saludos
Hola Oscar! gracias por tus videos.
Podrias ayudarme porque no logro que funcione.
https://www.gonzaloissa.com/index/
Hola Damian, ¿Si estás utilizando la configuración recomendada de divi performance?
Sos un genio amigo, a fecha de hoy seguís solucionando las dudas, increíble.
Un abrazo muy grande!
Hola Tomás, muchas gracias.
Todos los días respondo sus mensajes. Los comentarios de aquí los respondo cada semana pero es por la cantidad de mensajes que me llegan por el chat de soporte premium, obviamente tengo que darles prioridad a los suscriptores. Pero tanto los comentarios de aquí como de youtube los seguimos y seguiremos respondiendo 🙂
Un abrazo Tomás.
oscar como estas? te hago una consulta, estoy usando divi y se me desactivan los modulos que contienen animaciones, como podria usarlas, o adaptarlas para que si las tenga? capaz usando otra libreria , porque probe creando las animaciones con css y tampoco las activa
Hola Facundo, existe otra librería que se llama scrollify. Esa librería la implementamos en estos tutoriales premium:
– Tutorial 01
– Tutorial 02
Hola buenas tardes Oscar, anteriormente me suscribí y seguí este tutorial y me funciono perfectamente es sencillo y explicas muy bien, pero quise volver a implementarlo y no me funciona, ni con divi 4 ni 5, ni cambiando por todas las versiones en el codigo. Ya chequee lo de divi perfomance y nada. Veo que alvaro trigo anuncio un plugin pago para divi, sera que ahora no se puede utilizar? estaba pensando suscribirme de nuevo por varios tutoriales como el de preloader o el de «Cómo revelar secciones (pop up) con un efecto de animación gsap al hacer clic en un botón en divi sin plugins» en el que por cierto tenía otra duda, me gusta mucho ese tutorial pero tengo cliente que en celular le dan para atras con el gesto en vez del botón regresar (creen estar en una app), vi que driblee al darle click a un proyecto y luego hacia atras si te regresa sin necesidad de darle a la x, veo que cambia la url, de casualidad podrías hacer un tutorial así o te puedo pagar por ello? muchas gracias de todas formas por tu increible trabajo.
Hola, ¿qué tal, Sebastián?
No es necesario estar suscrito para poder ver este tutorial; lo tengo disponible en mi canal de YouTube y sigue siendo completamente funcional. Solo es cuestión de ajustar algunas configuraciones en Divi Performance para que el código funcione correctamente. Si ya revisaste lo de Divi Performance y aún no funciona, es posible que algún plugin de caché esté causando el conflicto. Te sugiero revisarlo para descartar esa posibilidad.
Con respecto al plugin de Divi de Álvaro Trigo, la verdad es que no lo conocía, así que no lo he probado. Sin embargo, no creo que esa sea la razón por la que no te está funcionando. Este ejercicio debería seguir operando correctamente, pero de todas formas lo voy a revisar para asegurarme.
Sobre la funcionalidad del otro tutorial, entiendo perfectamente el comportamiento que describes. Esto sucede porque el modal (popup) realmente se abre en la misma página, por lo que el móvil no lo detecta como una nueva página. Por eso, al intentar regresar, el navegador te lleva a la página anterior, ya que no se ha cargado una nueva. Hacer que esto funcione como esperas es posible, pero con WordPress resulta algo más complicado, ya que no permite crear páginas con componentes dinámicos de la misma manera que otros lenguajes de programación o sitios desarrollados desde cero, donde es más fácil recargar solo el contenido sin afectar el header, footer u otros elementos.
Voy a considerar hacer un tutorial sobre este tema para ver si se puede implementar algo similar.
Gracias por tu comentario, Sebastián. Siempre es un gusto responder tus dudas y ayudarte en lo que pueda.
¡Un abrazo!