FullPage for Gutenberg

Cuando el scroll normal no deja respirar tu contenido

Una portada con un mensaje, una imagen y una llamada a la acción suele acabar en una página larga donde el visitante se pierde a mitad de camino. Y los portfolios, las presentaciones de producto o las landings de evento piden justo lo contrario: que cada pantalla diga una sola cosa y que el usuario pase de una a otra sin buscar. FullPage for Gutenberg convierte tus bloques en secciones que se encajan al hacer scroll, con el editor de bloques como único entorno de trabajo.

Secciones, diapositivas y scroll en las dos direcciones

Cada sección ocupa la pantalla y puedes añadir diapositivas horizontales dentro de ella. Así eliges entre un deslizador vertical, uno horizontal o una mezcla de ambos. Con el scroll continuo, tras la última sección el visitante vuelve a la primera sin saltos.

Hay detalles que importan cuando el contenido es real y no una demo:

• Secciones con scroll interno: si el contenido no cabe en la pantalla, aparece una barra interior en lugar de cortarlo.
• Secciones que no son de pantalla completa: útiles para un pie de página.
• Elementos con scroll propio: puedes indicar cuáles (un modal, un listado) se desplazan sin disparar el cambio de sección.
• Menú sincronizado: enlaza secciones con los elementos del menú y cambia su estilo según la sección activa.

Control fino sobre el comportamiento

El plugin ofrece más de 50 opciones de configuración. Entre ellas: 37 animaciones de easing, barra de scroll opcional, puntos de navegación verticales u horizontales, historial de URL para que los botones atrás y adelante salten de sección y enlaces directos a una sección o diapositiva concretas. También hay carga diferida de imágenes, iframes y vídeos al salir de una sección, y reproducción o pausa automática de audio y vídeo al entrar o salir de ella.

Si manejas JavaScript, tienes acceso a métodos y callbacks, y el plugin añade clases CSS que indican la sección activa, la diapositiva activa o el modo responsive. Es accesible con teclado y no depende de jQuery.

Qué hacer en móvil y con navegadores antiguos

Un efecto de snap en un móvil con mucho texto puede ser una pesadilla. Por eso existe el modo responsive: desactivas el scroll por secciones o la altura fija por debajo de ciertas dimensiones, y la página vuelve a comportarse de forma normal. Funciona con cualquier theme y en los navegadores principales, incluido Internet Explorer 11. Con unos 40 Kb es ligero, y usa aceleración por hardware cuando es posible.

Parallax, scroll horizontal con rueda y arrastrar son extensiones de pago

Esto es lo que ya resuelve el plugin base y lo que tendrás que cubrir aparte:

• Incluido: secciones y diapositivas, scroll vertical y horizontal, puntos de navegación, scroll continuo vertical, modo responsive, scroll interno, historial de URL.
• Extensión aparte: parallax en los fondos, scroll horizontal con rueda del ratón o trackpad, arrastrar y deslizar con el dedo, secciones con desplazamiento porcentual (para dejar ver parte de la siguiente), efecto de fundido, scroll horizontal continuo, diapositivas entrelazadas y reinicio de sliders.
• A tu cargo: el diseño de cada pantalla, el texto legible en móvil y las pruebas con tu contenido real.

Si tu idea de la página incluye fundidos o parallax, compruébalo antes en la demo: no vienen en la base.

Preguntas frecuentes sobre FullPage for Gutenberg

¿Necesito otro page builder?

No, está pensado para el editor de bloques de WordPress.

¿Puedo poner mucho contenido en una sección?

Sí, si no cabe en pantalla se activa el scroll interno de esa sección.

¿Se puede desactivar en móvil?

Sí, con las opciones responsive eliges a partir de qué ancho o alto se desactiva el efecto.

¿Sirve para una web entera?

Es más natural en landings, portfolios y presentaciones. Para una web con mucho texto largo, el scroll normal suele funcionar mejor.