Horizontal Scroll Elementor Pro Tutorial

Ever wondered how to create a horizontally scrolling website with Wordpress & Elementor Pro? Well the other day I stumbled upon a very nice website on the Awwwards website, and I knew I had to make a tutorial about it.
I hope this horizontal scroll Elementor Pro tutorial will inspire you to go and create a beautiful horizontal scrolling website.

To be transparent, I think this type of website is better suited to specific topics / industries (events, mini-website, promotional website, etc.) and not really for corporate.
But you know, the rules are there to give some guidelines, but nothing says you can't use a horizontal scrolling website for a corporate gig.
The thing is, whether you use a standard or a horizontal scrolling website: always have the end user in mind!

With a little bit of creativity, a little code magic, and a tool like Elementor Pro: sky is the limit!

CODE / BLOG POST

TUTORIALS MENTIONED

TOOLS I LOVE:

MORE LINKS:

ONE PAGE WEBSITE FREE COURSE

GET MY HELP:

ALL MY RECOMMENDED RESOURCES:

DOWNLOAD MY FREE BRAND GUIDELINES TEMPLATE

DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).

Also, I am the creator of Wirementor.

#webdesign #freelancing #elementor

[jakobfini]

To all of you having issues - it works.
You'll just have to turn off flexbox inside elementor settings :)

[miguelalejandrobritorausse]

One of the best tutorial that i've ever seen. I really learn a lot with your tutorials and your channel inspires me to make my own one.

Cheers from Venezuela.

[stijnjasper]

Is there a way to only horizontal scroll certain sections? Meaning that when you scroll down the page it scrolls down regularly, accept for for instance your portfolio, which scrolls horizontally. I see these interactions happen with webflow, been wondering if this could be accomplished with elementor as well. Cheers!

[umairfarooq]

Everytime you comes up with a new idea and new possibilities all in a way which is very easy for us to understand. Really appreciate your efforts. Keep providing us the free premium content. Lot's of love, prayers, blessings to you Kaychino...

[RohitMane-hf]

Amazing tutorial :)
but I want to ask one thing. Is that possible to make only first section scroll horizontally and other below sections scroll vertically ?

[alrobleda]

Hello friend, excellent tutorial. Replicate now using flex container however scroll effects didn't work. Do you know why it could be?

[samb_here]

Cannot describe how much happy I feel after watching this, gonna make my portfolio right away!

[BinhNguyen-ldbi]

amazing tutorial as always! Can't wait for the next video about the menu navigation and responsive design for the horizontal scroll!! Thanks Kay!:)

[katlegoseanmahaye]

WOW just learnt how to develop horizontal scroll, thank you Alchemist!!!

[ajgm]

the tutorial, wonderful, but I have a problem, after all the columns, I get a blank page; I do not stop the scroll in column 7. I am doing something wrong or is it like that. Thanks again for the tutorial and best regards. and On a computer it works great, but how do I make the sroll vertical on a tablet and mobile phone, I don't know if I'm doing something wrong, but it doesn't work for me. Thanks in advance and greetings.

[KevinTunis]

@KayCinho How can the Horizontal Scroll be accomplished with Elementor 3.6 Flexbox and Container

[katlegoseanmahaye]

lol I was soo excited when after pasting the HTML code and thereafter started scrolling! wow dude!😃

[PatrickSchmeier-dlqr]

Hey, awesome tutorial! How to make a anchor navigation work within the horizontal scrolling? I am very grateful for any help!!

[edianeoliveira]

Congratulations and thanks for the content, if I want to scroll only part of the page horizontally, a section in the middle for example, what code do I use to scroll some of the content vertically and part horizontally?

[invokerdesign]

It was a bit difficult at first but I did it, thanks for the info man.

[EpicEren]

How can we do smooth scrolling? Like Locomotive scroll

[angelperezpedrosa]

Wow, thanks for the credits ( I am the developer ).
If anyone is reading this : 🤬 elementor, learn how to code.

[indikadojah]

Thanks for this tutorial! 🙌 Is there a way to make the horizontal scroll work on all displays including tablet and mobile?

[adrianodum]

Thanks for the tutorials! Great job! In the case of the horizontal scroll, is there any way to smooth the transition?

[hassamsharik]

amazing video loving it is it possible for it to scroll horizontally on smaller touch screens like tablets and phone?