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:
How to Add Custom CSS in Elementor [PRO] • How to Add Custom CSS in Elementor [PRO]
How to Use Elementor’s Custom Code Feature [PRO] • How to Use Elementor’s Custom Code Fe...
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
Watch video How to Create a Horizontal Scrolling Website [Advanced PRO] online without registration, duration hours minute second in high quality. This video was added by user Elementor 08 November 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 75,966 once and liked it 1.1 thousand people.