How to Create a Horizontal Scrolling Website [Advanced PRO]

Video Description

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: How to Add Custom CSS in Elementor [PRO] https://www.youtube.com/watch?v=xv9RjJky720 How to Use Elementor’s Custom Code Feature [PRO] https://www.youtube.com/watch?v=j6J-TvEXGLY 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 ) { if ( event.deltaY !== 0 ) { window.scroll(window.scrollX + event.deltaY * 2, window.scrollY ); event.preventDefault(); } } const mediaQuery = window.matchMedia( '(min-width: 770px)' ); if ( mediaQuery.matches ) { window.addEventListener( 'wheel', replaceVerticalScrollByHorizontal ); } 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 👋🏼 Help us improve by answering this short survey: http://elemn.to/survey-time Don’t forget to subscribe to our channel! Get Elementor: https://elementor.com Get Elementor Pro: https://elementor.com/pro