How To Create A Fullscreen Scrolling Website

Difficulty Rating :
Written byAires DaGraca

In this tutorial we will be recreating the flow and feel found on Shake Design  using a jQuery plugin called FullPage.js 

My staging environment

Theme: Underscores or Hello Theme

Elementor Version: Pro ( May be required to get template shortcodes )

Additional Plugin: Simple Custom CSS & JS 

About FullPage.js

FullPage.js is a simple and easy to use library to create fullscreen scrolling websites (also known as single page websites or one page sites). It allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site.

Let’s Begin

Before we get too far ahead let’s go ahead and include the required files needed for FullPage.js to work its magic. 

Download and install the additional plugin Simple Custom CSS & JS required for this tutorial.

Next go to Custom CSS & JS > Add Custom HTML and give it the tile of FullPage Links and paste these links below the comment section:

FullPage.js cdn can be found here 

Creating The Slides

Because Elementor is awesome we will be creating our slides using Elementor templates.  

Go to Elementor  > My Templates and select Add New and create new section and give it the name of Slide 1.

Build your slide as you would any other section.

Repeat this step for all of your  slides giving each slide a different name.

Important slide notes

Make sure your slide height is set to Fit to Screen.

Your background image should be place as the section BG.

Because Fit to Screen doesn’t work on mobile we need to add an additional class to fix this.

HTML Structure

Open the page you want to add your slider with Elementor and drag a HTML widget to the page.

Remove the padding and margin from the column by inputing ( 0 ) in all the boxes.

Make the section Full Width.

Next we need to add our mark up to the HTML widget.

Next you need to copy and paste in your slide template shortcodes and it save.

Turning On The Plugin

To initialize the plugin we need to go back to Custom CSS & JS plugin  > Add Custom JS.

Copy and paste this below the comment and give it the title of FullPage Script and be sure you place this script in footer.

This is what your script should look like.

Mobile CSS

Apply this CSS so that your slider will fit height of the screen on mobile devices.

Hopefully this tutorial wasn’t  too difficult or confusing to follow. Here is an example of what I create using this same process.

The possibilities are endless when you can build your own slides using the Elementor Builder and its template system. I would love to see what creative ways the community puts this to work in their designs.

Enjoy 😀.

Was this article helpful?

Awesome, follow us on Twitter or Like us on Facebook

Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

Leave a Comment

Your email address will not be published. Required fields are marked *

By visiting iHeartElementor.com you accept our use of cookies and agree to our privacy policy.

Hello, would you like to take a survey before you leave.

Your answers will help us provide more and useful content.
Thank you for your time.