If you are like us and are subscribed to the Elegant Themes Blog you would have noticed that back in May they showed off Full Page Scrolling using some buttons here.

We then noticed that in the comments below the post and in the YouTube video that people wanted it to work with the mouse wheel! Well here is a short and simple tutorial of howto make that work.

*Disclaimer – This is for desktop only as the mobile experience for this would not be great.

Step 1

Install WordPress & The Divi Theme plus the divi builder and updated them to the latest versions.

Step 2

Create the page that you would like to have the full screen scrolling on then activate the Dot navigation on the right hand side.

Step 3

Create a Full Width Section and add a background to it, make sure its at least 1920×1080 (Use the 3 lines in the purple area).

Then add a Full Width Header and make sure the background is set to clear. Then add a title so you know what section is what.

Finally in the full width header goto the design tab and activate the full screen option.

Step 4 & The Code

Now its time to add the code into your settings so that the page scrolls with a mouse wheel. To do this goto:

Dashboard, Divi, Theme Options and Integration. Then past the code below in the Add code to the < head > of your blog section.

Step 5 - Using the code on a single page

If you are like us and only wanted to use this code on one page of your website then we recommend using the SOGO Header Footer Plugin and adding the js code straight to the webpage.

Step 6 - Optional

If you are using the Divi bottom bar you may notice that the page will not scroll down to it, so a work around for that is to re create your footer in the Divi builder and then the webpage will scroll all the way down.

We have also just published a short 8 minute tutorial video on this below: