Horizontal Scroll Elementor Pro Tutorial

Рет қаралды 108,471

2 жыл бұрын

Horizontal Scroll Elementor Pro Tutorial - get Elementor Pro kaycinho.com/elementorpro (affiliate).
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
kaycinho.com/horizontal-scrol...
TUTORIALS MENTIONED
- Custom Mouse Cursor: • Custom Mouse Cursor We...
- Transparent Vertical Fullscreen Menu: • Sticky Vertical Menu E...
TOOLS I LOVE:
- Elementor Pro (affiliate): kaycinho.com/elementorpro
- Astra Pro (affiliate): kaycinho.com/astra
- Crocoblock (affiliate): kaycinho.com/crocoblock
- Wirementor (my own tool): kaycinho.com/wirementor
MORE LINKS:
- Wirementor demo (built by me): kaycinho.com/wirementordemo
- A2 Hosting (affiliate): kaycinho.com/a2hosting
ONE PAGE WEBSITE FREE COURSE
• Elementor Pro Tutorial...
GET MY HELP:
kaycinho.com/shop/consulting/
ALL MY RECOMMENDED RESOURCES:
kaycinho.com/resources/
DOWNLOAD MY FREE BRAND GUIDELINES TEMPLATE
kaycinho.com/brandingtemplate
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

Пікірлер: 252

@KayCinho 2 жыл бұрын

The custom mouse cursor tutorial is here: kzfaq.info/get/bejne/hZlonsR91cXdpY0.html

@jennellemccomie 2 жыл бұрын

is there a way to make trackpad work too or am I doing something wrong? thank you so much for ur tutorials, greatful.

@vinsonlozano60 Жыл бұрын

please add a tutorial on how to apply this horizontal scroll effect on just a specific section of a page.

@vivesounds6267 Жыл бұрын

rebuild your code, its more flexible on mobile if (window.innerWidth > 1025) { const scrollContainer = document.querySelector("main"); let isDragging = false; let startX; let scrollLeft; scrollContainer.addEventListener("wheel", (evt) => { evt.preventDefault(); scrollContainer.scrollLeft += evt.deltaY; }); scrollContainer.addEventListener("mousedown", (evt) => { isDragging = true; startX = evt.pageX - scrollContainer.offsetLeft; scrollLeft = scrollContainer.scrollLeft; }); scrollContainer.addEventListener("mouseleave", () => { isDragging = false; }); scrollContainer.addEventListener("mouseup", () => { isDragging = false; }); scrollContainer.addEventListener("mousemove", (evt) => { if (!isDragging) return; evt.preventDefault(); const x = evt.pageX - scrollContainer.offsetLeft; const walk = (x - startX) * 2; // scrollContainer.scrollLeft = scrollLeft - walk; }); scrollContainer.addEventListener("touchstart", (evt) => { startX = evt.touches[0].pageX - scrollContainer.offsetLeft; scrollLeft = scrollContainer.scrollLeft; }); scrollContainer.addEventListener("touchmove", (evt) => { evt.preventDefault(); const x = evt.touches[0].pageX - scrollContainer.offsetLeft; const walk = (x - startX) * 2; // scrollContainer.scrollLeft = scrollLeft - walk; }); }

@AnnitaCaniglia Жыл бұрын

How do I add anchors or links to sections so that you're automatically scrolld horizontally when clicking on the link?

@Perfectpixelpro07 5 ай бұрын

bro i cant scroll on tablet and mobile can you please tell me whats wrong, its urgent @@vivesounds6267

@samb_here Жыл бұрын

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

@BinhNguyen-ld6bi 2 жыл бұрын

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

@KayCinho 2 жыл бұрын

You’re welcome Binh :) Thanks for the support

@miguelalejandrobritorausse5023 2 жыл бұрын

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.

@KayCinho 2 жыл бұрын

Wow thanks! Inspiring is my mission so I’m glad you are getting inspired. Venezuela is a beautiful country. Hopefully things will get better. I hope you are safe in these times.

@umairfarooq66 2 жыл бұрын

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...

@KayCinho 2 жыл бұрын

So nice of you, Malik. Thank you so much!

@thekhabrisidnaaz 3 ай бұрын

@@KayCinho How can be it will work, horizontal scrolling in mobile view

@jjasminchang 2 жыл бұрын

Thank you so much, your videos are so very helpful. Please keep creating tutorials for us! 🙏🏻

@katlegoseanmahaye3309 Жыл бұрын

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

@danplumadore647 2 жыл бұрын

Absolutely amazing! You have provided me with ideas on taking a website project to the next level. Very timely. Thank you so much!

@KayCinho 2 жыл бұрын

Fantastic Dan! And thank you for taking the time to comment :)

@tetkelly5231 2 жыл бұрын

Amazing tutorial, thank you so much Kay Cinho :) I followed along and was able to make my own horizontally scrolling page! Woot! However, I couldn't get the mobile version to size properly. It ended up looking too wide on the mobile. :( Nevertheless, such a great tutorial. I've signed up, subscribed and will watch out for more!

