How To Create A Full Page Scrolling Website In Elementor

Creating full-screen scrolling pages in Elementor is very easy and convenient, too. To achieve it, we are going to utilize a plugin called fullPage.js. There are other methods for achieving this effect, such as CSS scrolling or Elementor Addons. However, fullPage.js provides the best solution for compatibility, responsiveness, and usability.

Creating Full-Screen Scrolling Websites In Elementor

Now we are going to demonstrate the process of creating a full-page scrolling website in Elementor.

Step 1: Loading fullPage.js

In order to use fullPage.js plugin functions, we must first load it.

The following code must be added to our website header in order for it to load correctly:

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

We need a plugin to execute this code because Elementor does not currently offer a means to add code to the site header. Although there are several plugins that can add code to our header, I have found that this one is the easiest to use.

Select Add Custom HTML under Custom CSS & JS in the WordPress Dashboard after installing the plugin. Now, paste the aforementioned code, making sure to place it in both the header and the front end.

The next step is to include some unique JS. To initialize fullPage.js and set its options and procedures, we must utilize jQuery. Here are some fundamental choices that apply to all sites with vertical scrolling.

jQuery(document).ready(function($) {
    $('#fullpage').fullpage({
        //options here
        scrollingSpeed: 1000,
        navigation: true,
        slidesNavigation: true
    });
    //methods
    $.fn.fullpage.setAllowScrolling(true);
});

Make sure to include this code in the front end's footer.

We also set our FullPage settings in this phase. The previous example includes navigation dots, which will appear on the right side of our scrolling site, as well as the bare minimum of options needed for a full-page scrolling site. When we modify our design to be responsive, I will go over more alternatives. Visit the official documentation for more details about your options.

Step 2: Set up Elementor Page

The following markup is required by fullPage.js for our Scrolling Page.

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">
        <div class="slide">Slide 2.1</div>
        <div class="slide">Slide 2.2</div>
        <div class="slide">Slide 2.3</div>
    </div>
    <div class="section">Section 3</div>
</div>

Our scrolling page's individual divs with the class section will each be full-screen sections. Utilizing Templates is the simplest approach to make this work with Elementor.

Let's first configure our actual page. Create a new page in Pages, give it a suitable title and URL, and then edit it using Elementor.

Create a Section with one Column in Elementor now. We want to add an HTML-Widget to this column. This Widget, which includes shortcodes for each individual slide, will serve as the framework of our Page. We want to add the following code:

<div id="fullpage">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

Verify that the section is full-width. Additionally, because we don't want the padding that Elementor by default adds to columns, set the padding of the section and column to 0.

After creating the actual slides in the later steps, we will alter the Elementor template id to its correct value.

Step 3: Set up sections

The last step is to separately build and save each section as a template.

You will require Elementor Pro in order to use Shortcodes. The time has come to buy it if you haven't already thought about doing so. You have all the tools you need to build a website using Elementor. No need to always purchase a new theme!

Create a new section by going to Templates - Add New.

The first slide of our full-page scrolling site will now be created. Create a new section in Elementor and set its height to "Fit to Screen." Now that you have added your material, you can style it. Just make sure each template contains one part at most. To create a unique layout, you can use as many columns and inner columns as you like.

Save your slide when you're finished, then return to your Elementor Templates. The template you recently developed ought to now appear in the list. Take this template's ID and paste it into the Page we made in Step 2 by copying it.

Now repeat this procedure for every slide you have. Every template must have one area with a height that is adjusted to match the screen.

Wrapping Up

That's all, then! This is the simplest way to build full-screen scrolling pages with fullPage.js in Elementor. I hope this may help you design an easy and minimalistic website for your future ventures.