My staging environment
Theme: Underscores or Hello Theme
Elementor Version: Pro ( May be required to get template shortcodes )
Additional Plugin: Simple Custom CSS & JS
FullPage.js is a simple and easy to use library to create fullscreen scrolling websites (also known as single page websites or one page sites). It allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site.
Before we get too far ahead let’s go ahead and include the required files needed for FullPage.js to work its magic.
Download and install the additional plugin Simple Custom CSS & JS required for this tutorial.
Next go to Custom CSS & JS > Add Custom HTML and give it the tile of FullPage Links and paste these links below the comment section:
FullPage.js cdn can be found here
Creating The Slides
Because Elementor is awesome we will be creating our slides using Elementor templates.
Go to Elementor > My Templates and select Add New and create new section and give it the name of Slide 1.
Build your slide as you would any other section.
Repeat this step for all of your slides giving each slide a different name.
Important slide notes
Make sure your slide height is set to Fit to Screen.
Your background image should be place as the section BG.
Because Fit to Screen doesn’t work on mobile we need to add an additional class to fix this.
Open the page you want to add your slider with Elementor and drag a HTML widget to the page.
Remove the padding and margin from the column by inputing ( 0 ) in all the boxes.
Make the section Full Width.
Next we need to add our mark up to the HTML widget.
Next you need to copy and paste in your slide template shortcodes and it save.
Turning On The Plugin
To initialize the plugin we need to go back to Custom CSS & JS plugin > Add Custom JS.
Copy and paste this below the comment and give it the title of FullPage Script and be sure you place this script in footer.
Apply this CSS so that your slider will fit height of the screen on mobile devices.
Hopefully this tutorial wasn’t too difficult or confusing to follow. Here is an example of what I create using this same process.
The possibilities are endless when you can build your own slides using the Elementor Builder and its template system. I would love to see what creative ways the community puts this to work in their designs.