@Moddino87 2 жыл бұрын

Great job! Good explanations and amazing entertainment. I've learnt a lot from you. Thanks!

@ugoogadi8369 2 жыл бұрын

No cap, you are the best! (New subbie here). You have made learning css/html super easy for me. Also the amount of time this must have taken to create! 👏🏾👏🏾👏🏾👏🏾 We are blessed to have you teacher! I went through all the steps and it came out pretty smooth on desktop but not on the mobile devices. I May have missed this in the tutorial but how do we change it back to vertical on the iPad please. Thanks a lot!

@rodalvareznieves3893 2 жыл бұрын

Incredible tutorial Kaycinho! And as Ugo, I would like to learn to change to vertical on mobile... Thank you!

@invokerdesign Жыл бұрын

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

@adrianodum 2 жыл бұрын

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

@zakikhalifa3593 2 жыл бұрын

WOW.... I've been using dynamic content for elementor for this type of effect :), Amazing torurial as usual, Thanks Kay

@KayCinho 2 жыл бұрын

Glad it was helpful Zaki!

@gigi123380 2 жыл бұрын

Awesome Work Bro🙌🏽I cant wait to test it on one of my websites! THX SO MUCH!

@KayCinho 2 жыл бұрын

Thanks! Yes be my guest :)

@jakobfini1029 3 ай бұрын

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

@reputyz Жыл бұрын

This is amazing! Thanks for sharing it with us.

@igortanaka8488 2 жыл бұрын

Tutorial de altíssima qualidade! Obrigado, Kaycinho!

@mahadiapurbo3748 2 жыл бұрын

Thank you so much. I love this tutorial, that's awesome. 🥰🥰

@katlegoseanmahaye3309 Жыл бұрын

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

@edianeoliveira5602 2 жыл бұрын

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?

@mohamedaslam7809 2 жыл бұрын

man. you're a gem love you so much thanks for this video

@jamesdaffern1692 2 жыл бұрын

Love it! Such a helpful video!!

2 жыл бұрын

Great, as allways !! HQ design and tutorial too !! BRAVO !

@KayCinho 2 жыл бұрын

Thank you so much Goran! Glad you enjoyed it :)

@ComicBeeGt 2 жыл бұрын

You got me inspired! Great tutorial :D

@KayCinho 2 жыл бұрын

Thanks Henry! Inspiring is my mission :)

@denalovicz 2 жыл бұрын

Thanks for always delivering on-point tutorials, really appreciate you sharing helpful knowledge. I'm steadily looking for unconventional designs and layouts and so I'm wondering if its possible for you to make a tutorial about the steps you timelapsed in this video. Hugs & Take Care!

@KayCinho 2 жыл бұрын

My pleasure! I wanted to do it initially, but the video would be 2 to 3 hours long and until I'm a fulltime KZfaqr that's unfortunately hard to sustain. For example this video took me approximately almost 2 days to complete, from idea to completion: re-creating the initial design, scripting, writing all the steps, shooting, editing, creating the blog post, etc. I actually shot this video for the first time: then realized I shot the whole thing without screen recording... So I recorded again: this time I was using the correct scene with the screen but ... I forgot to press record! The third time was to right one =) That's what happens when you're tired haha. But hopefully in the future I can create longer form content ;)

@denalovicz 2 жыл бұрын

@@KayCinho Thanks for the reply! No worries, I understand and know it’s a lot of work so thanks again for sharing your experience. Perhaps you could think of giving payed masterclasses so you can compensate for your time? I’d book one right away :)

@indikadojah 2 жыл бұрын

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

@travis.miller 2 жыл бұрын

Amazing tutorial! Thanks so much. I'm having some responsive issues when it comes to tablet. It tends to sqaush all the collums within the viewport when showing on tablet. Is there a way around this? Many thanks.

@serdimay7 2 жыл бұрын

