This tutorial provides the JavaScript and CSS codes that can be pasted in order to integrate the JS library fullPage.js inside Bricks Builder.
The HTML Structure
fullPage.js requires a specific DOM structure in order to work. it needs:
- a wrapper. We are going to use the
<main>
element of our site. - the inner sliding sections need to be direct children of the wrapper. We will use
section
elements as our sliding sections (available from version 1.5). - the horizontal slides need to be direct children of the sliding section. So we will use
container
elements for our horizontal slides.
Here is the final structure of our example:

We also need to assign a class slide
to each horizontal slide:

Enqueue the fullPage.js files
The first thing to do is to download the dist files from here: https://github.com/alvarotrigo/fullPage.js/tree/master/dist and download the following files:
fullpage.min.js
fullpage.min.css
Once downloaded, make sure to upload these files inside your child theme. To keep things organized, we uploaded them in the following directories of our child theme:
/js/fullpage/fullpage.min.js
/css/fullpage/fullpage.min.css
We also need to create a script.js
file inside our /js/
directory where we’ll add our init code.
Now it’s time to enqueue your files. Open the functions.php
file or your child theme and enqueue yours files like this:
add_action( 'fullpagejs_enqueue_scripts', function() {
// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
if ( ! bricks_is_builder_main() ) {
// Fullpage
wp_enqueue_script( 'fullpage', get_stylesheet_directory_uri() . '/js/fullpage/fullpage.min.js', array(), '4.0.9' );
wp_enqueue_style( 'fullpage', get_stylesheet_directory_uri() . '/css/fullpage/fullpage.min.css', '4.0.9' );
// Init
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.js', array('fullpage'), filemtime( get_stylesheet_directory() . '/js/script.js' ) );
}
} );
Pay attention that, right now, we are initializing the script on every page of our site. That’s probably not what you are looking for, but that’s out of the scope of this tutorial. Here is a good discussion about conditional enqueue if you are willing to dig more into it.
Add some CSS
From our tests, we will require to add a few rows of CSS in order to make it looks good on frontend and avoid flash of unstyled content. Copy/paste the following CSS to the style.css
file of your child theme:
body #brx-content {
display: block;
min-height: 100vh;
}
body.bricks-is-frontend #brx-content > section {
opacity: 0;
transition: 300ms opacity ease;
}
body.bricks-is-frontend #brx-content > section.fp-section {
opacity: 1;
}
Initialize the script
The final step is to initialize the fullPage.js script.
Copy/paste the following code inside the script.js
file you created earlier:
window.addEventListener('load', () => {
if (!document.body.classList.contains('bricks-is-frontend') ){
return;
}
// Fullpage
new fullpage('#brx-content', {
//options here
autoScrolling:true,
sectionSelector: '#brx-content > section',
slideSelector: '#brx-content > section .slide',
fixedElements: '#brx-header, #brx-footer',
});
});
There are a lot more options you can add, just refer to the official documentation.
Final result
If everything worked as expected, here is what you should see on the frontend:
Conclusion
Before adding fullPage.js to your website, make sure to read their terms & conditions carefully and – if it applies to your project – purchase a valid license. Happy sliding!
5 comments
Grzegorz
Seems to not be working now - at least heder and footer are hidden.
Philipp Stakenborg
Hello Maxime,
thank you for this tutorial. I am planning to try this in 2 month. I wonder if it is possible to use fullpage.js just for a CPT and not for a whole website? I am thinking about something like a Fullpage.js Laoyut builder where the client can easily add new "scrollstory" pages (probably with metabox).
Should I put this in the tutorial request, cause it might be vaulable for other users as well? 🙂
Greetings
Philipp
Sridhar Katakam
Yes, it is possible.
Is the objective to show individual posts of the CPT as sections with each section having the post's featured image as background and title and excerpt overlayed on the center? and is this, on the CPT archive page?
Lukáš Jakab
Hello Maxime, I am currently playing with fullPage and I wonder if it is doable with WP Codebox?
Maxime Beguin
Hey Lukáš, yup should work too.