5/5

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 😀.

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

Sticky Video On Scroll

Greetings All. You may have seen this effect on some other sites and wonder if it was even possible with Elementor. Well the answer is yes and very easy I might add. With no additional javascript needed just some crafted…

Styling Your Fixed Vertical Header

In our previous post you create your very own Fixed Vertical Header so congratulations on accomplishing that task now its time to add some widgets to wow your visitors.…

How To Make Any Section Clickable

In this tutorial I am going to show you an easy & simple way to make any section clickable without the need of other add-ons. This tutorial is for those who would rather not use the CTA widget but would…

27 Comments

  • 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

    Reply
  • Hi! Really appreciate the article, it is very helpful. One question when I create a header it appears on every slide is it possible to be only on the first section?

    Reply
    • Hi,
      is it possible to see your work and how you put things together so that I can better assist you.

  • Hey,
    Great tutorial, thanks.
    Could you explain further where to place the Mobile CSS?
    Thanks

    Reply
    • Hi Lee,
      the mobile css can go in the customizer.

    • 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

    • Click customize at the top of the page on the front end and apply the css in the additional css tab at the bottom.

    • I am going to update this post today to help others that may have this issue.

    • 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

    • I will revisit this and see if any changes need to be made to the article.

    • 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

    • Update the post to incorporate some of the changes now present inside elementor.

    • 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

    • Please Post a link to your working environment so that I can see for myself what you are describing.

  • Can you please advice how to link sections from menu? ID is not not working for me.

    [block id=”about”]

    Reply
    • Are you wanting to link to each FullPage section.

Leave a Reply

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

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
Pages
Important
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
Pages
Important
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.