How to Create a Horizontal Scrolling Website [Advanced PRO]

In this tutorial we learn how to create a horizontal scrolling website by adding custom CSS and Javascript within Elementor. We’ll start with a vertically designed website, and will walk you through step by step how to transform it into a horizontal layout, whilst keeping the vertical display for the mobile & tablet devices.

This tutorial will cover:
✔︎ Creating sections which are suitable for a horizontal scrolling design
✔︎ How to change the page layout from vertical to horizontal using CSS
✔︎ How to add custom Javascript code via the custom code feature
✔︎ And much more!

IMPORTANT UPDATE

Using Elementor 3.6? If you're using Elementor 3.6 or above, Optimised DOM Output is activated by default which means you won't see the desired results as displayed in this video. To fix this, you have two options:

1. Disable Optimised DOM Output
2. Add this snippet of CSS to your page settings

selector .elementor {
display: inline-flex !important;
}

Links:

CSS Code:

.elementor-section-wrap{
display: inline-flex;
}

.elementor-section{
width:100vw;
}

.custom-width{
width: 100px;
}

body{
overflow-y: hidden;
overscroll-behavior-y: none;
}

@media (max-width:768px){
.elementor-section-wrap{
display: block;
}
body{
overflow-y:auto;
}
}

Javascript Code (remember to add the opening and closing script tags):

function replaceVerticalScrollByHorizontal( event ) {
}
}

}

Timestamps:
00:00 Introduction & overview
01:10 Get started
01:35 Using the canvas layout
01:55 Hide fixed header while editing
02:20 Create new section
03:30 Horizontal layouts explained
04:00 Add CSS to amend layout
04:50 Add CSS to fill viewport
05:50 Make amendments for responsive views
07:10 Add Javascript to control views per device
08:00 Fix overscroll behaviors
08:50 Comment out CSS to allow easy editing
09:45 See final results & recap

Don’t forget to subscribe to our channel!

[JRemyDeaton]

This video needs an updated version. So the "elementor-section-wrap" class doesn't live outside the Elementor editor. Meaning the first CSS rule will not work in a browser. You have to use the "elementor" class selector. Also, the JS code throws an error about preventDefault. But the biggest issue here is that most Elementor animations don't work once you apply the horizontal. It is weird that Elementor would put out a tutorial such as this when they don't have the option to trigger animations on a horizontal scroll.

[franktielemans]

8:55 You can select all code and press CTRL + / to comment/uncomment CSS.
Strange they didn't mention that.

More of this please! These are the type of tutorials I'm looking for 🤩

[JulieJohn]

Amazing, thanks so much for this! Really hoping to convince a client they NEED this for their site redesign!! 😍✨👌

[jamesgther]

I love your Tips & Tricks series Elementor. We really need these tricks! <3

[bySterling]

I wish these uniquely gorgeous designs used in many tutorials were available in our Pro demo import options! 🙏🏻💥⚡️

[parthosarkar]

Aweosome! We need more of such videos from Elementor!

[dots]

Fantastic tutorial. Looking forward to more of these. No need to install another plugin for this again.

[memieke]

Thanks a lot, exactly what I was looking for!

[____julia____]

Can't wait to try this! Great tutorial ❤️

[roryraghad]

Really helped me out, you're awesome!

[parveensultana]

Awesome explain, great tutorial thanks elementor.

[morizanova]

Cool tips . Would be awesome if in future this kind tutorial covering real world use like sites for independent comic publisher or storyteller. I believe that will be opening new Demography market for Elementor

[pixelharmonie-webdesign]

Awesome! Thank you (again)! Is there a simple way to scroll alternately horizontal and vertical? 🤗

[LudovicCharlier]

Wow, so great advanced tutorial, thank you! Is it compatible with the new "Scroll snap" feature ? Do you have a video tutorial to understand how you build the vertical menu like this ? It would be awesome that you share the template of the tutorial video to learn how you achieve that :)

[C-DynamicsClientChannel]

I tried half a dozen times following every step closely but nothing works.

[derekkimball]

Great tutorial! Question though. Is there a way to get scrolling effects to work? Since they're triggered by the top and bottom as opposed to left and right, they don't work on horizontal scroll using this method.

[ajax]

Great! Thanks for the tutorial. Is there options to enable ceratin section with horizontal scrolling also scroll vertically? Say if there's will be more text or content that would require more space to appear. May be as an option to make ceratin section in the frame to allow scroll it vertically. Please comment. Thank you.

[markushammerschlag]

Thanks for this nice tutorial.
Can you tell me please, what kind of font u re using in there? Looks amazing.
Thank you again

[sergiogarciagras]

Hello and first of all thank you for the tutorial! Could you please explain how you made the navbar inside the header? Thanks!

[olgaprokopenko]

Hello! Great tutorial as always, thank you very much! Question about video in the website, browsers are blocking all kind of videos on mobile and tablets. How do I go around it?