Great tutorial. Would you please clarify the changes you made o. The hotel tag for the page. Some were set to Main and others to Section. When do you use these different settings

@FSantosPS 2 жыл бұрын

Great tutorial, I've done like this and sections and on both tests scroll worked fine but I never was able to make the header scroll horizontal when I click to anchor, do you have any suggestion please? I can't find one

@MarkusRappat 2 жыл бұрын

Thanks man for this amazing tutorial! I tried to built in a button to jump to the sections (or in this case columns) but it doesn't work. Do you have a trick for that also? ;)

@frankpulumbarit8624 2 жыл бұрын

Kaychinho - this is amazing. Is it possible with your method to add a header at the top of the page, instead of the side?

@nagarutsav3271 2 жыл бұрын

Really Amazing Content !! Thank You so much for sharing ideas and knowledge !! Love From INDIA

@KayCinho 2 жыл бұрын

Thank you Nagar! I'm glad you enjoyed this tutorial :)

@DUBworkshop Жыл бұрын

Nice tutorial! Thanks for your work! And my question is this possible to loop scrolling? to show first column after scrolling thru last

@frundsgn Жыл бұрын

Nice tutorial! thank you so much!

@DigitalDesigns1 2 жыл бұрын

Love this tutorial. You have a new subscriber for sure. 1 question how did you get the test to display in the magic mouse cursor?

@KayCinho 2 жыл бұрын

Thanks Dewayne! Not sure I caught the second part.

@ecomebusiness8225 2 жыл бұрын

great job y're doing. I have a question for you, How please can i have the scrolling effect mouse but not for entire website. Just for one section ?

@stijnjasper 2 жыл бұрын

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!

@jjasminchang 2 жыл бұрын

I vote for this request too

@thesweetermenbrand2488 2 жыл бұрын

Is this possible. I’ve been searching for something similar to this

@stijnjasper 2 жыл бұрын

I have searched for this tirelessly. There are some JavaScript libraries that manage to do this but they require a lot of code knowledge to implement and they don’t work well with Elementor. If someone else has found something please let me know.

@vishalkushwaha6284 2 жыл бұрын

I am also searching for something similar.

@maximilianjaenicke 2 жыл бұрын

Just change the min-height from 100vh (wich is 100% of your browser window height) to your desired height in the css and you're good to go.

@phoerest Жыл бұрын

Amazing Amazing tutorial - Thank you!

@franciscoperez-by3hh 2 жыл бұрын

Hello! Do you have any tutorial where you do this same thing but vertically? Or any tutorial where you make something that I can use to make it vertical? Thanks in advance 💖

@jennifersanjines1111 2 жыл бұрын

If each section needs to be less than 100vw is there a way to specify (ids maybe?) for each section to be a different width? I've got content that is not 100vw and want to still stack 5 sections horizontal for scrolling.

@user-nq9wp2or5j 10 ай бұрын

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 ?

@isaacmoss1791 2 жыл бұрын

Hi Kaycinho, I wondered if you could let me know if its possible to use the menu anchors widget with this tutorial? I tried it on my site but It didnt work once the horizontal section was setup

@borishilderal9528 2 жыл бұрын

Oh Gosh ! Thank you so much !!! I am a beginner. With the same approach, is it possible to create a looping Horizontal Scroll ?? Thanks again.

@hassamsharik2280 7 ай бұрын

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

@syedahzam4496 2 жыл бұрын

Thanks alot for the video but I have a problem when I paste the css in page level then even the header gets a minimum height of 100vh And idk how when u stretch a column position then the elements(title) stays in the middle where as when I do it the elements goes on top

@Pedant_Patrol 2 жыл бұрын

Beautiful as always!

@KayCinho 2 жыл бұрын

Thanks for the encouragements! Glad you enjoyed it :)

@juncando Жыл бұрын

Fantastic. I like your style. Subscribed. Happy Diwali

@corinagrether 2 жыл бұрын

Hello Kaycinho! First of all thank you so much for your tutorials and the monster work you are doing for all of us! I've learned so many things thanks to your explanations. I was playing around with this horizontal scrolling, but i do need also vertical scroll, somehow i try to figure out how to do that. Now since i've putted the js in the pages all my widgets comes out doubled. When i'm choosing a text there are two, an image always two and so on. I've cancelled all these exercise files definitively but there must be some ghost code somewhere...Any ideas? A big hug from Italy

@enriquemartin1616 Жыл бұрын

I need to combine with vertical scroll to

