In this tutorial we're going to add Fullpage.js to Elementor, a unique JavaScript library that allows you to automatically scroll between full screen page sections. This can add a professional appearance to your Elementor website and is one of the more popular JavaScript libraries out there because of it.

We created this guide to show you a simple way to incorporate Fullpage.js into your website using nothing more than the HTML element block. Keep in mind, there is a premium WordPress plugin that cost $39.00 which allows you to incorporate Fullpage.js directly into your Elementor website.

Essentially, it takes the Fullpage.js library and automatically sets things up, offering you a pretty graphical user interface.

Here, we're going to discuss the cheaper manual way. This tutorial is created for somebody who isn’t familiar with JS, but if this goes over your head, consider checking out the plugin.

Install FullPage.JS to Elementor

As the name suggests, this JavaScript library allows you to scroll between full screen Elementor page sections. As you scroll the mouse down, the screen snaps to the next section. Here is an example of that in action:

In this example, it looks quite simple, but in an actual implementation, a website designer would most likely use complex animations and transitions to display content as the fullpage.JS library snaps the section to the viewport.

If you're looking for inspiration, here's a collection of websites that use this JavaScript library:

One thing to note: if you plan on using this commercial you'll need a commercial license. This starts at 9 Pounds (one time), so it's not that bad. It's also free for open source projects that are compatible with GPLv3.

Now that we know what the library does and how it works, let's work to incorporate it into an Elementor website without using the plugin. Not only will this save us money, but it will give us more flexibility and power.

Set Up The Elementor Page

First, set up your Elementor page.

For our example, we added three individual Elementor sections, setting the height to be equal to the viewport. You can add as many sections as you want, just ensure that they have the same height as the viewport. After all, FullPage.JS is made for full pages -- without this setting, the integration would be pointless.

Within each section, place your content. This example doesn't go too far into practical use cases for this library, but typically you'd fill each page with minimal content pointing to sub pages. For example, if you have an agency website, you could use Fullpage.js on the home page, with each individual section displaying your portfolio, services, hero, contact form, and more.

As your user scrolls down the page, they will be greeted with elements entering the viewport via CSS animations or parallax. Both of these are effects are included any native installation of Elementor and Elementor Pro.

Finally, give each section a custom CSS class of “.slide”. This is done by going to “Advanced” in the Elementor editor and setting up the class there.

Once your page is set up, it's time to actually install the JavaScript library into the Elementor site.

Add Fullpage.JS and Fullpage.css to Elementor

This JavaScript library also needs to have a CSS stylesheet included. Both of these are loaded into our Elementor page by using a CDN. We recommend this route as you don't need to maintain the codebase yourself.

When it comes to incorporating JavaScript libraries into Elementor, you have two options. The more permanent method would be adding the <script> tags to the header of your WordPress website through PHP. If you’d like to learn how to do that, follow this article.

https://isotropic.co/add-code-to-wordpress-head/

In our example, we integrated the two files into our website by serving them through a CDN, and using a HTML block to add them to our page. If you were only using this library on an individual page, or range of pages, this method might be better because you don't need to call the CDN for every single page, which is what would happen if you added it to the header of your WordPress website (This makes Elementor load faster).

Grab a HTML block, and insert it into your Elementor page. Then, add both the fullpage.min.css and fullpage.min.js files to your site.

The code should look something like this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css"/>
<script src=https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js> <script>
Code language: HTML, XML (xml)

Use this service as your file CDN. You can copy and paste the links directly from this website, and doing so will ensure that you have the most up-to-date version of the files.

At this point, when you load your page on the front end, both the CSS stylesheet in the JavaScript file will be loaded into the page period now, it's time to initialize the JavaScript and apply it to each individual section, getting the snappy scroll effect that comes with fullpage.js.

Initialize Fullpage.JS in Elementor

To do this, we're going to simply add yet another collection of code to the HTML element that is already in your page.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.extensions.min.js"></script>
<script>
var myFullpage = new fullpage('.elementor-inner', {
    
    	//Navigation
	menu: '#menu',
	lockAnchors: false,
	anchors:['firstPage', 'secondPage'],
	navigation: false,
	navigationPosition: 'right',
	navigationTooltips: ['firstSlide', 'secondSlide'],
	showActiveTooltip: false,
	slidesNavigation: false,
	slidesNavPosition: 'bottom',

    //Scrolling
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    fitToSectionDelay: 1000,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    continuousHorizontal: false,
    scrollHorizontally: false,
    interlockedSlides: false,
    dragAndMove: false,
    offsetSections: false,
    resetSliders: false,
    fadingEffect: false,
    scrollOverflow: false,
    scrollOverflowReset: false,
    scrollOverflowOptions: null,
    touchSensitivity: 15,
    bigSectionsDestination: null,

    //Accessibility
    keyboardScrolling: true,
    animateAnchor: true,
    recordHistory: true,

    //Design
    controlArrows: true,
    verticalCentered: true,
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#header, .footer',
    responsiveWidth: 0,
    responsiveHeight: 0,
    responsiveSlides: false,
    parallax: false,
    parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
    cards: false,
    cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},

    //Custom selectors
    sectionSelector: '.elementor-section',
    slideSelector: '.slide',

    lazyLoading: true,

    //events
    onLeave: function(origin, destination, direction){},
    afterLoad: function(origin, destination, direction){},
    afterRender: function(){},
    afterResize: function(width, height){},
    afterReBuild: function(){},
    afterResponsive: function(isResponsive){},
    afterSlideLoad: function(section, origin, destination, direction){},
    onSlideLeave: function(section, origin, destination, direction){}
});

</script>Code language: HTML, XML (xml)

This code is pure JavaScript and it controls all aspects of the Fullpage.js effect on your Elementor website. The first part of the code initializes the JavaScript library and applies the effect to your Elementor sections. If you can see, the “.Elementor-inner” is applying this effect to all content created by Elementor.

This class wraps all sections and content, which is why it’s used. It’s also standard through Elementor sites, making this code work with any and all installations.

The second part of the code controls many different aspects regarding the library. You can check out the documentation to figure out exactly what sections you want to manipulate to customize this effect to suit your Elementor website. Important aspects are:

   //Custom selectors
    sectionSelector: '.Elementor-section',
    slideSelector: '.slide',
    lazyLoading: true,Code language: JavaScript (javascript)

These lines apply the individual effect to each Elementor section. It also applies LazyLoading which helps with website performance.

Preview Fullscreen.JS In Elementor

After modifying the options within the JavaScript to suit your website, Save the page and previewed on the front end. The JavaScript should initialize when the page loads, and you should be able to scroll between each section with an effect similar to the video above.

If you reload the back end editor, the JavaScript will also initialize there, meaning you can preview the scroll effect from the back-end Elementor editor as well.

And that is just about it. If you found this tutorial helpful, feel free to share it on social media. If this is way over your head, consider shelling out $39.00 and purchasing the Elementor fullpage.JS plugin which is designed to make this process much easier.

It essentially takes everything that we just did, automates it, and gives you a visual interface to control all of the JavaScript options, visible in the second part of the code added to our website.

If you're interested in previewing the demo page that we created for this tutorial, feel free to download it. You can import it as a template into your Elementor website, and gain access to all of the sections, code, and structure that makes up the site.

Many of our readers find this helpful as they are able to see exactly how the page is made, and focus on recreating it in your own website. You can also use this template as a base to build a fullpage.JS Elementor website off of.