Key Elements

Elementor Pro, FullPage.js

How To Create A Fullscreen Scrolling Website

How To Create A Fullscreen Scrolling Website

In this tutorial we will be recreating the flow and feel found on Shake Design  using a jQuery plugin called FullPage.js . If you are looking for just a fullscreen snap check out this tutorial.

My staging environment

Theme: Hello Theme

Elementor Version: Pro (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:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>

FullPage.js cdn can be found here 

Creating The Slides

Because Elementor is awesome we will be creating our slides using Elementor templates.  To make it easier for future slides that we create we are going to make a slide template so that we will can be sure the slides look consistent and awesome on mobile devices.

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

Slide Template

Next we need to drag a heading and text widget into a one column section.

Open the options for the section and apply these settings. This will give the section a min height of 100vh so no matter the height of the browser window the section will completely fill it.

Next I would suggest you add a temporary image for your section background and adjust the positioning to your liking. If you plan to use white text apply an overlay to the background.

Adjust the size of your header & subtext before we venture into the next step.

I made my heading text around 60px and subtext at 18px.

Now we need to make some small adjustments for mobile devices.

Activate the responsive mode for tablet and you will notice that there is very little padding on the left and right sides, fix this by going to advanced tab of the section.

After you have made you changes view the template in mobile view and see if changes need be made to the size of the text if so adjust accordingly.

So now that our template is complete it will make creating our slides so much easier.

Slide Creation

To make your slide all you need to do is create a new section give it a name like Slide 1, Slide 2 etc; and import the template you create.

Apply a different background image.

Change the text.

And just like that your first slide is done.

Repeat these steps for additional slides.

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.

<div id="fullpage">
	<div class="section">Shortcode Goes Here</div>
	<div class="section">Shortcode Goes Here</div>
	<div class="section">Shortcode Goes Here</div>
	<div class="section">Shortcode Goes Here</div>
</div>

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.


jQuery(document).ready(function( $ ) {
	$('#fullpage').fullpage({
		
        scrollingSpeed: 1000,
        navigation: true,
        slidesNavigation: true
		
	});

	
	$.fn.fullpage.setAllowScrolling(true);
});


This is what your script should look like.

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

Mobile view

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.

Fullpage.js Elementor Plugin

The creator of this js plugin also created a plugin that does all the hardwork for you with no coding required. I personally have not used it but I just wanted let you that this option is out there for those that could benefit from it. Here

Fullpage.js license

If you want to include Fullpage in downloadable or installable products like WordPress themes, HTML templates, as part of a commercial interface builder, SDK, or toolkit, a commercial license is required. Commercial OEM licenses are customized for each customer.

Enjoy 😀.

27 Responses

  1. I created a header on the site with an elementor and it doesn’t work for me, something in js code doesn’t allow it to work even footer doesn’t work

    1. Hi Aires,
      I assume by ‘customizer’ you mean the custom CSS & JS plugin?
      I added the mobile code into a CSS file in the plugin, but it doesn’t appear to be working, not on my Samsung S10 anyway
      Thanks

    2. Thanks.
      I’ve added the mobile css to the additional css in the theme customize tab, but unfortunately it’s still not working on mobile…just scrolls normally and ignores the sections

    3. That would be great.

      Also an explanation where to add the ‘full_height’ would be great.

      Stating “need to add an additional class to fix this” is fine, but where do you add the additional class? This may be the reason why it’s not working for me if I’ve added this in the wrong place

    4. Yep, still not working for me on mobile.

      Followed the new steps to the letter, making sure all the screens look like your screenshots and still no fullscreen scrolling on mobile 🙁 Doesn’t show the slide navigation on the right side either

Leave a Reply