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!

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{…