Create Horizontal Scroll Using Elementor Pro (Beginners Tutorial 2023)
In this beginners tutorial I will show you how t create horizontal scroll using Elementor Pro. This simple method is extremally easy to do and will help you create an amazing website.
To get protected with NordVPN please do you the link below
https://onewebmedia.co.uk/NordVPN
To sign up for Elementor Pro visit:
https://onewebmedia.co.uk/Elementor-P...
For CRM and Marketing Software I always recommend ActiveCampaign. Visit:
https://onewebmedia.co.uk/ActiveCampaign
For SEO on your website visit:
https://onewebmedia.co.uk/rankmath
For website hosting there is two options. SiteGround and NameHero.
SiteGround has an easier layout and is simple to use:
https://onewebmedia.co.uk/SiteGround
NameHero is slightly more technical but is much faster than SiteGround:
https://onewebmedia.co.uk/NameHero
00:00 - Intro - Create Horizontal Scroll Using Elementor Pro
00:15 - Setting Up Sections For Horizontal Scrolling In Elementor
00:53 - Styling Horizontal Scroll Webpage
02:24 - Adding Horizontal Effect Code To Webpage In Elementor
02:56 - How To Publish Horizontal Page And Preview Website
Code:
.elementor-inner {
width: 100vh;
height: 100vw;
overflow-x: hidden;
overflow-y: scroll;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
.elementor-section-wrap {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
display: flex;
flex-direction: row;
width: 600vw;
}
.section {
width: 100vw;
height: 10vh;
}
::-webkit-scrollbar {
display: none
}
#elementor, #elementorpro, #wordpress