Create Horizontal Scroll in Elementor

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

Check Demo

How to setup a horizontal scroll page in Elementor

Video Tutorial

Step 1

Install fullPage.js plugin

Get fullPage.js

Trusted by the world's most innovative companies

Step 2

Open the Page Settings

Step 3

Under General Seettings, click on the fullPage.js Settings

Step 4

Enable fullPage.js

Step 5

Click on the + Icon and add an inner section

Step 6

Open the "Elementor Structure" panel

Step 7

Remove one column from the inner section

Step 8

Duplicate the inner section to create another horizontal slide

Step 9

Select the parent "Section" and enable "Has Horizontal Slides".
You can read more about it in the docs

(Optional) Step 10

(Optinal) If you want to be able to use the mouse wheel to slide right and left, open the page settings

(Optional) Step 11

Enable fullPage.js "Extensions"

(Optional) Step 12

(Optinal) Enable the "Scroll Horizontally" extension

Get fullPage.js

FAQs

How do I make Elementor 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 Elementor 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 Elementor?

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 Elementor can do

Join 35,306 Web Developers

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

Get fullPage.js!

Horizontal Scrolling websites built with fullPage.js for Elementor

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