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.

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

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);
});

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.

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