Create Horizontal Scroll in Gutenberg

Add a beautiful horizontal animation to your website and create a fully horizontal page in Gutenberg. No code needed!

Check Demo

How to setup a horizontal scroll page in Gutenberg

Video Tutorial

Step 1

Install fullPage.js plugin

Get fullPage.js

Trusted by the world's most innovative companies

Step 2

Add the fullPage.js Gutenberg block

Step 3

Enable fullPage.js - And get the Snap Scroll effect

Step 4

Click on "Add Section With Slides" underneath the Section 2.
And remove the 2 vertical sections created by default.

Step 5

Add content and style your horizontal slides with background colors or images.

(Optional) Step 6

(Optinal) If you want to be able to use the mouse wheel to slide right and left, click on the "fullPage.js for Gutenberg" block.
Then, open and enable the "Extensions" settings:

(Optional) Step 7

(Optinal) Enable the "Scroll Horizontally" extension

Get fullPage.js

FAQs

How do I make Gutenberg horizontal scroll faster?

To make the horizontal scrolling faster, you need to set the "Scrolling Speed" value, under the "Scrolling" section, to a lower number. For example, 500. (0.5 seconds)

How do I make Gutenberg horizontal snap slower and smoother?

To make the horizontal snap scrolling slower, you need to set the "Scrolling Speed" value, under the "Scrolling" section, to a higher number. For example, 2000. (2 seconds)

Can I add a timeline to the horizontal scroll?

Sure! You can add navigation bullets on the horizontal sections by enabling the "Slide Navigation" option.

Can I disable horizontal scroll on mobile in Gutenberg?

Yeap! You can turn horizontal slides into vertical sections by enabling:

1) The Responsive option and define a threshold in pixels.
2) The "Responsive Slides" extension.

Can I use a menu to navigate through the horizontal sections?

Yes you can! Just use the value of the anchor of each of the slides and add it to your menu links.

Discover what fullpage.js for Gutenberg can do

Join 35,306 Web Developers

Developers worldwide use fullPage.js for Gutenberg to save time, money, and create beautiful sites in a snap.

Get fullPage.js!

Horizontal Scrolling websites built with fullPage.js for Gutenberg

Check out these amazing websites using a scroll animation for horizontal sections.