Recently, we had a project where we wanted to implement full screen scrolling. This is a classy effect where each section of the page fills the entire screen, regardless of the device and where each section snaps into place when the visitor scrolls, preventing stopping in-between sections.

Click to see a demonstration of this effect.

Why fullPage.js and Divi?

We originally thought we could achieve this using CSS Snap Points, but we discovered that Chrome still doesn’t support this feature. We experimented with several different polyfills, but nothing produced consistently produced the effect we wanted across all browsers.

Ulimately, we chose fullPage.js because it supports nearly every browser, including ancient versions like IE6. In addition, there are a number of extensions that offer additional features like parallax and drag and move (which makes the effect seem natural on mobile devices) that we ultimately chose to utilize.

Why Divi? Because it is our favorite development environment for custom WordPress websites. It enables us to achieve results quickly, improving productivity for us and reducing costs for our clients.

Our Approach to Integrating fullPage.js and Divi

Here is a quick summary of our approach to integrating and utilizing fullPage.js with Divi.

  1. Add the fullPage.js files to Divi Child theme.
  2. Create a custom page template.
  3. Create a javascript file to launch fullPage.js.
  4. Enqueue the fullPage js and CSS files.
  5. Add some CSS to your child theme’s stylesheet.
  6. When adding a page using fullPage.js:
    • Assign our custom template to the page.
    • Under each section, assign a CSS class.

Before You Start

There are some downsides to consider:

Once you assign our custom page template to a page, you won’t be able to use the Visual Builder. The problem is that you won’t be able to scroll down to access anything below the top section.

When we implemented fullPage.js, our footer disappeared. We managed to display it be making it fixed to the bottom of the screen. Since this takes up valuable screen real estate (especially on mobile devices), you’ll want to use a minimalist footer.

Update 2/9/17: Another issue is that Divi animations don’t work. If you apply an animation to an module, it never appears. I’m guessing that the event that Divi uses to display animations doesn’t get triggered. There’s probably a fix, but since I have had a need, I haven’t investigated this fully.

Steps to Integrate fullPage.js and Divi

1. Add the fullPage.js files to Divi Child theme

The first step is to get the required fullPage.js files uploaded and stored within your website’s Divi child theme. (Alternately, you may choose to load these files via CDN. If you choose that route, you can skip this step, but you’ll need to modify the code that enqueues the files to load via CDN.)

You’ll need to download the fullPage.js library and unzip the contents. Navigate to the dist directory and locate the following files:

  • jquery.fullpage.min.css
  • jquery.fullpage.min.css.map
  • jquery.fullpage.min.js
  • jquery.fullpage.min.js.map

In your child theme, create a subdirectory named ‘fullpage’ and upload the above files inside.

2. Create a custom page template

In this step, we will copy Divi’s standard page template and modify it by adding a div that fullPage.js requires.

In the Divi theme directory, locate the file named page.php and copy it to your child theme.

Rename the file to page_template-fullpage.php.

Open the file for edit and add these two code snippets.

Immediately following the first line [<?php], add these lines:

/*
Template Name: FullPage Scroll
*/

Locate the line containing:

<div class="entry-content">

Insert this line immediately after:

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

Also, locate this line;

</div> <!-- .entry-content -->

Insert this line immediately before:

</div> <!-- .fullpage -->

3. Create a javascript file to launch fullPage.js

In this step, we will create a javascript file that will launch fullPage.js for pages that use our custom page template with the desired configuration options.

If your child theme’s fullpage subdirectory, create a new file named ‘fullpage-config.js’. Open the file and add these lines of code:

(function($){
	$(document).ready(function() {
		if ($("body").hasClass("page-template-page_template-fullpage")) {
			$('#fullpage').fullpage({
				navigation: true,
				navigationPosition: 'right'
			});
		}
	});
})(jQuery);

4. Enqueue the fullPage.js javascript and CSS files

The purpose of this step is to have the fullPage javascript and CSS files loaded by WordPress when pages are displayed.

Add this code to your child theme’s functions.php file.

function enqueue_fullpage_files() {
  wp_enqueue_style( 'fullpage-css', get_stylesheet_directory_uri() . '/fullpage/jquery.fullpage.min.css' );
  wp_enqueue_script( 'fullpage', get_stylesheet_directory_uri() . '/fullpage/jquery.fullpage.min.js', array( 'jquery' ), '1.0.0', true );
  wp_enqueue_script( 'fullpage-config', get_stylesheet_directory_uri() . '/fullpage/fullpage-config.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_fullpage_files' );

Add some CSS to your child theme’s stylesheet

We are adding CSS to address several issues:

  • Force the footer to appear by making it fixed to the bottom of the screen.
  • Because fullPage will display fill the screen with each section (including the space behind the header and footer, we need to pad the top and bottom so that your content doesn’t end up underneath these areas.
  • I added flexbox to the move things into the center of the section. You may wish to remove to remove these lines and style your pages differently.
  • Address a problem that we encountered when viewing pages with Chrome browsers.
/* FullPage */
.page-template-page_template-fullpage.et_fixed_nav.et_show_nav #page-container {
  position: relative;
}
.page-template-page_template-fullpage #et-main-area {
  padding-top: 0;
}
.page-template-page_template-fullpage #fullpage {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.page-template-page_template-fullpage .et_pb_section.section {
  height: 100vh;
  padding-top: 0 !important;
}
/* Adjust Section Sizes for Header and Footer */
.page-template-page_template-fullpage  .fp-tableCell {
  padding-top: 136px;
  padding-bottom: 55px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media all and (max-width: 981px) {
  .page-template-page_template-fullpage  .fp-tableCell {
    padding-top: 80px;
    padding-bottom: 70px;
  }
}
.page-template-page_template-fullpage .et_pb_section {
  padding-top: 0 !important;
}
/* Footer Adjustments */
 .page-template-page_template-fullpage #main-footer {
     position: fixed;
     width: 100%;
     bottom: 0;
 }
 @media all and (max-width: 980px) {
  .page-template-page_template-fullpage #footer-info,
  .page-template-page_template-fullpage .et-social-icons {
    display: none;
  }
  #footer-bottom {
    padding: 10px 0;
  }
}
/* Fix for Chrome-specific misalignment problem */
.page-template-page_template-fullpage article {
    height: -webkit-fill-available;
}

Note: Since the size of your header and footer will be different than mine, you will need to replace the padding-top and padding-bottom assigned to .fp-tableCell with your page’s header and footer dimensions. You can do this by inspecting the sizes of #main-header and #main-footer. Be sure to replace the second set in the media section with the dimensions from your page when displayed on mobile devices.

You can test whether you have set these dimension correctly when you inspect and .fp-tableCell element (They are inside each section.) When you hover with the inspector the padded area should perfectly overlay the header and footer look shown in these screenshots.

Screenshot of fp-TableCell on laptopScreenshot of fp-TableCell on iPhone

5. How to add a full screen scroll snap page

When you create a page where you want to enable full screen snap scrolling, in the Page Attributes metabox in the sidebar, you need to select the FullPage Scroll as the template.

Then in each section module (they can be standard or fullwidth modules), go to the Advanced Tab and enter ‘section’ (without the quote marks) in the CSS Class field.

Summary

Integrating fullPage.js into Divi provides the ability to add full screen snap scrolling to a Divi website. There are some tradeoffs. But the results are pretty spectacular.

There are a host of built-in optional features that can be enabled. Check out the fullPage.js documentation.

Please let me know in the comments below and tell me if this has been helpful. And if you encounter problems, let me know, I’ll try to help.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This