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] https://www.youtube.com/watch?v=xv9Rj…
How to Use Elementor’s Custom Code Feature [PRO] https://www.youtube.com/watch?v=j6J-T…

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

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

Hey there, it’s Ash from Elementor.

1)Traditional websites have always scrolled vertically, but today we’re going to break the mould and teach you how to create a horizontal scrolling website.

2) In this advanced tips and tricks tutorial, we’ll first start with this vertically designed website for a Videographer and Director.

3) We’ll then apply some custom CSS code which will convert it to scroll horizontally instead.

4) After this, we’ll then add some custom JavaScript using the custom code feature, which will allow for smoother effects, as well as giving constraints for our responsive views

5) We’ll be using Elementor Pro to create this website and you will require an intermediate level of knowledge using Elementor to follow along with this tutorial. You will need to know how to create page templates and how to make adjustments using responsive mode. If you need to brush up on any of these aspects, we’ve provided some links to our recommendations in the description of this video.

So if you’re ready, let’s get started!
We’ll start by creating a new page in the Elementor editor and we’ll add in our own pre-made template first of all. You can add in your own pre-made template, insert one from the Elementor library or simply create one from scratch.

In our template the navigation and logo are fixed to the left hand side, and we also need to ensure our main content fills the entire height of the screen.

We’re going to use the Element Canvas page layout which provides a blank canvas for us to work with, meaning the themes header and footer will not show. This is important for our unique design as it does not follow the usual rules. We’ll change this by selecting the gear icon, and changing the page layout to ‘Elementor Canvas’.

Our next step is to hide our fixed header so that it is easier for us to navigate through our design and make the necessary changes required.

Open the navigator by typing CMD or CTL + I, and then select the ‘eye’ icon next to the header section to hide it.

We’ll now close the navigator and scroll down to preview our current vertically stacked sections.
Let’s create a new section from scratch to better understand how to set up each section for horizontal use. Add a new two column section, set it’s width…gap…and minimum height to 100vh to ensure it fills the entire height of the screen.
Let’s now populate the first column.

Drop a heading widget in…and type the text.

Now add the text editor widget…and add your content…change the alignment…and add some padding to the column.

Next, we’ll populate the second column.

We’ll add in an image widget and then choose our image from the media library.

Set the height…object fit…and then amend the width of the column.
Now it’s time to change the layout using css.

Let’s scroll back to the top of the page and then open the settings. Open the advanced tab and in the custom CSS area we are going to type the following…

We’ll first add the class name (.elementor-section-wrap) and then open the curly brackets.

Now type ‘display:inline-flex;

And close the curly brackets.

Please note that all custom code used in this tutorial is provided for you in the description below.

We are going to set the display of our main container of the sections which is .elementor-section-wrap as inline- flex. This will stack each section next to each other rather than vertically stacking towards down and stretch the container according to the section it contains horizontally. Then we will set each section’s width to 100vw so each section will look like a frame that will take up all the space in the viewport. –

As you can see, our sections are now positioned side by side, rather than on top of each other.

Next we’ll add the following CSS to ensure each section fills the width of the viewport.

Type the sector ‘.elementor-section’ followed by the opening curly brackets.

Then type width:100vw;

And close the curly brackets.

And finally we’ll add ‘overflow:hidden;’ to ensure nothing spills out of these sections.
Let’s now re-enable the header…we’ll give this section a class name…and then open up the page settings once again and add the following CSS to ensure our header remains the same size.
OK, we’ve made great progress so far, and now we’ll see what happens on other devices.

Open responsive mode and select the tablet view.

We would like the horizontal layout to be active only on the desktop, so we’ll need to create a media query.

A media query allows us to control specific aspects of the page on different screen sizes.

Now in the Custom CSS area, located in the page settings we’ll add the following media query.

This one tells the browser that if a screen size is 768px or less ( in other words tablet and mobile), then it should display each section vertically, instead of horizontally.

With this particular design, it provides a better user experience for the website to work this way.

Now that we’ve configured our design to work for all devices, it’s time to add some custom JavaScript to further ensure that all of our website visitors receive a flawless experience.

The method we currently have used with CSS works great if we scroll horizontally, but if a user is using a mouse wheel which only scrolls vertically, it could produce some unwanted results.

Save this design by clicking update and Let’s type CMD / CTL + E to open the Elementor finder, type dashboard and hold shift and select to open the Dashboard on a new tab.

Navigate your way to Elementor > Custom Code and select add new.

Name your file…select it’s location…and then add in your custom JavaScript. As mentioned, you’ll find this in the description below so you can simply copy and paste.

Set the display condition and publish your changes.

Animation – With this piece of javascript code we created a function where vertical scroll movement is translated into a horizontal scroll movement and applied this function only when the screen size is bigger than or equal to 770 pixels

If we now preview what we’ve created so far we can see some overscroll behaviours, so let’s jump back into the editor and fix this.

Open the custom CSS in the settings area and add the following CSS above our media query to control these behaviours.

Save your changes, reload the website and as you can see our overscroll behaviours have disappeared and our horizontal scrolling website is now complete.

Now you may be wondering what if we want to add a new section to the webpage or delete a section. There is a very simple way to disable this layout in the editor which will allow us to work in a traditional vertical layout format.

This design is missing a contact section. So let’s add one together.

First we are going to go back to the custom CSS in the page settings area.

Above all of the code we’ve previously written for the horizontal scroll, type: slash – star to disable the horizontal layout. To close the comment, type star – slash again at the end of the code portion you want to disable.
As you can see all of the code that is within this declaration has turned green, which means it has been commented out. In this state any code written between it will not have any effect on the webpage.

And as you can see our layout is now back to a vertical format.

Scroll down, and click on add template. We only need one section so SELECT blocks … and then select contact from categories.

This one seems to work well with our design. Click Insert.

Select section and and change the content width to full width, height to minimum height and set it to 100 viewport height.

We don’t need these social icons so let’s remove this widget.

And change the contact mail. Let’s not forget to ix it’s styling.

Alright.

Once you are done, go back to the page settings, custom CSS. Delete slash-star. As you can see our code has returned to its original colors indicating they are back to working.

Click update, and preview. And our new section has blended well with the existing design on the horizontal layout.

Perfect!
Today we learned how to change a vertical layout into horizontal using CSS & JavaScript. We learnt how to adjust the sections accordingly and change the scroll behaviours.

Horizontal scrolling websites really allow us to create some out of the box designs and push the boundaries of just what’s possible when using Elementor to create your website projects.

Share your horizontal scrolling websites with and feel free to ask any questions you may have in the comments below.

Thank you for watching, be sure to subscribe to our channel for amazing tips and tricks tutorials.