Creating Full Screen Scrolling Websites in Elementor (no Addons required)

Full Screen Scrolling in Elementor
Share on facebook
Share on whatsapp
Share on email

Creating Full Screen Scroll Snapping Pages in Elementor is easy. To achieve it, we are going to utilize fullPage.js. There are other ways to achieve such an effect, by utilizing CSS Scroll Snapping or using Elementor Addons. However, fullPage.js provides the best solution for compatibility, responsiveness and usability.

Watch on YouTube

If you prefer watching a video over reading this post, you can watch it above.

Step 1: Loading fullPage.js

First of all, we need to load fullPage.js so we can use its functions.

To properly load it, we need to add the following code to our site header:

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

Unfortunately, Elementor does not provide a way to add code to the site header, which is why we need a plugin to run this code. There are many plugins that can add code to our header, but this is the most straightforward plugin I have found.

After you have installed this plugin, go to Custom CSS & JS in the WordPress-Dashboard and select Add Custom HTML. Now paste the above code and make sure it is inserted in the header, and in the frontend.

Adding code to the Header using a WordPress Plugin

Next, we have to add some custom JS. We need to use jQuery to initialize fullPage.js and set its options and methods. Here are some basic options that work for every vertically scrolling site.

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

Make sure to add this code to the footer in the frontend.

In this step, we also set our options for FullPage. The above example has the most basic options required for a FullPage Scrolling site and features nagivation dots, which will display at the right hand side of our scrolling site. I will go over more options later, when we adjust our design for responsiveness. For more information about options, you can also visit the official docs.

Step 2: Set up Elementor Page

fullPage.js requires to use the following markup 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>

Each individual div with the class section is going to be one full-screen section of our scrolling page. The easiest way to make this work with Elementor is to use Templates.

Let us set up our actual page first. Go to pages, create a new page, give it a proper title and URL and go edit it with elementor.

Now, in Elementor, create a Section with one Column. In this column, we want to add an HTML-Widget. This Widget is going to be the skeleton of our Page, containing shortcodes for each individual slide. This is the code we want to add:

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

Make sure to make the section full-width. Also, set the paddings of the section and column to 0, as Elementor adds some paddings to columns by default, which we don’t want.

We are going to change the elementor-template id to their proper values after we create the actual slides in the next steps.

Step 3: Set up sections

The final step is to create each section seperately and save them as templates.

In order to use Shortcodes, you are going to need Elementor Pro. If you have not considered buying it yet, now is the time to do it. With Elementor, you have everything you need to create a website. No need to buy a new theme every time!

Go to Templates – Add New, and create a new section.

We will now create the first slide of our full page scrolling site. In Elementor, add a new section and set its height to “Fit to Screen”. You can now add and style your content in this section. Just make sure to use only one section in each template. You can use any number of columns and inner columns to customize your layout.

After you are done creating your slide, save and go back to your Elementor Templates. You should now see the template you have just created in the list. Copy the ID of this template and insert it in the Page we have created in Step 2.

Now repeat this process for each of your slides. Each template must consist of one section with its height set to fit to screen.

And that’s it! This is the most basic way to use fullPage.js to create full screen scrolling pages.

Feel free to leave questions and comments below.

Subscribe to our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Share this post with your friends

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on reddit
Share on xing

Leave a Reply

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