Get a nice looking horizontal page layout for the desktop version. Back to normal for tablets and mobiles.
To begin with, download and import the template
Entering $0 gets it to you for free. Or support my work with the amount of your choice!
Elementor Horizontal Page Layout Template
This download gets you the following template :
Elementor Horizontal Page Layout Template
Related tutorial : Easy Elementor Horizontal Scrolling Page Layout!
This will work right away with Elementor Pro. It works great with Elementor Free also, but you won't have the Nav element, and the social icons.
Then, verify that you have a full width page layout
This step is optional. Follow only if the design is not displaying fine for you.
Click on the gear icon in the lower left part of your screen. Then you will see the different page layouts available for you. They will differ depending on what theme you are using.
With Hello theme, Default works just fine.
After that, modify the code to fit your requirements
If you want to add or remove sections, you will need to edit the code. More information about this in the video.
Finally, enjoy your awesome Elementor column hover changing background images design!
Let me know if everything works for you!
10 Responses
Very helpful. Thanks a lot!
Welcome!
NO TEMPLATE TO DOWNLOAD
Asked nicely like this... I can only provide it gratefully! https://element.how/elementor-horizontal-page-layout/
Maxime Desrosiers You do great stuff man 🙂 forgive the rudeness of people sometimes Have a great day!
Lud Ki Thank you!
Hi Maxime! Have downloaded the templates, have a quick question before I start. Does this work for section only scrolling? I'd like to insert a horizontal scrolling section in an otherwise vertical page design.
Hey Louise!
No actually it doesn't! I have another tutorial for this, here : https://element.how/elementor-horizontal-scroll-containers/
Cheers!
Hey Louise! This has worked thank you! Although, is there any way I can hide the scrollbar on the top ?
Greetings!
Yes, add this CSS:
.container_section::-webkit-scrollbar {
display:none;
}
Cheers!