Horizontal Scroll Elementor Pro Tutorial

Horizontal Scroll Elementor Pro Tutorial

The Digital Alchemist

2 года назад

106,201 Просмотров

Horizontal Scroll Elementor Pro Tutorial - get Elementor Pro https://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
https://kaycinho.com/horizontal-scroll-elementor-pro

TUTORIALS MENTIONED
- Custom Mouse Cursor: https://www.youtube.com/watch?v=O38kaLp_yuY
- Transparent Vertical Fullscreen Menu: https://youtu.be/8eGelGWkwRw

TOOLS I LOVE:
- Elementor Pro (affiliate): https://kaycinho.com/elementorpro
- Astra Pro (affiliate): https://kaycinho.com/astra
- Crocoblock (affiliate): https://kaycinho.com/crocoblock
- Wirementor (my own tool): https://kaycinho.com/wirementor

MORE LINKS:
- Wirementor demo (built by me): https://kaycinho.com/wirementordemo
- A2 Hosting (affiliate): https://kaycinho.com/a2hosting

ONE PAGE WEBSITE FREE COURSE
https://www.youtube.com/watch?v=plYZ6ufzvrU

GET MY HELP:
https://kaycinho.com/shop/consulting/

ALL MY RECOMMENDED RESOURCES:
https://kaycinho.com/resources/

DOWNLOAD MY FREE BRAND GUIDELINES TEMPLATE
https://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

Тэги:

#horizontal_scroll_elementor_pro #horizontal_scroll_elementor #premium_horizontal_scroll_elementor #horizontal_scroll #elementor_horizontal_scroll #elementor_horizontal_scroll_widget #horizontal_page_scroll_elementor #horizontal #elementor_horizontal_scrolling #elementor_page_builder #elementor_tutorial #elementor_vertical_scroll #horizontal_page_tutorial #premium_addons_for_elementor #premium_addons_pro #premium_addons #web_design #web_development
Ссылки и html тэги не поддерживаются


Комментарии:

@PopcornBox2023
@PopcornBox2023 - 27.11.2023 05:27

Bruh, so many unnecessary steps. Be familiar with D.R.Y.

Ответить
@sarahrajah6486
@sarahrajah6486 - 20.11.2023 12:02

Hi will this work with the new elementor pro with containers?

Ответить
@IsraelHernandez-id1vk
@IsraelHernandez-id1vk - 12.11.2023 13:32

Hi, is "There has been a critical error on this website."

Ответить
@aitorb.8875
@aitorb.8875 - 07.11.2023 23:00

Se ha roto Su web no puedo ver el código

Ответить
@user-sr7um7jh9l
@user-sr7um7jh9l - 30.10.2023 18:58

Hi Kaycinho

Awesome tutorial.
I'm looking for a way to scroll the site horizontally with mouse drag.
So I click on the website where there is no link and I can move the website with that mouse movement.
Is there a way for this?
Thank you for your help in advance!

Ответить
@kaushalrudra
@kaushalrudra - 17.10.2023 22:51

I want to add menu anchors to different columns/sections on the same horizontal page. But its not working. Please help, can you guide on this

Ответить
@cannyldz9389
@cannyldz9389 - 21.09.2023 02:56

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

Ответить
@arturmelo3681
@arturmelo3681 - 19.09.2023 21:58

god

Ответить
@user-nq9wp2or5j
@user-nq9wp2or5j - 15.09.2023 13:56

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 ?

Ответить
@yosoydy
@yosoydy - 15.09.2023 06:34

not working in new Elementor with sections and flexbox

Ответить
@matuspavla4871
@matuspavla4871 - 11.09.2023 03:05

its very outdated there are no columns in elementor anymore...

Ответить
@angelperezpedrosa8773
@angelperezpedrosa8773 - 02.08.2023 23:58

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

Ответить
@nitinverma8039
@nitinverma8039 - 26.07.2023 09:50

How you make the header vertical?

Ответить
@user-gr2wl4rj1h
@user-gr2wl4rj1h - 23.07.2023 19:41

Vertical scrolling is not working in tablet and in mobile

Ответить
@reputyz
@reputyz - 20.07.2023 08:56

This is amazing! Thanks for sharing it with us.

Ответить
@user-kw4yh4hg5i
@user-kw4yh4hg5i - 18.07.2023 13:56

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 ?

Ответить
@user-fv5vt4ol9c
@user-fv5vt4ol9c - 23.06.2023 15:17

