How to Create a Horizontal Scrolling Website [Advanced PRO]

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!

How to Add Custom CSS in Elementor [PRO]
How to Use Elementor’s Custom Code Feature [PRO]

CSS Code:

display: inline-flex;


width: 100px;

overflow-y: hidden;
overscroll-behavior-y: none;

@media (max-width:768px){
display: block;

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 );

const mediaQuery = window.matchMedia( ‘(min-width: 770px)’ );

if ( mediaQuery.matches ) {
window.addEventListener( ‘wheel’, replaceVerticalScrollByHorizontal );

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:

Don’t forget to subscribe to our channel!
Get Elementor:
Get Elementor Pro: