New Tips & Tricks Tutorial: How to Create a Horizontal Scrolling Website

  • 8 November 2021
  • 10 replies
  • 124 views
New Tips & Tricks Tutorial: How to Create a Horizontal Scrolling Website
Userlevel 3

Join myself, @Steven & @Selin Romano in this advanced tips & tricks tutorial where we’ll teach you how to create a horizontal scrolling website.

This tutorial will cover:
✔️︎ Creating sections which are suitable for a horizontal scrolling design
✔️︎ How to change the page layout from vertical to horizontal using CSS
✔️︎ How to add custom Javascript code via the custom code feature
✔️︎ And much more!

WATCH this tutorial on the Elementor Academy

If you have any questions, please ask below!


10 replies

Badge

Hi, I just followed this tutorial and it did not work. The “inline flex” code put my sections side by side but it does not scroll at all after that change. I’ve tried it in both canvas and full width.

Badge

Hey! I followed that tutorial, Nice, but when I scroll for top and down it doesn't scroll horizontally. It's not intuitive for user.

Userlevel 2
Badge +3

@Zakk Pollard and @Ruben Sampaio make sure all your content fits inside a 100VH section, otherwise the vertical scroll will still display. If you can’t you’ll need to set section “visibility: hidden” or redesign the section to fit, it’s just a constraint of using this style.

 

One issue I have found is using link anchors to sections, how can this be done in horizontal mode?

Badge

@Simon Berry thanks, but all sections are 100VH and everything is done as in the tutorial and it still won’t scroll vertically.

Userlevel 2
Badge +3

@Simon Berry thanks, but all sections are 100VH and everything is done as in the tutorial and it still won’t scroll vertically.

But does the content fit inside the 100vh? As if it is taller it will force the section beyond 100vh and so not allow the horizontal scroll to happen. It might be obvious to start with but just double check that one section isn’t too full of content/elements. 

Badge

@Simon Berry it’s strange. It works on the elementor editor but not on the actual page. It scrolls vertically as if it’s not 100VH on the page. On the elementor editor it works fine, but the javascript doesn’t switch the scroll function. I don’t know. I have additional plug-ins but none of the plug-in elements are on this page so I don’t know what they would interfere.

Badge

@Simon Berry @Ash It’s the strangest thing. It works great in the elementor builder but not on the live page.

Userlevel 3

Hi @Zakk Pollard I hope you are well. I’m sorry to see you’re having some issues with the horizontal scroll.

Can you confirm for me your exact display conditions for the JavaScript code? And also which theme you’re using?

There may also be a conflict with another plugin you’re running on your website. The usual testing practice here is to disable all of your plugins (except Elementor & Elementor Pro) and the re enable them one by one, testing if the JavaScript is working in-between each one.

I look forward to hearing back from you.

@Simon Berry thank you for assisting with this so far.

Hello,

My Elementor website layout is a one-page scroll. However, I need pages instead of sections with # links on the menu that scroll down to the section.

Those # links need to be converted into pages in order to do SEO. I really like the scroll down scroll-down theme and want to keep it. 

Is there a way to keep the one-page scroll and still do SEO per section? 

REPLY

Hi all,

 

I’m coming across an issue where the wheel scroll isn’t scrolling horizontally.

all sections are 100VH and everything is done as in the tutorial. Everything is set it the middle of the section and nothing is overflowing. But the wheel scroll isn’t working. 

I’ve followed the tutorial but it’s still not working.

I’m using ‘Hello Elementor’ Theme and there is no plugin that’s in conflict with Elementor. 

 

Thank you for any help in-advanced. 

Reply