Can you do a tutoiral on how to make the product page from scepter and sword. As the slider is amazing

Ответить
@pernilleernst8793
@pernilleernst8793 - 09.06.2023 12:58

Why is it not working respeonsively on laptop :/

Ответить
@psalm0801
@psalm0801 - 22.05.2023 20:38

When I click the link it says Account Suspended. Contact your hosting provider.

Ответить
@againthankyou8635
@againthankyou8635 - 17.05.2023 01:56

will your horizonatal scroll work for mobile?

Ответить
@DUBworkshop
@DUBworkshop - 16.05.2023 10:31

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

Ответить
@hiteshraj7872
@hiteshraj7872 - 21.04.2023 22:30

how do i download the template.
It isnt working?

Ответить
@Estherdigital7
@Estherdigital7 - 28.03.2023 22:25

It didn't help me :(((( I followed it as it was and the scroll was still vertical :,,,,(

Ответить
@evan3934
@evan3934 - 26.03.2023 23:19

This is awesome but why not on mobile and tablet as well?

Ответить
@invokerdesign
@invokerdesign - 26.03.2023 16:59

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

Ответить
@alrobleda
@alrobleda - 10.03.2023 05:21

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

Ответить
@lvngitcouture
@lvngitcouture - 08.03.2023 20:50

Great job 😁

Ответить
@red1io
@red1io - 04.03.2023 13:41

it works just fine, with free elementor. this the best tuto in the internet. thank you

Ответить
@phoerest
@phoerest - 14.02.2023 07:17

Amazing
Amazing tutorial - Thank you!

Ответить
@user-mh4co5eo3g
@user-mh4co5eo3g - 12.02.2023 00:54

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?

Ответить
@nechojs
@nechojs - 09.02.2023 08:28

@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?

Ответить
@robinbosgra4428
@robinbosgra4428 - 26.01.2023 14:10

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 :)

Ответить
@frundsgn
@frundsgn - 24.01.2023 23:20

Nice tutorial! thank you so much!

Ответить
@OriginalityMazeTV
@OriginalityMazeTV - 21.01.2023 05:53

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

Ответить
@kumarshantanu642
@kumarshantanu642 - 19.01.2023 14:37

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

Ответить
@heidibroemer5170
@heidibroemer5170 - 05.01.2023 10:42

Thank you really enjoyed it!

Ответить
@sophiemulders
@sophiemulders - 02.01.2023 17:16

i tried to do this but i does not work , i named the section 'main' and the columns 'section', i have the latest version of wordpress and elementor and elementor pro are at 3.8.1 version. i tried changing the eventlistener to scroll because i work on a laptop with trackpad. but did not do anything

Ответить
@sophiemulders
@sophiemulders - 02.01.2023 15:52

Is there a way to make this work with containers?

Ответить
@Joedebengaluru
@Joedebengaluru - 18.12.2022 18:24

Hi, can we use the Hello Theme from Elementor

Ответить
@JRemyDeaton
@JRemyDeaton - 13.12.2022 23:26

Just tried this today and it doesn't work. Because between <main> and <section> is another container div that holds the sections div.elementor-column-gap-[default]. Thereby the sections are no longer a flex child of <main>. 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

Ответить
@AnnitaCaniglia
@AnnitaCaniglia - 08.12.2022 18:03

Hey there! Thanks for the tutorial. I have my horizontal page working now when scrolling with the mouse wheel (I had to use some different stuff as I'm using Containers rather than sections and columns). However, I can't seem to make a menu that points to a section from that horizontal layout work. Could you explain how to make it so that the menu scolls to the correct section inside the horizontal page?

Ответить
@KevinTunis
@KevinTunis - 20.11.2022 23:30

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

Ответить
@mayadesign
@mayadesign - 16.11.2022 01:52

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

Ответить
@viniciuslima6306
@viniciuslima6306 - 29.10.2022 17:24

how do you do with container?

Ответить
@juncando
@juncando - 22.10.2022 21:44

Fantastic. I like your style. Subscribed. Happy Diwali

Ответить
@theemmaroseagency429
@theemmaroseagency429 - 18.10.2022 09:56

Can this be done on Flexbox Container?

Ответить
@Robert-vw9bj
@Robert-vw9bj - 13.10.2022 12:51

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

Ответить
@iamart9769
@iamart9769 - 11.10.2022 01:19

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

Ответить
@robertjanos5654
@robertjanos5654 - 08.10.2022 17:24

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

Ответить