@ostadyarcompany5728 2 жыл бұрын

Hi there. I appreciate for valuable tutorials you provide on youtube. I'm struggling with this one and need some advise, my site language is rtl and because of that, horizental scroll works from right to left! i prepared a horizental scroll page with plusaddons plugin, there i realized to sort pages backward. can be this resolve? I want it scroll from left to right. thanks.

@andrekremmer7104 2 жыл бұрын

Thanks for that. Is it possible to implement this into just a part of the website.. so first normal scrolling and one part horizontal and then back to normal?

@scdigitallabs9724 2 жыл бұрын

Thanks a lot for your tutorial, much appreciated! been tried few times on following your steps, found out the css and js got a bit issue in tablet version! so is it possible that you can share the css and js codes if i want to use horizontal scrolling on Desktop and Tablet, mobile stick to vertical? been struggling at the media query for days and please help me out here!! THANKS!!

@user-kw4yh4hg5i Жыл бұрын

Hello, your tutorials are aways awesome. I am trying to recreate this using the flexbox but it does not work. My idea is to have a pop up that scroll horizontally. How can I do this ?

@robertjanos5654 Жыл бұрын

Really nice tutorial! Do you think this tutorial work on the new container Elementor update? What would be the solution if no? Thanks!

@PatrickSchmeier-dl2qr Ай бұрын

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

@alrobleda Жыл бұрын

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

@MO-vy9rx 2 жыл бұрын

Your video is so awesome i have just a little problem my elementor refuse to scroll horizontally (just the editor) do you have a solution for that ?

@sandralynndesigns Жыл бұрын

Hi Kaycinho I am using the Elementor dev with containers rather than the sections. Does the html and css code still work with the updated version?

@FactFunderss 2 жыл бұрын

thanks for this Tutorial. how to resume normal scroll when finished ?

@ipAlexx 2 жыл бұрын

Hello, Very nice tutorial. How i can me the scroll to be snappy between of the slides?

@LuisMartinez-sw9jr Жыл бұрын

Hi, thank you for an amazing tutorial! I have a problem, The horizontal scroll is too slow, and I don't know how to fix it. Does this happen to anyone else?

@anoune15 4 ай бұрын

Hello Kay! Thank you so much for this well explained tutorial. It's really a pleasure to follow :) I've just run into a complication with the header construction: since it's a one-page site with horizontal scrolling, I've put anchors on my menu but that doesn't seem to work. All the items in my menu are dependent on each other... and don't link to the "Slide X : column X" created :/ Do you have any idea where this could be coming from? Thanks in advance!

@janbekabdurakhmanov474 2 жыл бұрын

bro, u are so cool🔥🔥🔥 thank you for your tutorials🤙🤙🤙

@KayCinho 2 жыл бұрын

Wow thank you so much!

@joelreed7200 2 жыл бұрын

Awesome! Do you know if there's anyway to get anchor links working with this?

@glade3934 2 жыл бұрын

Do you know how to add "snap scrolling" in this case of horizontal scroll in elementor (the new snap scroll by elementor is bad because has delay)?

@martinschenk1210 Жыл бұрын

Hello. Very nice tutorial, could it be that it doesn't work that way with Elementor's new containers?

@cipriancalinov2710 2 жыл бұрын

Hi, nice tutorial, do you have in plan to create some tutorials using Bricks builder?

@nechojs Жыл бұрын

@KayCinho could u please say what size the background images have? do u use smaller images for the mobile version? thx for that video ! really appreciate it! btw. do u know matter.js?

@JRemyDeaton Жыл бұрын

Just tried this today and it doesn't work. Because between and is another container div that holds the sections div.elementor-column-gap-[default]. Thereby the sections are no longer a flex child of . Either this is really new wrapper or I am missing a setting. I mean it's still cool; I just have to change some CSS

@alirezashahin2567 Жыл бұрын

hello, I see that you use an ultra wide monitor, can I ask how you do it? becuase when the monitor is larger then the setting for desktop and widescreen in elementor get messed up a bit. thank you!

@viktorchemezov927 2 жыл бұрын

I like your channel a lot. This is a great idea 💡 мужик ты крутой!

@KayCinho 2 жыл бұрын

Thank you so much 😀 Большое спасибо!

@dtchsy 2 жыл бұрын

what is html tag for and how do you determine it's for main, section, etc?

@Gio_web 2 жыл бұрын

How did you convert all those images? Did you use any plugins in Word press?

@KevinTunis Жыл бұрын

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

