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

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.
27 Responses
nice tutorial, thanks
Thankyou for the idea and tutorial
how to make harder and footer?
Do you have the free version or pro version of elementor
I have the Pro version
Header tutorial https://www.youtube.com/watch?v=tDePkL-1tu4
Footers https://www.youtube.com/watch?v=ob7SMEfVRfc
Know how to do it but it makes problems harder
not sure I understand
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
share the link to the site
https://eliran1313.vangus-c2.link/
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?
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
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”]
Are you wanting to link to each FullPage section.