Horizontal Scroll Elementor Pro Tutorial
hello, I’m Kaycinho, The Digital Alchemist, and today, I’m going to show you how to create a horizontally scrolling website with Elementor Pro. WITHOUT any additional plugin.
Let’s give credit where it’s due: the code for this tutorial is based on a Codepen from Alvaro Trigo.
Horizontal Scroll Elementor Pro Tutorial
This tutorial is video based (check above).
Main CSS code (page settings level)
While editing your page with Elementor Pro, click on gear icon (bottom left corner of the editor page), then Advanced > Custom Css and paste the following code:
html {
scroll-behavior: smooth;
}
@media only screen and (min-width: 1025px) {
main {
overflow-x: hidden;
display: flex;
}
section {
min-width: 100vw!important;
min-height: 100vh!important;
}
}
JS Code
While editing your page with Elementor Pro, add an HTML Widget as the last element of the last column of the main section, and paste the following code:
<script type="text/javascript">
if (window.innerWidth > 1025) {
const scrollContainer = document.querySelector("main");
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});
} else {
}
</script>
Your turn!
Your turn!
I hope this tutorial will help you create a stunning website with Elementor Pro!
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help, and it doesn’t cost you anything!
Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here.
So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!
| 
