Make a Horizontal Scroll Section/Page in Elementor FREE | Horizontal Scrolling with Parallax Effect

Today, I'll show you how to make a Horizontal Scroll Section/Page in your Elementor website for FREE and create that with Parallax Effect.

✅Get Elementor Pro:

✅Get code snippet for Horizontal Scroll:

✅Get this as Ready Template (✨1 CLICK INSTALL✨):

TIMESTAMP
00:00 Start
00:43 Step 1: Make the Horizontal Section
10:30 Step 2: Add Parallax and Rotating Effects
13:49 Step 3: Click to Scroll and Reveal Animation
16:45 Step 4: Responsive for Tablet and Mobile
21:49 End

In this video, I’ll show you how to make a horizontal scrolling page/animation on your Elementor website using container. We’ll create this without using Elementor Pro or any other extra plugin. I’ll Also show you how you can add parallax effect inside that section, how to add rotating effect, a nice reveal animation, the progressbar and so many other things.

And the best part is you can place it inside anywhere on your page. So, when you reach that section, you can start sliding horizontally and after finishing that part, you can again go through your other content.

If you want, you can also get this animation with all the end results as a ready made template from my template shop. And inside each of these, you also get 2 different versions. But, if you don't want these ready template, you can also start it from scratch.

First, you need to create a container and inside that place your containers. But, before that also make sure to configure your containers settings properly. Then, we need to add CSS class and paste some code snippet to work it properly. Also let's fix some minor issues here.

After that, we have added the parallax and rotate effect. Here you can also customise different things like: speed, direction, moving axis with that parallax effect.

On the 3rd step, we add click to reach and a custom reveal animation. Normally, these features are not working, but with the help of custom code we can make it possible.

Lastly, you need to do responsive for the tablet and mobile devices. On mobile, there is the option to enable the vertical scroll too.

So, that’s how you can create fully responsive horizontal scrolling website in WordPress for FREE. If you want to get more advanced GSAP like tutorial, hit the like and subscribe button.

[prokassim]

You are the king of web design, thank you for all the awesome tutorials.

[daviddirjan]

Perfect timing. Working on a horizontal website and couldn't add parallax effect on elements. Thanks for the tutorial. Greetings from Romania!

[ICUAT]

just what i needed. new subscriber here. please more of this content. looking for some modern hover effects with text. great work

[thedude]

Wow man, you are awesome. Very clear and structured Tutorial, also not too long. RESPECT!

[FabianRodriguez-zuwn]

Excellent!!! ... Thank you very much, how could I have a fixed title, and how could I change the direction of the scroll?

[ShayBadihi]

awesome! the only tutorial that gave me a real solution for the horizontal scrolling!! thanks a lot!

[HERALDGROUP-mxfx]

Please make a video of this whole page doing from scratch.

[tropiczenrain]

Question on mobile. the following scroll containers goes over the 1st container. How to fix this please.

[Devproduction]

Great tutorial, thank you so much!
Is it also possible to add a horizontal sticky menu at the top, even if the entire website uses horizontal scrolling?

[annakh]

you should make tutorials on how you make such an amzing sections with creativity....please

[humayoonnazer]

how can we achieve the text over image effect (loved by thousands) ? love your videos

[connectadnan]

I want a 30vh header and then 70vh images horizontal scroll. I used your code but it's working but scroll is starting when scrolling section touches the top and its creating a white space below the scrolling images ? How to fix that?

[VisualVision]

Thank you for your great tutorial! I'd like to change the color of the progress bar on the bottom from yellow to green. Where can I edit it? Kind regards!

[corentingalland]

Hello, really nice !
the snipped code is working on a html widget ? Or I have to pay the integral ?

[amielsena]

bro honestly you are the best! this is what im currently doing to my project to client you saved my time bro! you are the pricese and straight to the point tutorial here in youtube! you deserve a tip! where can i send bro! please!!!!

[renanrubini]

Does the paid feature that provides the structure of what was presented in the video include the images and the entire layout? Or do I need to set up my own layout?

[Itsmemrnobod]

Hey. Great material <3 Please tell me, can we create a website that starts scrolling to the right immediately? Instead of first scrolling down to the second section and then to the right? I would appreciate your response. :)

[atzintort]

I WANT TO UY IT, DO YOU HAVE ANY VIDEO ABOUT INSTALLING?
THANK YOU VERY MUCH, THAT IS AMAZING!

[humayoonnazer]

Hi, after i set the width as auto and moved all the containers to the main container, all the four containers appear squeezed in one container instead of seeing only the first container, but after i set 100% width for the four containers, it works.

[tonystarkmowa]

what should i learn to make these kind of websites on the elementor any path like not just this horizontal scroll but how can i create some other layouts and interactions for that what actually i should learn?