FullPage for Gutenberg

When normal scrolling doesn't let your content breathe

A homepage with one message, one image and one call to action often ends up as a long page where visitors get lost halfway. Portfolios, product presentations and event landing pages need the opposite: each screen says one thing, and the user moves from one to the next without hunting. FullPage for Gutenberg turns your blocks into sections that snap into place as you scroll, with the block editor as your only working environment.

Sections, slides and scrolling in both directions

Each section fills the screen, and you can add horizontal slides inside it. That lets you choose a vertical slider, a horizontal one or a mix of both. With continuous scrolling, after the last section the visitor returns to the first with no jump.

Some details matter when the content is real and not a demo:

• Sections with inner scrolling: if the content doesn't fit the screen, an inner bar appears instead of cutting it off.
• Sections that aren't full screen: useful for a footer.
• Elements with their own scroll: you can specify which ones (a modal, a list) scroll without triggering the section change.
• Synced menu: link sections to menu items and change their style depending on the active section.

Fine control over behavior

The plugin offers more than 50 configuration options. Among them: 37 easing animations, an optional scrollbar, vertical or horizontal navigation bullets, URL history so the back and forward buttons jump between sections, and direct links to specific sections or slides. There is also lazy loading of images, iframes and videos when leaving a section, and automatic play or pause of audio and video when entering or leaving one.

If you work with JavaScript, you get methods and callbacks, and the plugin adds CSS classes showing the active section, the active slide or the responsive mode. It is keyboard accessible and doesn't depend on jQuery.

What to do on mobile and with old browsers

A snap effect on a phone with a lot of text can be a nightmare. That's why there is a responsive mode: you turn off section scrolling or fixed height below certain dimensions, and the page goes back to behaving normally. It works with any theme and in the main browsers, including Internet Explorer 11. At around 40 Kb it is lightweight, and it uses hardware acceleration when possible.

Parallax, mouse wheel horizontal scroll and drag are paid extensions

Here is what the base plugin already solves and what you'll have to cover separately:

• Included: sections and slides, vertical and horizontal scroll, navigation bullets, continuous vertical scroll, responsive mode, inner scrolling, URL history.
• Separate extension: parallax backgrounds, horizontal scroll with the mouse wheel or trackpad, drag and swipe, percentage-based offset sections (to show part of the next one), fade effect, continuous horizontal scroll, interlocked slides and slider reset.
• Up to you: the design of each screen, text that reads well on mobile and testing with your real content.

If your idea for the page includes fades or parallax, check it in the demo first: they aren't in the base plugin.

Frequently asked questions about FullPage for Gutenberg

Do I need another page builder?

No, it is designed for the WordPress block editor.

Can I put a lot of content in one section?

Yes, if it doesn't fit the screen, that section gets inner scrolling.

Can it be turned off on mobile?

Yes, with the responsive options you choose from which width or height the effect is disabled.

Is it good for a whole website?

It feels more natural on landing pages, portfolios and presentations. For a site with long text, normal scrolling usually works better.