@ostadyarcompany5728 2 жыл бұрын

my website is RTL so pages scroll from right to left and from 7 to 1. I will appreciate if you have any idea how to fix this. Thanks.

@HarisRehman 2 жыл бұрын

Can I integrate it within a section on vertical scrolling page. I have tried but failed!

@divya.v5205 3 ай бұрын

Great video, but I want to ask one thing. Is that possible to make only first section scroll horizontally and other below sections scroll vertically ?

@ellinorebrengdahl7560 2 жыл бұрын

Hi, thank you for an amazing tutorial! 👏🏽 I tried following the turorial, and the webiste turned out beautiful! However, I found an issue that I can't seem to fix: on tablet, when holding it horizontal, I am unable to scroll (vertical works fine!). I tried different breaking points for tablet, but then it messes up the page for smaller desktops. Would this be fixable somehow? Maybe through a custom scrollbar?

@matteosw 2 жыл бұрын

Hi! Do you find a solution for this bug? thanks

@EpicEren 2 жыл бұрын

How can we do smooth scrolling? Like Locomotive scroll

@iamart9769 Жыл бұрын

Can this be stepped, meaning not smooth scroll, just jump into the next slide?

@thuriaabduljhbar5558 2 жыл бұрын

Struggling to get this to respect inner sections. They just don't show at all. The top level column does, but everything that's in inner sections (or sometimes inner sections WITHIN inner sections) just doesn't appear on the page. Watched your video in slow-mo and it doesn't look like the inner sections you used had anything fancy but figured it wa worth reaching out and asking: Any tips for getting it to have inner sections within a "slide X: column"?

@Hoxtonspirits Жыл бұрын

This is great but I get the white space on the left hand side that your video has but when you updated it, it disappeared... what did you do? - I notice this problem is in other comments

@dorotawitkowska456 Жыл бұрын

Thanks for great tutorial but I have one problem; don't this code mess with CSS ID links? They don't want to scroll now.

@cannyldz9389 10 ай бұрын

Hello Kay, First of all I would like to appreciate your work. I My question is, in the original website there is a horizontal progress bar but once you you elementor progress tracker widget it doesn't work for our one's we created. can you please show me a way to do it ( ı am not into coding). Many thanks

@heidibroemer5170 Жыл бұрын

Thank you really enjoyed it!

@KayCinho Жыл бұрын

My pleasure 🙏

@lochuynh6682 2 жыл бұрын

is there anyway we can let the header be normal?

@techbd3112 2 жыл бұрын

how to implement this horizontal scoll withou scrollbar on desktop i found these on mobile need for desktop ,,, like touch scroll behaviour

@philvaive1161 2 жыл бұрын

Question for you! I got this up and running on my site, but I was wanting to use some anchor links. It doesn't seem to work, is there some code I can use to make the anchor links go sideways instead of trying to go down?

@philvaive1161 2 жыл бұрын

Also, does anyone have any suggestions for scroll snapping with the horizontal layout? Elementor has that as an experiment but it doesn't seem to work with horizontal

@user-mh4co5eo3g Жыл бұрын

If I want a video to be in the background of all the slides, when they scroll horizontally the video will continue to play. how do I do it?

@sameerpatelxyz 2 жыл бұрын

Woow awesome, thanks for tutorial

@KayCinho 2 жыл бұрын

My pleasure!

@kumarshantanu642 Жыл бұрын

hey there, can you suggest me how to make these horizontal page scroll using ID on buttons

@oluwayomiismine2229 Жыл бұрын

Wao! This is a Great Tutorial! thank you master

@KayCinho Жыл бұрын

My pleasure! 😀

@user-qt6gn2oc2v 4 ай бұрын

Hey hey! Would love to see how you make this with the new container hierarchy as this doesn't seem to work on the newest elementor versions

@robinbosgra4428 Жыл бұрын

Thank you so much! Really helpfulI. The horionztal scroll is only not respond to a Lotti animation. What code should I add to trigger the scroll? I hope you could help me out :)

@spid3r705 Жыл бұрын

having the same problem here. found out that gsap code could help with that but i'm not good enough at coding to set it up

@ljay4217 2 жыл бұрын

Hi. Mine's almost work. It says 'scroll-behavior' is unknown property. Can you help me with this? Or any alternative codes?

@mayadesign Жыл бұрын

Hi there... excellent tuto, friend... but buddy, how I do for make it throught the without site affecting to scroll of the other sections of vertical scroll, please halp me friend