We understand how taxing it is for some people to scroll a website just to be on a perfect spot of what they are reading about. Personally, there were times when I have to scroll up and down multiple times just to find what I was reading about because the scroll option was too sensitive. Have you ever experienced that too? If yes, you won’t have to worry about your website now. The solution we have for you is a fullpage scroll website. 

This fullpage scroll feature makes it easy for everyone. Just like reading a book, all you have to do is scroll once to go to the next page. How convenient, right?  

So, if you’re here to read on how you could make your website looking high class, easy to navigate, and impressive enough for your audience, then you’re at the right place.

Let me guide you on how you can do that. Let’s start!

Creating your Divi Child Theme

The first thing we have to do is to create a Divi child theme. If you’re wondering, why does it have to be a child theme, that’s because this will keep you out from making a mess out of our actual Divi theme. Creating a Divi child theme would make it easier to create and correct modifications. We wouldn’t want you to frustrate about an erased CSS just because you updated your site. 

If you want to learn how to make one, I’ve got the perfect blog for that as well. Read about Divi Child Theme here.

Plugging in your fullPage.js into your Child Theme

Did you enjoy creating your Divi child theme? Then it’s time for something a little complicated but also fun at the same time. Once you’ve created your Divi Child Theme, what’s left to do is to integrate the fullpage.js. 

Here’s what you have to do:

  1. Go to fullPage.js and download the library.
  2. Click Download and unzip the downloaded file.

3. Look for the folder named “dist” in the extracted folder.

4. Go back to your Divi Child Theme and create a subdirectory called „fullpage“.

5. Inside the „fullpage“ subdirectory, paste all the files you will copy in the dist folder.

Congratulations! You’ve just installed fullpage.js library into your Divi child theme. Let’s move on to the next step.

Custom Page Template Creation

After you install the fullpage.js, we need to create a custom page template by using the standard Divi page template and create a new one from there. This is because we have to inherit the parent theme template to make the fullpage scroll work. Do the following steps to create one.

  1. Copy (page.php), Divi’s standard page template into your Divi child theme.
  2. Rename page.php inside the Divi child theme as ‘page_template-fullpage.php‘

    Now, It’s time to edit it to a fullpage.
  3.  Insert the tag below after the PHP opening tag (<?php).
  /*
 Template Name: FullPage Scroll
 */

4. It will look like this

5. Look for the line containing: 

„<div class=“entry-content“>“

Then insert the line below after it.

„<div id=“fullpage“ class=“fullpage“>“

It should look like this:

6. Find the closing tag of entry-content, such as below:

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

And insert the line below

</div><!– .fullpage –>

By doing the steps above, we now have embedded a “fullpage“ section inside “entry-content“ section.

JavaScript files as the fullpage.js

Now, it’s to make the “fullpage” configuration. Don’t worry, just follow the steps below.

1. Go to your Divi child theme and under the “fullpage” folder, create a new JavaScript file names as ‚fullpage-config.js‘

2. Copy and paste the code below in your fullpage-config.js.

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

3. It’s time to enqueue fullPage.js JavaScript and CSS File. Copy and paste the below code in functions.php inside Divi child theme.

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' );

4. After enqueueing, we can also add some CSS styles. With this I’ll share you my own CSS code from my site https://studentenwebdesign.ch/

/*
Theme Name: Divi Child
Theme URI:
Description: Studenten Webdesign
Author: Pascal Cabart
Author URI: https://studentenwebdesign.ch
Template: Divi
Version: 1.0.0
*/
/* FullPage */


/* 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;
}

Full Scroll Page Template

You now have a Divi Child Theme, installed fullpage.js, a custom page template, and a JavaScript of your fullpage configuration. Now it’s time to put it to a test, and see if we’ve all put them together properly. Let’s do the final step! 

  1. Start by create a new page. Go to your dashboard and go to the “pages” tab, then click add new. 
  2. Make sure to choose the “FullPage Scroll“ as the template in the settings. In my case, I change it to Blank Page Full-Page Scroll, since I had other customization in it. Which is for another blog. So, in your case, make sure to choose the “Full-page Scroll“ option under the tab template in the default editor.

3. Add Divi Sections and assign „section“ as CSS Class. To do that, click on the module settings icon > Advanced and add „section“ in CSS Class field.

4. Publish the page and view the page to see each section taking up fullpage and scroll the mouse wheel to jump to the next section. Here’s how mine looks. You can also visit this page to check out if the fullpage scroll works. https://studentenwebdesign.ch/

The fullpage scroll is an impressive feature your site can have. Although, we try to share what we know, there can be issues that might arise due to our own websites’ uniqueness. Nonetheless, if this blog works for you, leave a comment to say how it looks for you. If it doesn’t tell me about it in the comment and we’ll see how we could work it out for you.