Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
Hybrid Scroll Free Divi Layout
I had a request for this layout from our Facebook Community.
Using the awesome ScrollMagic and GSAP jQuery libraries, the layout allows you to define a group of sections to scroll horizontally, whilst the rest of the content scrolls vertically as it usually would.
Be sure to view the ‘Read Me’ file in the download package for full instructions.
Note: Only use this layout if you are happy with the way it currently functions (all the content can be changed). If you want it to work any other way, or to have multiple horizontal scrolling sections, then you will need to be familiar with writing/editing jQuery. We are unable to provide any customisation support.
Update 28/11/2018: I has been brought to my attention that on import, the code in the Scripts code module is being removed, so I have updated the download package with a scripts.txt backup file of that code, you can copy it directly into the Scripts code module and all should be good 
If you found this helpful please leave a comment.
Michelle X
Hey Michelle, I’ve been trying to use this layout for our website project but It didnt work. So I’ve put the CSS and JS directly into the section. As a result, every time I click on the “accordeon-settings” within wordpress to try to make changes, it freezes and just reloads the page. So I cant make any editing.
You shouldn’t be putting either of those in section settings – or did you mean in separate Fullwidth Code Modules? Try reimporting it into a new page. I would also recommend updating Divi as there was a bug in a recent version that was stripping script tags, but that has been fixed.
Thanks Michelle ! However when I import the JSON file, code modules behave very badly, they are displayed like text (except the “script” code module)… adding the tags in the JS code module and putting the CSS into the Divi Theme option made it works
Do you have any idea about this issue ?
Best,
Louis
Its a Divi bug, thats why I included the backup code files, so you can just replace what is there if it gets corrupted on import.
Hi, this is awesome – thanks heaps! It seems a bit clunky when the browser is resized due to this this snippet: /* On resize */ $(window).on(‘resize’, function () { clearTimeout(resizing); resizing = setTimeout(function () { setDimensions(); }, 250); }); On resize it forces a repaint of the page which doesn’t look great (and with divi’s jumping header issue it makes page loads painful!) – to test open the demo and just re-size the browser Any ideas of how you could get around it? Thanks again!
Keep in mind, a user is not going to be doing this. Sometimes we get lost in trying to make everything work at every pixel, but in reality that is not necessary. You can just remove that part of you don’t like it.
Hello.
This is awesome! Unfortunately, I cannot get it to work…
I have taken a screen record, so you can see for yourself. My site is in Norwegian, but you can see what is going on.
https://drive.google.com/open?id=10A4KwKEG_trb1RXYy9n2KYK1dZKyQRD3
What am I doing wrong?
I have latest update of Divi 3.18.3, and Divi Builder 2.18.3.
Thanks
Taulant
The script and style tags have been removed from the JS and CSS on import, you need to add those back in
HI works weirdly in Firefox scrolls automatically and not controllable
I develop in FireFox and its working fine for me. Which version and OS?
Wow this is great!!! Thank you.
Thank you very much
Beautiful design, Thank you Michelle!
Very nice feature! Thank you Michelle!
Wow! That is special. Thank you Michelle!
This is sweet!! Thank you so much, Michelle!!!
Keep getting a failed message:
Unpacking the package…
Installing the plugin…
The package could not be installed. No valid plugins were found.
Plugin installation failed.
Not sure why.
Its not a plugin, its a json, unzip the file and view the read me file
Michelle, you’re amazing.
Thank you very much for your kindness in sharing wonderful resources in our community.
Amazing – what a ‘fun’ & different way to bring life to the web world!
Hi,
Great work
This can be implemented on some awesome stuff..
Thank you for sharing.
Awesome looking layout! And the scroll effect is so cool.
Hi, thanks, this is very nice !
Does this works with the default Divi smooth scroll option ?
Not sure, you’ll want to try it and see if it has any effect
Is ti just me, or the “script” in the section is missing it’s code?
Apologies, that is getting removed on import for some reason. I just updated the post and the download package to address this
This looks amazing!!!
Thank you for your great work!
Hi,
This looks amazing and I would love to use on my site. Though the json file doesn’t seem to be importing the Jquery libraries and only displays a
within the full width code section. Is it possible to include a file with the libraries included, just like you have the css and Js files.
Maybe it is failing because I am trying to combine this with you resume layout.
Hopefully this can be combined. I would be incredible!
Thank you!
Yep, its being removed for everyone, check solution here: https://divisoup.com/f29-hybrid-scroll-layout/#comment-7348
Amazing, thank you